More a11y: dialogs on book page

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

diff --git a/src/wolnelektury/templates/header.html b/src/wolnelektury/templates/header.html
index 3cc4851..9bb3b15 100644 (file)
--- a/src/wolnelektury/templates/header.html
+++ b/src/wolnelektury/templates/header.html
@@ -11,63 +11,92 @@
 
 {% annoy_banner_blackout %}
 
-<nav class="l-navigation">
+<nav class="l-navigation" aria-label="Główna">
   <div class="l-container">
     <a href="/" class="l-navigation__logo">
       <img src="{% static "2022/images/logo.svg" %}" alt="WolneLektury.pl">
     </a>
     <div class="l-naviagion__search">
-      <form action="/szukaj/">
-        <input id="search" name="q" type="text" placeholder="szukaj tytułu, autora, motywów…" autocomplete="off" data-source="/szukaj/hint/?max=10">
+      <form action="/szukaj/" role="search">
+        <input id="search" name="q" type="text" placeholder="szukaj tytułu, autora, motywów…" autocomplete="off" data-source="/szukaj/hint/?max=10" aria-label="szukaj">
       </form>
     </div>
     <div class="l-navigation__actions">
       <div class="l-navigation__user-actions">
         {% include 'user_actions.html' %}
       </div>
-      <button class="l-navigation__button js-menu" aria-label="Menu">
+      <button class="l-navigation__button js-menu"
+              aria-label="Menu" aria-haspopup="dialog" aria-controls="main-menu"
+              >
         <span class="c-hamburger">
           <span class="bar"></span>
         </span>
       </button>
     </div>
-    {% include 'lang-switcher.html' %}
+  </div>
+
+  <dialog id="main-menu" class="l-navigation__menu" aria-label="Menu">
+    <div class="l-navigation__menu__top">
+      <div class="l-container">
+        <a href="/" class="l-navigation__logo">
+          <img src="{% static "2022/images/logo.svg" %}" alt="WolneLektury.pl">
+        </a>
+        {% include 'lang-switcher.html' with list_id="lang-desktop" %}
+        <button class="l-navigation__button js-menu-close"
+                aria-label="Zamknij menu"
+                >
+          <span class="c-hamburger">
+            <span class="bar"></span>
+          </span>
+        </button>
+      </div>
+    </div>
 
-    <div class="l-navigation__menu">
+      
       <div class="scrollable">
         <div class="l-container">
 
           <div class="l-navigation__user-bar">
             <div class="l-navigation__user-actions">
-              {% include 'lang-switcher.html' %}
-              {% include 'user_actions.html' %}
+              {% include 'lang-switcher.html' with list_id="lang-mobile" %}
+              {% include 'user_actions.html' with hide_menu=True %}
             </div>
           </div>
 
           <div class="l-navigation__menu__blocks">
             <div class="l-navigation__menu__links">
               {% cache 30 menu LANGUAGE_CODE %}
-                <ul>
-                  <li><strong>{% trans "Katalog" %}</strong></li>
+              <div class="l-navigation__menu__group">
+                <h2 id="menu-group-1">{% trans "Katalog" %}</h2>
+                <ul aria-labelledby="menu-group-1">
                   {% menu 'Katalog' %}
                 </ul>
-                <ul>
-                  <li><strong>{% trans "Włącz się" %}</strong></li>
+              </div>
+              <div class="l-navigation__menu__group">
+                <h2 id="menu-group-2">{% trans "Włącz się" %}</h2>
+                <ul aria-labelledby="menu-group-2">
                   {% menu 'Włącz się' %}
                 </ul>
-                <ul>
-                  <li><strong>{% trans "Aktualności" %}</strong></li>
+              </div>
+              <div class="l-navigation__menu__group">
+                <h2 id="menu-group-3">{% trans "Aktualności" %}</h2>
+                <ul aria-labelledby="menu-group-3">
                   {% latest_blog_posts %}
                   {% menu 'Aktualności' %}
                 </ul>
-                <ul>
-                  <li><strong>{% trans "Narzędzia" %}</strong></li>
+              </div>
+              <div class="l-navigation__menu__group">
+                <h2 id="menu-group-4">{% trans "Narzędzia" %}</h2>
+                <ul aria-labelledby="menu-group-4">
                   {% menu 'Narzędzia' %}
                 </ul>
-                <ul>
-                  <li><strong>{% trans "O nas" %}</strong></li>
+              </div>
+              <div class="l-navigation__menu__group">
+                <h2 id="menu-group-5">{% trans "O nas" %}</h2>
+                <ul aria-labelledby="menu-group-5">
                   {% menu 'O nas' %}
                 </ul>
+              </div>
               {% endcache %}
             </div>
 
@@ -78,28 +107,28 @@
               </div>
 
               <div class="l-navigation__menu__social">
-                <ul>
+                <ul aria-label="{% trans "Media społecznościowe" %}">
                   <li>
                     <a href="https://www.facebook.com/wolnelektury/"
-                       title="Facebook" tabindex="-1" target="_blank">
+                       title="Facebook" target="_blank">
                       <i class="icon icon-fb" aria-hidden="true"></i>
                     </a>
                   </li>
                   <li>
                     <a href="https://www.youtube.com/c/WolneLekturyYT/"
-                       title="YouTube" tabindex="-1" target="_blank">
+                       title="YouTube" target="_blank">
                       <i class="icon icon-yt" aria-hidden="true"></i>
                     </a>
                   </li>
                   <li>
                     <a href="https://www.instagram.com/wolnelektury/"
-                       title="Instagram" tabindex="-1" target="_blank">
+                       title="Instagram" target="_blank">
                       <i class="icon icon-ig" aria-hidden="true"></i>
                     </a>
                   </li>
                   <li>
                     <a href="https://twitter.com/wolnelektury"
-                       title="Twitter" tabindex="-1" target="_blank">
+                       title="Twitter" target="_blank">
                       <i class="icon icon-tt" aria-hidden="true"></i>
                     </a>
               </li>
@@ -109,8 +138,7 @@
         </div>
         </div>
       </div>
-    </div>
-  </div>
+    </dialog>
 </nav>
 
 {% block under-menu %}{% endblock %}