From 00faf15af5764b20a77923a35b5323491cb7921d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Fri, 3 Feb 2023 08:57:55 +0100 Subject: [PATCH] expand: a11y and remove jQuery #339 #452 --- .../content/basics/migration/_index.en.md | 10 ++- exampleSite/content/shortcodes/expand.en.md | 4 + layouts/partials/shortcodes/expand.html | 15 ++-- static/css/ie.css | 27 +++++-- static/css/theme.css | 78 ++++++++++++------- static/css/variant.css | 12 +++ static/js/theme.js | 17 +++- 7 files changed, 111 insertions(+), 52 deletions(-) diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index e91a2e9da4..528ab3318e 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -20,14 +20,16 @@ This document shows you what's new in the latest release. For a detailed list of ## 5.11.0 (not yet released) -- {{% badge style="note" title=" " %}}Change{{% /badge %}} The JavaScript code for handling image lightboxes (was [Featherlight](https://noelboss.github.io/featherlight)) was replaced by a CSS-only solution. +- {{% badge style="note" title=" " %}}Change{{% /badge %}} In the effort to comply with WCAG standards, the implementation of the [`expand` shortcode]({{% relref "shortcodes/expand" %}}) was changed. The functionality of the new implementation does not work with old browsers (Internet Explorer 11). + +- {{% badge style="note" title=" " %}}Change{{% /badge %}} The JavaScript code for handling image lightboxes (provided by [Featherlight](https://noelboss.github.io/featherlight)) was replaced by a CSS-only solution. This also changed the [lightbox effects]({{% relref "cont/markdown#lightbox" %}}) parameter from `featherlight=false` to `lightbox=false`. Nevertheless you don't need to change anything as the old name will be used as a fallback. -- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} [GitHub releases](https://github.com/McShelby/hugo-theme-relearn/tags) are also now tagged for the main version (eg. `1.2.x`) and major version (eg. `1.x`) making it easier for you to pin the theme to a certain version. - - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Translation for Czech. This language is not supported for search. +- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} [GitHub releases](https://github.com/McShelby/hugo-theme-relearn/tags) are also now tagged for the main version (eg. `1.2.x`) and major version (eg. `1.x`) making it easier for you to pin the theme to a certain version. + --- ## 5.10.0 (2023-01-25) @@ -132,7 +134,7 @@ This document shows you what's new in the latest release. For a detailed list of ## 5.3.0 (2022-10-07) -- {{% badge style="note" title=" " %}}Change{{% /badge %}} In the effort to comply with WCAG standards, the implementation of the collapsible menu was changed. Although the functionality of the new implementation works with old browsers (Internet Explorer 11), the display of the expander icons does not and is limited to modern browsers. +- {{% badge style="note" title=" " %}}Change{{% /badge %}} In the effort to comply with WCAG standards, the implementation of the collapsible menu was changed. The functionality of the new implementation does not work with old browsers (Internet Explorer 11). - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} [Image formatting]({{% relref "cont/markdown#add-css-classes" %}}) has two new classes to align images to the `left` or `right`. Additionally, the already existing `inline` option is now documented. diff --git a/exampleSite/content/shortcodes/expand.en.md b/exampleSite/content/shortcodes/expand.en.md index e8460dd700..542a91f330 100644 --- a/exampleSite/content/shortcodes/expand.en.md +++ b/exampleSite/content/shortcodes/expand.en.md @@ -7,6 +7,10 @@ The `expand` shortcode displays an expandable/collapsible section of text. {{% expand title="Expand me..." %}}Thank you!{{% /expand %}} +{{% notice note %}} +This only works in modern browsers. +{{% /notice %}} + ## Usage While the examples are using shortcodes with named parameter you are free to use positional as well or also call this shortcode from your own partials. diff --git a/layouts/partials/shortcodes/expand.html b/layouts/partials/shortcodes/expand.html index 8bec118157..8cb46d2c10 100644 --- a/layouts/partials/shortcodes/expand.html +++ b/layouts/partials/shortcodes/expand.html @@ -8,19 +8,16 @@ {{- end }} {{- $direction := T "Reading-direction" | default "ltr" }} {{- with $context }} -
- {{- $c:=""}}{{/* things are getting complicated when search tries to open the expand box while jquery sets the display CSS on the element */}} - +{{- $id := partial "make-random-md5.hugo" }} +
+ + -
+ +
{{ $content | safeHTML }}
diff --git a/static/css/ie.css b/static/css/ie.css index e527051a97..b8df6663df 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -29,14 +29,17 @@ div.attachments .box-content { padding-left: 1.75rem; } - .expand > .expand-label > .expand-rtl.direction-rtl { - display: none; + .expand > label { + left: 0; } - .expand > .expand-label > .expand-ltr.direction-rtl { - display: inline-block; + .expand > input + label > .fa-chevron-left { + display: none !important; } - .expand.expand-expanded > .expand-label > .fa-chevron-right { - display: none; + .expand > input + label > .fa-chevron-right { + display: inline-block !important; + } + .expand > input:checked + label > .fa-chevron-right { + display: none !important; } #body .tab-nav-button { margin-left: 4px; @@ -184,6 +187,18 @@ font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-TITLES-TEXT-font) */ } + .expand > label { + color: #486ac9; /* var(--MAIN-LINK-color) */ + } + + .expand > label:hover { + color: #202891; /* var(--MAIN-LINK-HOVER-color) */ + } + + .expand > label:after { + color: #202891; /* var(--MAIN-LINK-HOVER-color) */ + } + div.box { background-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-NEUTRAL-color) */ } diff --git a/static/css/theme.css b/static/css/theme.css index ada1b073f3..b81d90a2d1 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -1028,53 +1028,73 @@ option { color: initial; } -.expand{ +.expand { margin-bottom: 1rem; margin-top: 1rem; + position: relative; } -.expand-label { +.expand > input { + -webkit-appearance: none; + appearance: none; cursor: pointer; } -.expand-label > .fas { +.expand > label { + cursor: pointer; + display: inline; + font-weight: 300; + inset-inline-start: 0; + line-height: 1.1; + margin-top: .2rem; + position: absolute; +} + +.expand > label:after { + background-color: var(--INTERNAL-MAIN-LINK-HOVER-color); + content: ""; + display: block; + height: 1px; + width: 0%; + transition: width 0.5s ease; +} + +.expand > label:hover:after { + width: 100%; +} + +.expand > label > .fas { font-size: .8rem; width: .6rem; } -.expand-content { +.expand > .expand-content { margin-top: .5rem; } - -/* expander collapsed, default */ -.expand > .expand-label > .fa-chevron-down { - display: none; -} -.expand > .expand-label > .fa-chevron-left, -.expand > .expand-label > .fa-chevron-right { - display: inline-block; -} - -/* expander expanded, controlled by expand.html */ -.expand.expand-expanded > .expand-label > .fa-chevron-down { - display: inline-block; -} -.expand.expand-expanded > .expand-label > .fa-chevron-left, -.expand.expand-expanded > .expand-label > .fa-chevron-right { +/* closed expander */ +.expand > input + label + div { display: none; } -/* expander expand collapsed marked, must override logic of expand.html, controlled by theme.js */ -.expand:not(.expand-expanded).expand-marked > .expand-label > .fa-chevron-down { - display: inline-block; -} -.expand:not(.expand-expanded).expand-marked > .expand-label > .fa-chevron-left, -.expand:not(.expand-expanded).expand-marked > .expand-label > .fa-chevron-right { +.expand > input + label > .fa-chevron-down { display: none; } -.expand:not(.expand-expanded).expand-marked > .expand-content { - /* this will disable jquery's animation */ - display: block !important; +.expand > input + label > .fa-chevron-left, +.expand > input + label > .fa-chevron-right { + display: inline-block; +} + +/* open expander */ +.expand > input:checked + label + div { + display: block; +} + +.expand > input:checked + label > .fa-chevron-down { + display: inline-block; +} +.expand > input:checked + label > .fa-chevron-left, +.expand > input:checked + label > .fa-chevron-right { + display: none; } /* turn off unsuitable expander for this reading direction */ diff --git a/static/css/variant.css b/static/css/variant.css index e80559c613..88246db7f0 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -368,6 +368,18 @@ pre .copy-to-clipboard-button:hover { color: var(--INTERNAL-CODE-BLOCK-BG-color); } +.expand > label { + color: var(--INTERNAL-MAIN-LINK-color); +} + +.expand > label:hover { + color: var(--INTERNAL-MAIN-LINK-HOVER-color); +} + +.expand > label:after { + background-color: var(--INTERNAL-MAIN-LINK-HOVER-color); +} + #homelinks { background-color: var(--INTERNAL-MENU-HEADER-BORDER-color); border-color: var(--INTERNAL-MENU-HEADER-BORDER-color); diff --git a/static/js/theme.js b/static/js/theme.js index f8e4231971..a5e62ce45d 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -793,7 +793,12 @@ function mark() { var parent = markedElements[i].parentNode; while( parent && parent.classList ){ if( parent.classList.contains( 'expand' ) ){ - parent.classList.add( 'expand-marked' ); + var expandInputs = parent.querySelectorAll( 'input:not(.expand-marked)' ); + if( expandInputs.length ){ + expandInputs[0].classList.add( 'expand-marked' ); + expandInputs[0].dataset.checked = expandInputs[0].checked ? 'true' : 'false'; + expandInputs[0].checked = true; + } } if( parent.tagName.toLowerCase() === 'li' ){ var toggleInputs = parent.querySelectorAll( 'input.toggle:not(.menu-marked)' ); @@ -880,8 +885,13 @@ function unmark() { toggleInputs[0].classList.remove( 'menu-marked' ); } } - if( parent.classList.contains( 'expand-marked' ) ){ - parent.classList.remove( 'expand-marked' ); + if( parent.classList.contains( 'expand' ) ){ + var expandInputs = parent.querySelectorAll( 'input.expand-marked' ); + if( expandInputs.length ){ + expandInputs[0].checked = expandInputs[0].dataset.checked === 'true'; + expandInputs[0].dataset.checked = null; + expandInputs[0].classList.remove( 'expand-marked' ); + } } parent = parent.parentNode; } @@ -909,7 +919,6 @@ function unhighlight( es, options ){ } }; - // replace jQuery.createPseudo with https://stackoverflow.com/a/66318392 function elementContains( txt, e ){ var regex = RegExp( txt, 'i' );