Fix keyboard navigation accessibility

[galette.git] / galette / templates / default / elements / logged_user.html.twig

diff --git a/galette/templates/default/elements/logged_user.html.twig b/galette/templates/default/elements/logged_user.html.twig
index 146fa73d7891abfc816134974dbc750b452a9164..92275b8a185edc9e7868174d445d2c8ffebad51e 100644 (file)
--- a/galette/templates/default/elements/logged_user.html.twig
+++ b/galette/templates/default/elements/logged_user.html.twig
@@ -59,11 +59,12 @@
             </div>
             {% include "elements/modes.html.twig" %}
         {% else %}
-            {% set component_classes = "ui vertical centered tiny fluid icon menu" %}
+            {% set component_classes = "ui vertical centered tiny icon fluid menu" %}
             <div id="logoutmenu" class="{{ component_classes }}">
-                <div class="ui dropdown item no-touch tooltip" data-html="{{ login.loggedInAs()|raw }}" data-position="right center">
+                <div class="ui dropdown navigation item no-touch tooltip" data-html="{{ login.loggedInAs()|raw }}" data-position="right center">
                     <i class="user circle icon" aria-hidden="true"></i>
-                    <span class="text displaynone">{{ login.loggedInAs()|raw }}</span>
+                    <span class="displaynone">{{ login.loggedInAs()|raw }}</span>
+                    <i class="dropdown icon" aria-hidden="true"></i>
                     <div class="menu">
                         <div class="item">
                             <div class="ui basic center aligned fitted segment">
@@ -77,24 +78,27 @@
                             <div class="ui basic fitted segment">
                                 {% include "elements/modes.html.twig" %}
                             </div>
-                            <a
-                                href="#"
-                                class="ui darkmode{% if login.isDarkModeEnabled() %} black{% endif %} fluid icon button"
-                                title="{% if login.isDarkModeEnabled() %}{{ _T("Disable dark mode") }}{% else %}{{ _T("Enable dark mode") }}{% endif %}"
-                            >
-                                <i class="icon adjust" aria-hidden="true"></i>
-                                {% if login.isDarkModeEnabled() %}{{ _T("Disable dark mode") }}{% else %}{{ _T("Enable dark mode") }}{% endif %}
-                            </a>
-                            <a
-                                class="ui {% if login.isImpersonated() %}purple{% else %}red{% endif %} fluid icon button"
-                                href="{% if login.isImpersonated() %}{{ url_for("unimpersonate") }}{% else %}{{ url_for("logout") }}{% endif %}"
-                            >
-                                <i class="icon {% if login.isImpersonated() %}user secret{% else %}sign out alt{% endif %}" aria-hidden="true"></i>
-                                {% if login.isImpersonated() %}{{ _T("Unimpersonate") }}{% else %}{{ _T("Log off") }}{% endif %}
-                            </a>
                         </div>
                     </div>
                 </div>
+                <a
+                    href="#"
+                    class="item darkmode{% if login.isDarkModeEnabled() %} black{% endif %}"
+                    title="{% if login.isDarkModeEnabled() %}{{ _T("Disable dark mode") }}{% else %}{{ _T("Enable dark mode") }}{% endif %}"
+                    data-position="right center"
+                >
+                    <i class="icon adjust" aria-hidden="true"></i>
+                    <span class="displaynone">{% if login.isDarkModeEnabled() %}{{ _T("Disable dark mode") }}{% else %}{{ _T("Enable dark mode") }}{% endif %}</span>
+                </a>
+                <a
+                    class="item{% if login.isImpersonated() %} purple{% else %} red{% endif %}"
+                    href="{% if login.isImpersonated() %}{{ url_for("unimpersonate") }}{% else %}{{ url_for("logout") }}{% endif %}"
+                    title="{% if login.isImpersonated() %}{{ _T("Unimpersonate") }}{% else %}{{ _T("Log off") }}{% endif %}"
+                    data-position="right center"
+                >
+                    <i class="icon {% if login.isImpersonated() %}user secret{% else %}sign out alt{% endif %}" aria-hidden="true"></i>
+                    <span class="displaynone">{% if login.isImpersonated() %}{{ _T("Unimpersonate") }}{% else %}{{ _T("Log off") }}{% endif %}</span>
+                </a>
             </div>
         {% endif %}
     {% endif %}