From 64ad71354afe2d40af8d33a27778c7ec6ba632af Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Wed, 21 Oct 2026 16:16:06 +0200 Subject: [PATCH] More a11y: dialogs on book page --- .../templates/catalogue/book_detail.html | 26 +++++----- .../templates/catalogue/book_text.html | 5 +- .../static/2022/styles/components/_media.scss | 43 +++++------------ .../static/2022/styles/layout/_books.scss | 15 +++--- .../static/2022/styles/layout/_footer.scss | 1 + .../2022/styles/layout/_navigation.scss | 48 +++++++------------ .../static/2022/styles/layout/_quotes.scss | 1 - .../2022/styles/layout/_your-books.scss | 1 - src/wolnelektury/static/js/main.js | 46 +++++++----------- src/wolnelektury/templates/header.html | 36 +++++++++----- src/wolnelektury/templates/user_actions.html | 8 ++-- 11 files changed, 97 insertions(+), 133 deletions(-) diff --git a/src/catalogue/templates/catalogue/book_detail.html b/src/catalogue/templates/catalogue/book_detail.html index 4852c9a32..f87041a80 100644 --- 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 %}
{% annoy_banner 'book-page' %} @@ -168,11 +174,11 @@
{% if book.has_audio %} - + {% endif %}
- +
{% if first_text %} @@ -194,10 +200,9 @@ {% endif %} -
-
+
-

{% trans "Pobieranie e-booka" %}

+

{% trans "Wybierz wersję dla siebie" %}:

@@ -261,13 +266,11 @@ -
-
+ {% if book.has_audio %} -
-
+
-

{% trans "Pobieranie audiobooka" %}

+

{% trans "Wybierz wersję dla siebie" %}:

@@ -319,8 +322,7 @@ -
-
+ {% endif %}
{% else %} diff --git a/src/catalogue/templates/catalogue/book_text.html b/src/catalogue/templates/catalogue/book_text.html index 45805c4b9..ad0089a40 100644 --- 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 6b15f8044..714638e25 100644 --- 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 e14adbfac..74106ffec 100644 --- 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 fd4a53ad9..eddcf33f1 100644 --- 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 9e3aafc54..ece84d5b2 100644 --- 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 fe38f2ac7..e98c6915d 100644 --- 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 98570d4c3..bab0d0a6b 100644 --- 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 b646bf450..5b7f897d7 100644 --- 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 7b257b354..9bb3b1521 100644 --- a/src/wolnelektury/templates/header.html +++ b/src/wolnelektury/templates/header.html @@ -17,8 +17,8 @@ WolneLektury.pl
-
- + +
@@ -66,27 +66,37 @@
{% cache 30 menu LANGUAGE_CODE %} -
    -
  • {% trans "Katalog" %}
    • +
    + +
      {% menu 'Katalog' %}
    -
      -
    • {% trans "Włącz się" %}
      • +
    +
    + +
      {% menu 'Włącz się' %}
    -
      -
    • {% trans "Aktualności" %}
      • +
    +
    + +
      {% latest_blog_posts %} {% menu 'Aktualności' %}
    -
      -
    • {% trans "Narzędzia" %}
      • +
    +
    + +
      {% menu 'Narzędzia' %}
    -
      -
    • {% trans "O nas" %}
      • +
    +
    + +
      {% menu 'O nas' %}
    +
    {% endcache %}
@@ -97,7 +107,7 @@