Accessibility fixes

diff --git a/src/chunks/models.py b/src/chunks/models.py
index fc03c1b..7bca1e2 100644 (file)
--- a/src/chunks/models.py
+++ b/src/chunks/models.py
@@ -69,9 +69,13 @@ class MenuItem(models.Model):
     class Meta:
         ordering = ('order',)
 
     class Meta:
         ordering = ('order',)
 

+    @property
+    def is_separator(self):
+        return self.name == '-'
+

     @property
     def final_name(self):
     @property
     def final_name(self):

-        if self.name == '-':
+        if self.is_separator:

             return mark_safe('<hr>')
         if self.name:
             return self.name
             return mark_safe('<hr>')
         if self.name:
             return self.name

diff --git a/src/chunks/templates/chunks/menu.html b/src/chunks/templates/chunks/menu.html
index ed6669a..822162a 100644 (file)
--- a/src/chunks/templates/chunks/menu.html
+++ b/src/chunks/templates/chunks/menu.html
@@ -1,7 +1,7 @@
 {% for item in menu.menuitem_set.all %}
 {% for item in menu.menuitem_set.all %}

-  <li>
+  <li {% if item.is_separator %}aria-hidden="true"{% endif %}>

     {% if item.has_link %}
     {% if item.has_link %}

-      <a href="{{ item.final_link }}" tabindex="-1">
+      <a href="{{ item.final_link }}">

     {% endif %}
     {% if item.highlight %}
       <em>
     {% endif %}
     {% if item.highlight %}
       <em>

diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss
index 1e6b692..ff590a5 100644 (file)
--- a/src/wolnelektury/static/2022/more.scss
+++ b/src/wolnelektury/static/2022/more.scss
@@ -1,24 +1,5 @@
 @import "styles/utils/mixins";
 
 @import "styles/utils/mixins";
 

-body.is-open {
-    height: 100%;
-    overflow-y: hidden;
-}
-
-.l-navigation__menu {
-    .scrollable {
-        height: 100%;
-        overflow-y: scroll;
-        padding-bottom: 30px;
-    }
-}
-
-.l-navigation__menu__links ul li a em {
-    font-style: normal;
-    color: #FFA500;
-    font-weight: 600;
-}
-

 .l-collections .l-books {
     width: 100%;
 }
 .l-collections .l-books {
     width: 100%;
 }


@@ -148,30 +129,25 @@ body.is-open {
 
 
 #user-menu {
 
 
 #user-menu {

-    //display: none;
-
+    --focus-ring: #083F4D;
+    position-area: bottom span-right;

     position:absolute;
     position:absolute;

-    top: 60px;
-    z-index: 50;
-
-    position: absolute;

     width: 186px;
     width: 186px;

-    top: 48px;
-    right: 45px;
+    top: 8px;

 
     /* yellow 900 */
     background: #F7BA00;
 
     /* yellow 900 */
     background: #F7BA00;

+    border: none;

     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
     border-radius: 10px;
     overflow: hidden;
 
     opacity:0;
     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
     border-radius: 10px;
     overflow: hidden;
 
     opacity:0;

-    pointer-events: none;
-    transition: 200ms opacity;
+    transition: all 350ms cubic-bezier(.0, 0, .2, 1), // $ease-out
+              display 350ms allow-discrete,
+              overlay 350ms allow-discrete;

     
     

-    &.is-open {
-        //display: block;
-        pointer-events: all;
+    &:popover-open {

         opacity: 100%;
     }
 
         opacity: 100%;
     }
 


@@ -199,6 +175,13 @@ body.is-open {
     }
 }
 
     }
 }
 

