More a11y: dialogs on book page

diff --git a/src/catalogue/templates/catalogue/book_detail.html b/src/catalogue/templates/catalogue/book_detail.html
index 4852c9a..f87041a 100644 (file)
--- a/src/catalogue/templates/catalogue/book_detail.html
+++ b/src/catalogue/templates/catalogue/book_detail.html
@@ -8,6 +8,12 @@
 {% load annoy %}
 
 
+{% block settings %}
+{% load title %}
+{% title book.pretty_title %}
+{% endblock %}
+
+
 {% block global-content %}
 <div class="l-container">
   {% annoy_banner 'book-page' %}
@@ -168,11 +174,11 @@
                       <div class="c-media__actions lay-col lay-l-row">
                         <div class="c-media__btn">
                           {% if book.has_audio %}
-                            <button class="l-button l-button--media" id="audiobook"><i class="icon icon-audio"></i> {% trans "pobierz audiobook" %}</button>
+                            <button class="l-button l-button--media l-button--dialog" id="audiobook"><i class="icon icon-audio"></i> {% trans "pobierz audiobook" %}</button>
                           {% endif %}
                         </div>
                         <div class="c-media__btn">
-                          <button class="l-button l-button--media" id="ebook"><i class="icon icon-book"></i> {% trans "pobierz książkę" %}</button>
+                          <button class="l-button l-button--media l-button--dialog" id="ebook"><i class="icon icon-book"></i> {% trans "pobierz książkę" %}</button>
                         </div>
                         <div class="c-media__btn">
                           {% if first_text %}
@@ -194,10 +200,9 @@
                   {% endif %}
 
 
-                  <div class="c-media__popup" data-popup="ebook">
-                    <div class="c-media__popup__box">
+                    <dialog class="c-media__popup__box" data-popup="ebook" closedby="any" aria-labelledby="popup-dl-ebook-title">
                       <div class="c-media__popup__box__lead">
-                        <h2>{% trans "Pobieranie e-booka" %}</h2>
+                        <h2 id="popup-dl-ebook-title">{% trans "Pobieranie e-booka" %}</h2>
                         <p>{% trans "Wybierz wersję dla siebie" %}:</p>
                       </div>
                       <div class="c-media__popup__box__items">
@@ -261,13 +266,11 @@
                       <button class="c-media__popup__close">
                         <img src="{% static '2022/images/close.svg' %}" alt="{% trans 'Zamknij' %}">
                       </button>
-                    </div>
-                  </div>
+                  </dialog>
                   {% if book.has_audio %}
-                    <div class="c-media__popup" data-popup="audiobook">
-                      <div class="c-media__popup__box">
+                    <dialog class="c-media__popup__box" data-popup="audiobook" closedby="any" aria-labelledby="popup-dl-audio-title">
                         <div class="c-media__popup__box__lead">
-                          <h2>{% trans "Pobieranie audiobooka" %}</h2>
+                          <h2 id="popup-dl-audio-title">{% trans "Pobieranie audiobooka" %}</h2>
                           <p>{% trans "Wybierz wersję dla siebie" %}:</p>
                         </div>
                         <div class="c-media__popup__box__items">
@@ -319,8 +322,7 @@
                         <button class="c-media__popup__close">
                           <img src="{% static '2022/images/close.svg' %}" alt="{% trans 'Zamknij' %}">
                         </button>
-                      </div>
-                    </div>
+                    </dialog>
                   {% endif %}
                 </div>
               {% else %}

diff --git a/src/catalogue/templates/catalogue/book_text.html b/src/catalogue/templates/catalogue/book_text.html
index 45805c4..ad0089a 100644 (file)
--- a/src/catalogue/templates/catalogue/book_text.html
+++ b/src/catalogue/templates/catalogue/book_text.html
@@ -9,7 +9,10 @@
 {% load annoy %}
 
 
-{% block title %}{{ book.pretty_title }}{% endblock %}
+{% block settings %}
+{% load title %}
+{% title book.pretty_title %}
+{% endblock %}
 
 
 {% block extrahead %}

diff --git a/src/wolnelektury/static/2022/styles/components/_media.scss b/src/wolnelektury/static/2022/styles/components/_media.scss
index 6b15f80..714638e 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_media.scss
+++ b/src/wolnelektury/static/2022/styles/components/_media.scss
@@ -121,38 +121,19 @@
   }
 }
 
