expand: a11y and remove jQuery #339 #452

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.
 

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.

layouts/partials/shortcodes/expand.html

@@ -8,19 +8,16 @@
 {{- end }}
 {{- $direction := T "Reading-direction" | default "ltr" }}
 {{- with $context }}
-<div class="expand
-    {{- if $expanded }} expand-expanded{{ end -}}
-">
-    {{- $c:=""}}{{/* things are getting complicated when search tries to open the expand box while jquery sets the display CSS on the element */}}
-    <a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
+{{- $id := partial "make-random-md5.hugo" }}
+<div class="expand">
+    <input type="checkbox" id="expand-{{ $id }}" aria-controls="expandcontent-{{ $id }}" {{ if $expanded }} checked{{ end }}>
+    <label class="expand-label" for="expand-{{ $id }}" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-{{ $direction }}"></i>
         <i class="fas fa-chevron-right expand-ltr direction-{{ $direction }}"></i>
         {{ $title }}
-    </a>
-    <div class="expand-content" style="display:
-        {{- if $expanded }} block{{ else }} none{{ end -}}
-    ;">
+    </label>
+    <div id="expandcontent-{{ $id }}" class="expand-content">
 {{ $content | safeHTML }}
     </div>
 </div>

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) */
 	}

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 */

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);

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' );