+@starting-style {
+  #user-menu:popover-open {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+

 
 form {
     label.required:before {
 
 form {
     label.required:before {

diff --git a/src/wolnelektury/static/2022/styles/base/_global.scss b/src/wolnelektury/static/2022/styles/base/_global.scss
index d81a0af..07b9780 100644 (file)
--- a/src/wolnelektury/static/2022/styles/base/_global.scss
+++ b/src/wolnelektury/static/2022/styles/base/_global.scss
@@ -6,11 +6,19 @@
   box-sizing: border-box;
 }
 
   box-sizing: border-box;
 }
 

-:focus {
-  outline: $color-black auto 2px;
+:root {
+    --focus-ring: #083F4D;
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus-ring);

   outline-offset: 2px;
 }
 
   outline-offset: 2px;
 }
 

+html {
+  scrollbar-gutter: stable;
+}
+

 html,
 body {
   -webkit-overflow-scrolling: auto;
 html,
 body {
   -webkit-overflow-scrolling: auto;


@@ -25,12 +33,6 @@ body {
     overflow-y: hidden;
     height: 100vh;
   }
     overflow-y: hidden;
     height: 100vh;
   }

-
-  &.using-mouse {
-    *:focus {
-      outline: 0 !important;
-    }
-  }

 }
 
 .visibility-hidden {
 }
 
 .visibility-hidden {

diff --git a/src/wolnelektury/static/2022/styles/components/_lang.scss b/src/wolnelektury/static/2022/styles/components/_lang.scss
index ef5d7bc..8cc632d 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_lang.scss
+++ b/src/wolnelektury/static/2022/styles/components/_lang.scss
@@ -4,9 +4,6 @@
 
   width: 150px;
   right: 50px + 16px;
 
   width: 150px;
   right: 50px + 16px;

-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 350ms $ease-out;

   z-index: $master-layer + 1;
   display: none;
 
   z-index: $master-layer + 1;
   display: none;
 


@@ -14,21 +11,20 @@
       display: block;
   }
 
       display: block;
   }
 

-  &.is-open {
+  &:has(.c-lang__list:popover-open) {

     .c-lang__button {
       .icon-arrow-down {
         transform: rotate(-180deg);
       }
     }
     .c-lang__button {
       .icon-arrow-down {
         transform: rotate(-180deg);
       }
     }

-    .c-lang__list {
-      transform: none;
-      opacity: 1;
-      pointer-events: all;
-    }

   }
 }
 
 .c-lang__button {
   }
 }
 
 .c-lang__button {

+    border: 0;
+    background: none;
+    padding: 0;
+    font: inherit;

   display: flex;
   align-items: center;
   color: $color-white;
   display: flex;
   align-items: center;
   color: $color-white;


@@ -46,18 +42,31 @@
   }
 }
 
   }
 }
 

+

 .c-lang__list {
 .c-lang__list {

-  margin-top: 10px;
+    --focus-ring: #083F4D;
+    position-area: bottom span-right;
+    position: absolute;
+    inset: auto;
+    width: 150px;
+    margin: 10px 0 0 0;
+    border: 0;

   border-radius: 10px;
   background-color: #F7BA00;
   overflow: hidden;
   transform: translateY(-10px);
   opacity: 0;
   border-radius: 10px;
   background-color: #F7BA00;
   overflow: hidden;
   transform: translateY(-10px);
   opacity: 0;

-  transition: all 350ms $ease-out;
-  pointer-events: none;
-  display: flex;

   flex-direction: column;
   flex-direction: column;

+  transition: all 350ms $ease-out,
+              display 350ms allow-discrete,
+              overlay 350ms allow-discrete;

 
 

+  &:popover-open {
+      display: flex;
+      opacity: 1;
+      transform: none;
+  }
+  

   button {
     display: block;
     padding: 9px 20px;
   button {
     display: block;
     padding: 9px 20px;


@@ -80,3 +89,10 @@
     }
   }
 }
     }
   }
 }

+
+@starting-style {
+  .c-lang__list:popover-open {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}

diff --git a/src/wolnelektury/static/2022/styles/components/_media.scss b/src/wolnelektury/static/2022/styles/components/_media.scss
index 9c5f34f..6b15f80 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_media.scss
+++ b/src/wolnelektury/static/2022/styles/components/_media.scss
@@ -269,7 +269,6 @@
   position: absolute;
   padding: 0;
   border: 0;
   position: absolute;
   padding: 0;
   border: 0;

-  outline: 0;

   cursor: pointer;
   font-size: 0;
   background-color: transparent;
   cursor: pointer;
   font-size: 0;
   background-color: transparent;

diff --git a/src/wolnelektury/static/2022/styles/layout/_button.scss b/src/wolnelektury/static/2022/styles/layout/_button.scss
index b1844d8..44d3350 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_button.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_button.scss
@@ -7,8 +7,6 @@
     cursor: pointer;
     transition: all $ease-dynamic 350ms;
     background-color: $color-white;
     cursor: pointer;
     transition: all $ease-dynamic 350ms;
     background-color: $color-white;

-    outline: 0;
-

     font-weight: bold;
     line-height: 17.6px;
     display: flex;
     font-weight: bold;
     line-height: 17.6px;
     display: flex;

diff --git a/src/wolnelektury/static/2022/styles/layout/_navigation.scss b/src/wolnelektury/static/2022/styles/layout/_navigation.scss
index a47875b..9e3aafc 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_navigation.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_navigation.scss
@@ -3,6 +3,8 @@ body {
 }
 
 .l-navigation {
 }
 
 .l-navigation {

+  --focus-ring: #fff;
+    

   max-width: 100%;
   margin: 0 auto;
   background-color: #083F4D;
   max-width: 100%;
   margin: 0 auto;
   background-color: #083F4D;


@@ -41,14 +43,8 @@ body {
 
     .l-navigation__menu {
       opacity: 1;
 
     .l-navigation__menu {
       opacity: 1;

-      pointer-events: all;
-    }
-
-    .c-lang {
-      opacity: 1;
-      .c-lang__button {
-        pointer-events: all;
-      }
+      visibility: visible;
+      pointer-events: auto;

     }
   }
 }
     }
   }
 }


