More a11y: dialogs on book page

[wolnelektury.git] / src / wolnelektury / templates / user_actions.html

diff --git a/src/wolnelektury/templates/user_actions.html b/src/wolnelektury/templates/user_actions.html
index 1a804f1..fb05a98 100644 (file)
--- a/src/wolnelektury/templates/user_actions.html
+++ b/src/wolnelektury/templates/user_actions.html
@@ -1,39 +1,51 @@
 {% load i18n static %}
 
 {% if request.user.is_authenticated %}
-  <a href="/ludzie/polka/"><i class="icon icon-liked"></i></a>
-  <div id="user-menu">
+<a class="user-liked" href="/ludzie/polka/" aria-label="Półka"><i class="icon icon-liked"></i></a>
+  {% if hide_menu %}
+    <a href="{% url 'user_settings' %}" class="user" aria-label="{% trans "Twoje konto" %}">
+      {% else %}
+      <button type="button" class="user"
+              popovertarget="user-menu"
+              aria-label="{% trans "Menu konta" %}">
+    {% endif %}
+    {% if request.user.is_staff %}
+      <img src="{% static '2022/images/icons/user-staff.svg' %}" alt="Użytkownik">
+    {% elif request.user.membership %}
+      <img src="{% static '2022/images/icons/user-vip.svg' %}" alt="Użytkownik">
+    {% else %}
+      <img src="{% static '2022/images/icons/user.svg' %}" alt="Użytkownik">
+      {% endif %}
+  {% if hide_menu %}
+    </a>
+    {% else %}
+    </button>
+    {% endif %}
+  {% if not hide_menu %}
+  <div id="user-menu" popover>
     <ul>
       <li>
-        <a href="{% url 'user_settings' %}" tabindex="-1">
+        <a href="{% url 'user_settings' %}">
           <strong>
             {{ request.user.username }}
           </strong>
         </a>
       </li>
       {% if request.user.is_staff %}
-        <li><a href="{% url 'admin:index' %}" tabindex="-1">{% trans "Administracja" %}</a></li>
-        <li><a class='edit-links-toggle' href="#" tabindex="-1">{% trans "Edytuj" %}</a></li>
+        <li><a href="{% url 'admin:index' %}">{% trans "Administracja" %}</a></li>
+        <li><a class='edit-links-toggle' href="#">{% trans "Edytuj" %}</a></li>
       {% endif %}
       {% if request.user.membership %}
         <li><a href="{% url 'club_join' %}">{% trans "Wspierasz Wolne Lektury, dziękujemy!" %}</a></li>
       {% endif %}
 
-      <li><a href="{% url 'logout' %}?next={% block logout %}{{ request.get_full_path }}{% endblock %}" tabindex="-1">{% trans "Wyloguj się" %}</a></li>
+      <li><a href="{% url 'logout' %}?next={% block logout %}{{ request.get_full_path }}{% endblock %}">{% trans "Wyloguj się" %}</a></li>
     </ul>
   </div>
-  <a href="{% url 'user_settings' %}" class="user">
-    {% if request.user.is_staff %}
-      <img src="{% static '2022/images/icons/user-staff.svg' %}">
-    {% elif request.user.membership %}
-      <img src="{% static '2022/images/icons/user-vip.svg' %}">
-    {% else %}
-      <img src="{% static '2022/images/icons/user.svg' %}">
-    {% endif %}
- </a>
+  {% endif %}
 {% else %}
   <div class="l-navigation__login">
-    <a id="login-link" href='{% url 'login' %}?next={{ request.path }}'>{% trans "Zaloguj się" %}</a>
+    <a class="login-link" href='{% url 'login' %}?next={{ request.path }}'>{% trans "Zaloguj się" %}</a>
     /
     <a href='{% url 'register' %}?next={{ request.path }}'>{% trans "Załóż konto" %}</a>
   </div>