-.c-media__popup {
-  position: fixed;
-  z-index: 10;
-  top: 0;
-  left: 0;
-  height: 100%;
-  align-items: flex-start;
-  justify-content: center;
-  background-color: rgba($color-black, 0.35);
-  display: none;
-  overflow-y: scroll;
-  padding: 10vh 16px 10px 10px;
-  width: 100%;
-
-  @include rwd($break-flow) {
-      padding: 10vh 40px 40px 40px;
-  }
-  
-  &.is-open {
-    display: flex;
-  }
-}
-
 .c-media__popup__box {
-  background-color: #fff;
-  position: relative;
-  border-radius: 10px;
-  overflow: hidden;
+    padding: 0;
+    border: 0;
+    background: none;
+    border-radius: 10px;
 
-  @include rwd($break-flow) {
-      min-width: 640px;
-  }
+    @include rwd($break-flow) {
+        min-width: 640px;
+    }
+
+    &::backdrop {
+        background-color: rgba($color-black, 0.35);
+    }
 }
 
 .c-media__popup__box__lead {
@@ -183,6 +164,7 @@
 }
 
 .c-media__popup__box__items {
+    background: white;
     padding: 16px;
   @include rwd($break-flow) {
       padding: 40px;
@@ -266,6 +248,7 @@
 }
 
 .c-media__popup__close {
+    --focus-ring: #fff;
   position: absolute;
   padding: 0;
   border: 0;

diff --git a/src/wolnelektury/static/2022/styles/layout/_books.scss b/src/wolnelektury/static/2022/styles/layout/_books.scss
index e14adbf..74106ff 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_books.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_books.scss
@@ -28,7 +28,6 @@
   padding: 21px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
   transition: all $ease-dynamic 350ms;
-  outline: 0;
   margin: 5px;
 
   &.l-books__item--placeholder {
@@ -36,10 +35,6 @@
     visibility: hidden;
   }
 
-  & * {
-    outline: 0;
-  }
-
   &:hover {
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
   }
@@ -55,6 +50,7 @@
     line-height: 140%;
     letter-spacing: -0.01em;
     color: #FFFFFF;
+    --focus-ring: #fff;
 
     display: flex;
     flex-direction: column;
@@ -106,8 +102,11 @@
   font-size: 0;
   margin: 0 0 11px;
 
-  img {
-      width: 100%;
+  a {
+      display: block;
+      img {
+          width: 100%;
+      }
   }
 }
 
@@ -181,7 +180,6 @@
     border-radius: 52px;
     border: 1px solid #D9D9D9;
     width: 100%;
-    outline: 0;
     transition: border $ease-out 350ms;
 
     @input rwd($break-flow) {
@@ -229,7 +227,6 @@
       padding: 0;
       margin: 0 0 0 30px;
       background-color: transparent;
-      outline: 0;
       font-weight: $regular;
       @include font-size(18px);
       line-height: 150%;

diff --git a/src/wolnelektury/static/2022/styles/layout/_footer.scss b/src/wolnelektury/static/2022/styles/layout/_footer.scss
index fd4a53a..eddcf33 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_footer.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_footer.scss
@@ -1,4 +1,5 @@
 .l-footer {
+    --focus-ring: #fff;
   color: #FFFFFF;
   background: #083F4D;
   margin: 0 auto;

diff --git a/src/wolnelektury/static/2022/styles/layout/_navigation.scss b/src/wolnelektury/static/2022/styles/layout/_navigation.scss
index 9e3aafc..ece84d5 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_navigation.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_navigation.scss
@@ -29,24 +29,6 @@ body {
     align-items: center;
     justify-content: space-between;
   }
-
-  &.is-open {
-    position: fixed;
-    top: 0; left: 0;
-    width: 100%;
-    z-index: $master-layer;
-
-    .l-navigation__logo {
-        width: unset;
-        overflow: unset;
-    }
-
-    .l-navigation__menu {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-    }
-  }
 }
 
 .l-navigation__logo {
@@ -342,12 +324,8 @@ body:has(dialog[open]) {
       gap: 3%;
   }
 
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    //max-width: 212px;
-    width: 45%;
+  .l-navigation__menu__group {
+      width: 45%;
 
     @include rwd($break-menu) {
       width: 100%;
@@ -355,6 +333,19 @@ body:has(dialog[open]) {
       margin-bottom: 20px;
     }
 
+    h2 {
+        margin: 16px 0 0 0;
+        color: #92BD39;
+        font-weight: $semibold;
+        @include font-size(21px);
+        line-height: 140%;
+        letter-spacing: -0.01em;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
     li {
       font-weight: $regular;
       font-size: 16px;
@@ -366,14 +357,6 @@ body:has(dialog[open]) {
           line-height: 115%;
       }
 
-      strong {
-        color: #92BD39;
-        font-weight: $semibold;
-        @include font-size(21px);
-        line-height: 140%;
-        letter-spacing: -0.01em;
-      }
-
       a {
         color: $color-white;
         &:hover {
@@ -395,6 +378,7 @@ body:has(dialog[open]) {
         border: 0;
       }
     }
+    }
   }
 }
 

diff --git a/src/wolnelektury/static/2022/styles/layout/_quotes.scss b/src/wolnelektury/static/2022/styles/layout/_quotes.scss
index fe38f2a..e98c691 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_quotes.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_quotes.scss
@@ -19,7 +19,6 @@
 }
 
 .l-quotes__item {
-  outline: 0;
   background: #E1F1F2;
   border-radius: 10px;
   width: 558px;

diff --git a/src/wolnelektury/static/2022/styles/layout/_your-books.scss b/src/wolnelektury/static/2022/styles/layout/_your-books.scss
index 98570d4..bab0d0a 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_your-books.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_your-books.scss
@@ -30,7 +30,6 @@
   }
 
   button {
-    outline: 0;
     width: 40px;
     height: 40px;
     background: transparent;

diff --git a/src/wolnelektury/static/js/main.js b/src/wolnelektury/static/js/main.js
index b646bf4..5b7f897 100644 (file)
--- a/src/wolnelektury/static/js/main.js
+++ b/src/wolnelektury/static/js/main.js
@@ -34,34 +34,26 @@
 
 // Ebook/Audiobook Btns
 (function() {
-  let button = $('.c-media__btn button:not(.l-button--media--full)');
-  let popupLayer = $('.c-media__popup');
-  let closeButton = $('.c-media__popup__close');
+    let dialogs = $(".l-button--dialog");
+    dialogs.on('click', function () {
+        let target = $(this).attr('id');
+        $('[data-popup=' + target)[0].showModal();
+    });
+
+    $('.c-media__popup__close').on('click', function() {
+        $(this).closest('dialog')[0].close();
+    });
+})();
+
+
+// Player
+(function() {
   let playButton = $('.c-player__btn--md');
   let chaptersButton = $('.c-player__chapters span');
   let select = $('.c-select');
   let selectItem = $('.c-select li');
   let volumeButton = $('.icon-volume');
 
-  button.on('click', function () {
-    let target = $(this).attr('id');
-    $('[data-popup=' + target).addClass('is-open');
-    $('body').addClass('popup-open');
-  });
-
-  closeButton.on('click', function() {
-    $(this).closest('.c-media__popup').removeClass('is-open');
-    $('body').removeClass('popup-open');
-  });
-
-  popupLayer.on('click', function(e) {
-    let _this = $(this);
-    if($(e.target).is(popupLayer)) {
-      _this.removeClass('is-open');
-      $('body').removeClass('popup-open');
-    }
-  });
-
   chaptersButton.on('click', function() {
     $(this).parent().toggleClass('is-active');
   });
@@ -74,12 +66,6 @@
     selectItem.removeClass('is-active');
     $(this).addClass('is-active');
   });
-
-  $(document).keyup(function(e) {
-    if (e.keyCode === 27) {
-      $('.c-media__popup').removeClass('is-open');
-    }
-  });
 })();
 
 // Homepage books sliders
@@ -383,7 +369,7 @@
                     updateLiked($btn);
                 },
                 error: function() {
-                    window.location.href = $('#login-link').attr('href');
+                    window.location.href = $('.login-link').attr('href');
                 }
             })
         } else {
@@ -396,7 +382,7 @@
                     updateLiked($btn);
                 },
                 error: function() {
-                    window.location.href = $('#login-link').attr('href')
+                    window.location.href = $('.login-link').attr('href')
                 }
             });
         }