@@ -87,20 +83,9 @@ body {
   background: 0;
   padding: 0;
   margin: 0;
   background: 0;
   padding: 0;
   margin: 0;

-  outline: 0;

   position: relative;
 }
 
   position: relative;
 }
 

-.is-open {
-    .l-navigation__logo {
-        z-index: $master-layer + 1;
-    }
-    .l-navigation__button {
-        z-index: $master-layer + 1;
-    }
-}
-
-

 .l-naviagion__search {
     width: 60%;
     max-width: 580px;
 .l-naviagion__search {
     width: 60%;
     max-width: 580px;


@@ -123,7 +108,6 @@ body {
     border-radius: 52px;
     width: 100%;
     max-width: 580px;
     border-radius: 52px;
     width: 100%;
     max-width: 580px;

-    outline: 0;

 
     @include rwd($break-menu) {
         font-size: 18px;
 
     @include rwd($break-menu) {
         font-size: 18px;


@@ -138,9 +122,10 @@ body {
     position: relative;
     height: 44px;
 
     position: relative;
     height: 44px;
 

-  .icon-liked {
+  .user-liked {

     color: #85C7CC;
     font-size: 30px;
     color: #85C7CC;
     font-size: 30px;

+    line-height: 30px;

     margin-right: 25px;
   }
 
     margin-right: 25px;
   }
 


@@ -174,6 +159,9 @@ body {
 
     .user {
         margin-right: 25px;
 
     .user {
         margin-right: 25px;

+        background: none;
+        border: none;
+        padding: 0;

     }
 
 }
     }
 
 }


@@ -226,24 +214,51 @@ body {
 }
 
 .l-navigation__menu {
 }
 
 .l-navigation__menu {

-  position: fixed;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  background-color: #083F4D;
-  z-index: $master-layer;
-  padding-top: 50px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 350ms $ease-out;
-
-  @include rwd($break-menu) {
-      padding-top: 93px;
-  }
-  
-  .l-container {
-    display: flex;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    max-width: none;
+    max-height: none;
+    width: 100%;
+    height: 100%;

     flex-direction: column;
     flex-direction: column;

-  }
+    background-color: #083F4D;
+    opacity: 0;
+    transition: opacity 350ms $ease-out;
+    // Gdy
+    // https://caniuse.com/wf-display-animation, https://caniuse.com/wf-overlay
+    //   display 350ms allow-discrete,
+    //   overlay 350ms allow-discrete;
+
+    &[open] {
+        display: flex;
+        opacity: 1;
+    }
+    &:not([open]) {
+        pointer-events: none;
+    }
+    // https://caniuse.com/wf-display-animation, https://caniuse.com/wf-overlay
+    &.is-closing {
+        opacity: 0;
+        pointer-events: none;
+    }
+  
+    .l-navigation__menu__top {
+        padding: 3px 0;
+        @include rwd($break-menu) {
+            padding: 12px 0;
+        }
+    }
+    .scrollable {
+        height: 100%;
+        overflow-y: auto;
+        padding-bottom: 30px;
+
+        .l-container {
+            display: flex;
+            flex-direction: column;
+        }
+    }

 
   .l-navigation__user-bar {
       width: 100%;
 
   .l-navigation__user-bar {
       width: 100%;


@@ -284,6 +299,18 @@ body {
   }
 }
 
   }
 }
 

+body:has(dialog[open]) {
+    overflow: hidden;
+}
+
+@starting-style {
+    .l-navigation__menu[open] {
+        opacity: 0;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+  .l-navigation__menu { transition: none; }
+}

 
 .l-navigation__menu__blocks {
     position: relative;
 
 .l-navigation__menu__blocks {
     position: relative;


@@ -352,6 +379,12 @@ body {
         &:hover {
           text-decoration: underline;
         }
         &:hover {
           text-decoration: underline;
         }

+
+        em {
+            font-style: normal;
+            color: #FFA500;
+            font-weight: 600;
+        }

       }
 
       hr {
       }
 
       hr {

diff --git a/src/wolnelektury/static/2022/styles/vendors/_normalize.scss b/src/wolnelektury/static/2022/styles/vendors/_normalize.scss
index 68c1ec6..49aba02 100644 (file)
--- a/src/wolnelektury/static/2022/styles/vendors/_normalize.scss
+++ b/src/wolnelektury/static/2022/styles/vendors/_normalize.scss
@@ -303,13 +303,7 @@ button::-moz-focus-inner,
 /**
  * Restore the focus styles unset by the previous rule.
  */
 /**
  * Restore the focus styles unset by the previous rule.
  */

-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
+/* WL: removed */

 
 /**
  * Correct the padding in Firefox.
 
 /**
  * Correct the padding in Firefox.

diff --git a/src/wolnelektury/static/js/main.js b/src/wolnelektury/static/js/main.js
index 68d35fa..b646bf4 100644 (file)
--- a/src/wolnelektury/static/js/main.js
+++ b/src/wolnelektury/static/js/main.js
@@ -1,67 +1,37 @@
 // JS Menu
 (function () {
 // JS Menu
 (function () {

-  let button = $('.js-menu');
-  let menu = $('.l-navigation');
-  let menuLinks = menu.find('a');
-
-  button.on('click', function() {
-    if(!$(this).hasClass('is-active')) {
-      $(this).addClass('is-active');
-      menu.addClass('is-open');
-      $('body').addClass('is-open');
-      button.find('.bar').addClass('animate');
-      menuLinks.attr('tabindex', 0);
-    } else {
-      $(this).removeClass('is-active');
-      menu.removeClass('is-open');
-      $('body').removeClass('is-open');
-      button.find('.bar').removeClass('animate');
-      menuLinks.attr('tabindex', -1);
-    }
-  });
-
-  $(document).keyup(function(e) {
-    if (e.keyCode === 27) {
-      button.removeClass('is-active');
-      menu.removeClass('is-open');
-      $('body').removeClass('is-open');
-      button.find('.bar').removeClass('animate');
-      menuLinks.attr('tabindex', -1);
+    const dialog = document.getElementById('main-menu');
+    let buttonOn = $('.js-menu');
+    let buttonOff = $('.js-menu-close');
+    
+    async function closeMenu() {
+        // Może być od razu dialog.close bez is-closing, gdy przeglądarki nadrobią
+        // https://caniuse.com/wf-display-animation, https://caniuse.com/wf-overlay
+        if (!dialog.open || dialog.classList.contains('is-closing')) return;
+        dialog.classList.add('is-closing');
+        buttonOn.find('.bar').removeClass('animate');
+        buttonOff.find('.bar').removeClass('animate');
+        await Promise.allSettled(dialog.getAnimations().map(a => a.finished));
+        dialog.close();

     }
     }

-  });
-})();
-
-// User menu.
-(function() {
-    let button = $('.l-navigation__actions .user');
-    let menu = $('#user-menu');
-    let menuLinks = menu.find('a');
-
-    button.on('click', function() {
-        if (!menu.hasClass('is-open')) {
-            menu.addClass('is-open');
-            menuLinks.attr('tabindex', 0);
-        } else {
-            menu.removeClass('is-open');
-            menuLinks.attr('tabindex', -1)
-        }
-        return false;
+    dialog.addEventListener('close', () => {
+        dialog.classList.remove('is-closing');

     });
 
     });
 

-    $(document).keyup(function(e) {
-        if (e.keyCode === 27) {
-            menu.removeClass('is-open');
-            menuLinks.attr('tabindex', -1);
-        }
+    document.querySelector('.js-menu').addEventListener('click', () => {
+        dialog.showModal();
+        buttonOn.find('.bar').addClass('animate');
+        buttonOff.find('.bar').addClass('animate');

     });
 
     });
 

-    $(document).click(function() {
-      menu.removeClass('is-open');
-      menuLinks.attr('tabindex', -1);
+    dialog.querySelector('.js-menu-close').addEventListener('click', closeMenu);
+    dialog.addEventListener('cancel', e => {
+        e.preventDefault();
+        closeMenu();

     });
     });

-

 })();
 
 })();
 

+

 // Ebook/Audiobook Btns
 (function() {
   let button = $('.c-media__btn button:not(.l-button--media--full)');
 // Ebook/Audiobook Btns
 (function() {
   let button = $('.c-media__btn button:not(.l-button--media--full)');


@@ -566,13 +536,6 @@
         window.location.reload(true);
     });
 
         window.location.reload(true);
     });
 

-    $('.c-lang').on('click', function() {
-        !$(this).toggleClass('is-open');
-    });
-
-
-
-

 
     $(".c-media__settings > i").on('click', function() {
         $(".c-media__settings").toggleClass('active');
 
     $(".c-media__settings > i").on('click', function() {
         $(".c-media__settings").toggleClass('active');

diff --git a/src/wolnelektury/templates/header.html b/src/wolnelektury/templates/header.html
index 3cc4851..7b257b3 100644 (file)
--- a/src/wolnelektury/templates/header.html
+++ b/src/wolnelektury/templates/header.html
@@ -11,7 +11,7 @@
 
 {% 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">


@@ -25,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>
 


@@ -81,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>


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

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

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

diff --git a/src/wolnelektury/templates/lang-switcher.html b/src/wolnelektury/templates/lang-switcher.html
index c50a9cd..fdc2615 100644 (file)
--- a/src/wolnelektury/templates/lang-switcher.html
+++ b/src/wolnelektury/templates/lang-switcher.html
@@ -1,17 +1,19 @@
-

 {% load i18n %}
 {% load i18n %}

+

 <div class="c-lang">
 <div class="c-lang">

-  <div class="c-lang__button">
-    <i class="icon icon-lang"></i>
+  <button type="button" class="c-lang__button"
+          popovertarget="{{ list_id }}">
+    <i class="icon icon-lang" aria-label="{% trans "Język:" %}"></i>

     {{ LANGUAGE_CODE|language_name_local }}
     {{ LANGUAGE_CODE|language_name_local }}

-    <i class="icon icon-arrow-down"></i>
-  </div>
+    <i class="icon icon-arrow-down" aria-hidden="true"></i>
+  </button>

   <form method="post" action="{% url 'set_language' %}">
     {% csrf_token %}
   <form method="post" action="{% url 'set_language' %}">
     {% csrf_token %}

-    <div class="c-lang__list">
+    <div class="c-lang__list" id="{{ list_id }}" popover>

       {% for lang in LANGUAGES %}
         <button type="submit" lang="{{ lang.0 }}"
       {% for lang in LANGUAGES %}
         <button type="submit" lang="{{ lang.0 }}"

-                name="language" value="{{ lang.0 }}" tabindex="121"
+                name="language" value="{{ lang.0 }}"
+                {% if lang.0 == LANGUAGE_CODE %}aria-current="true"{% endif %}

                 class="{% if lang.0 == LANGUAGE_CODE %}is-active{% endif %}">{{ lang.1 }}</button>
       {% endfor %}
     </div>
                 class="{% if lang.0 == LANGUAGE_CODE %}is-active{% endif %}">{{ lang.1 }}</button>
       {% endfor %}
     </div>

diff --git a/src/wolnelektury/templates/main_page.html b/src/wolnelektury/templates/main_page.html
index 3ae4bd3..7832474 100644 (file)
--- a/src/wolnelektury/templates/main_page.html
+++ b/src/wolnelektury/templates/main_page.html
@@ -303,25 +303,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>

diff --git a/src/wolnelektury/templates/user_actions.html b/src/wolnelektury/templates/user_actions.html
index 1a804f1..86d6eed 100644 (file)
--- a/src/wolnelektury/templates/user_actions.html
+++ b/src/wolnelektury/templates/user_actions.html
@@ -1,36 +1,48 @@
 {% load i18n static %}
 
 {% if request.user.is_authenticated %}
 {% 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' %}">
+    {% elif request.user.membership %}
+      <img src="{% static '2022/images/icons/user-vip.svg' %}">
+    {% else %}
+      <img src="{% static '2022/images/icons/user.svg' %}">
+      {% endif %}
+  {% if hide_menu %}
+    </a>
+    {% else %}
+    </button>
+    {% endif %}
+  {% if not hide_menu %}
+  <div id="user-menu" popover>

     <ul>
       <li>
     <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 %}
           <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 %}
 
       {% 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>
     </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>
 {% else %}
   <div class="l-navigation__login">
     <a id="login-link" href='{% url 'login' %}?next={{ request.path }}'>{% trans "Zaloguj się" %}</a>