Accessibility fixes

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

diff --git a/src/wolnelektury/templates/header.html b/src/wolnelektury/templates/header.html
index 17e2379..7b257b3 100644 (file)
--- a/src/wolnelektury/templates/header.html
+++ b/src/wolnelektury/templates/header.html
@@ -7,10 +7,11 @@
 {% load preview_ad from catalogue_tags %}
 
 {% annoy_banner_crisis %}
 {% load preview_ad from catalogue_tags %}
 
 {% annoy_banner_crisis %}

+{% annoy_banner_top %}

 
 {% annoy_banner_blackout %}
 
 
 {% 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">
   <div class="l-container">
     <a href="/" class="l-navigation__logo">
       <img src="{% static "2022/images/logo.svg" %}" alt="WolneLektury.pl">


@@ -24,22 +25,41 @@
       <div class="l-navigation__user-actions">
         {% include 'user_actions.html' %}
       </div>
       <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>
         <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">
       <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>
           </div>
 


@@ -80,25 +100,25 @@
                 <ul>
                   <li>
                     <a href="https://www.facebook.com/wolnelektury/"
                 <ul>
                   <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/"
                       <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/"
                       <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"
                       <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>
                       <i class="icon icon-tt" aria-hidden="true"></i>
                     </a>
               </li>


@@ -108,8 +128,7 @@
         </div>
         </div>
       </div>
         </div>
         </div>
       </div>

-    </div>
-  </div>
+    </dialog>

 </nav>
 
 {% block under-menu %}{% endblock %}
 </nav>
 
 {% block under-menu %}{% endblock %}