diff --git a/src/wolnelektury/templates/header.html b/src/wolnelektury/templates/header.html
index 7b257b3..9bb3b15 100644 (file)
--- a/src/wolnelektury/templates/header.html
+++ b/src/wolnelektury/templates/header.html
@@ -17,8 +17,8 @@
       <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">
@@ -66,27 +66,37 @@
           <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>
 
@@ -97,7 +107,7 @@
               </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" target="_blank">

diff --git a/src/wolnelektury/templates/user_actions.html b/src/wolnelektury/templates/user_actions.html
index 86d6eed..fb05a98 100644 (file)
--- a/src/wolnelektury/templates/user_actions.html
+++ b/src/wolnelektury/templates/user_actions.html
@@ -10,11 +10,11 @@
               aria-label="{% trans "Menu konta" %}">
     {% endif %}
     {% if request.user.is_staff %}
-      <img src="{% static '2022/images/icons/user-staff.svg' %}">
+      <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' %}">
+      <img src="{% static '2022/images/icons/user-vip.svg' %}" alt="Użytkownik">
     {% else %}
-      <img src="{% static '2022/images/icons/user.svg' %}">
+      <img src="{% static '2022/images/icons/user.svg' %}" alt="Użytkownik">
       {% endif %}
   {% if hide_menu %}
     </a>
@@ -45,7 +45,7 @@
   {% 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>