a11y: label for submenu expander #307

This commit is contained in:
Sören Weber 2022-10-06 01:09:58 +02:00
parent da25f7d13f
commit b9249493c4
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
27 changed files with 102 additions and 45 deletions

View file

@ -76,7 +76,7 @@ Note that some of these parameters are explained in details in other sections of
themeVariant = "relearn-light" themeVariant = "relearn-light"
# Change the title separator. Default to "::". # Change the title separator. Default to "::".
titleSeparator = "-" titleSeparator = "-"
# If set to true, the menu in the sidebar will be displayed in a collapsible tree view. # If set to true, the menu in the sidebar will be displayed in a collapsible tree view. Although the functionality works with old browsers (IE11), the display of the expander icons is limited to modern browsers
collapsibleMenu = false collapsibleMenu = false
# If a single page can contain content in multiple languages, add those here # If a single page can contain content in multiple languages, add those here
additionalContentLanguage = [ "en" ] additionalContentLanguage = [ "en" ]

View file

@ -14,6 +14,12 @@ This document shows you what's new in the latest release. For a detailed list of
--- ---
## 5.3.0
- **Change**: 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.
---
## 5.2.0 ## 5.2.0
- **Change**: If you've set `collapsibleMenu = true` in your `config.toml`, the menu will be expanded if a search term is found in a collapsed submenu. The menu will return to its initial collapse state once the search term does not match any submenus. - **Change**: If you've set `collapsibleMenu = true` in your `config.toml`, the menu will be expanded if a search term is found in a collapsed submenu. The menu will return to its initial collapse state once the search term does not match any submenus.

View file

@ -78,3 +78,6 @@ other = "اللغة"
[Theme] [Theme]
other = "موضوع" other = "موضوع"
[Submenu]
other = "{{.}} القائمة الفرعية"

View file

@ -78,3 +78,6 @@ other = "Sprache"
[Theme] [Theme]
other = "Theme" other = "Theme"
[Submenu]
other = "Untermenu {{.}}"

View file

@ -78,3 +78,6 @@ other = "Language"
[Theme] [Theme]
other = "Theme" other = "Theme"
[Submenu]
other = "Submenu {{.}}"

View file

@ -78,3 +78,6 @@ other = "Idioma"
[Theme] [Theme]
other = "Tema" other = "Tema"
[Submenu]
other = "Submenú {{.}}"

View file

@ -78,3 +78,6 @@ other = "Langue"
[Theme] [Theme]
other = "Thème" other = "Thème"
[Submenu]
other = "Sous-menu {{.}}"

View file

@ -78,3 +78,6 @@ other = "भाषा"
[Theme] [Theme]
other = "विषय" other = "विषय"
[Submenu]
other = "सबमेनू {{.}}"

View file

@ -78,3 +78,6 @@ other = "Bahasa"
[Theme] [Theme]
other = "Tema" other = "Tema"
[Submenu]
other = "Submenu {{.}}"

View file

@ -78,3 +78,6 @@ other = "Lingua"
[Theme] [Theme]
other = "Tema" other = "Tema"
[Submenu]
other = "Sottomenu {{.}}"

View file

@ -78,3 +78,6 @@ other = "言語"
[Theme] [Theme]
other = "テーマ" other = "テーマ"
[Submenu]
other = "サブメニュー {{.}}"

View file

@ -81,3 +81,6 @@ other = "언어"
[Theme] [Theme]
other = "주제" other = "주제"
[Submenu]
other = "하위 메뉴 {{.}}"

View file

@ -78,3 +78,6 @@ other = "Taal"
[Theme] [Theme]
other = "Thema" other = "Thema"
[Submenu]
other = "Submenu {{.}}"

View file

@ -78,3 +78,6 @@ other = "Language"
[Theme] [Theme]
other = "Theme" other = "Theme"
[Submenu]
other = "Submenu {{.}}"

View file

@ -78,3 +78,6 @@ other = "Język"
[Theme] [Theme]
other = "Kompozycja" other = "Kompozycja"
[Submenu]
other = "Podmenu {{.}}"

View file

@ -78,3 +78,6 @@ other = "Idioma"
[Theme] [Theme]
other = "Tema" other = "Tema"
[Submenu]
other = "Submenu {{.}}"

View file

@ -78,3 +78,6 @@ other = "Язык"
[Theme] [Theme]
other = "Тема" other = "Тема"
[Submenu]
other = "Подменю {{.}}"

View file

@ -77,4 +77,7 @@ other = "{{.}}. Bölüm"
other = "Dil" other = "Dil"
[Theme] [Theme]
other = "Tема" other = "Tema"
[Submenu]
other = "Alt menü {{.}}"

View file

@ -81,3 +81,6 @@ other = "Ngôn ngữ"
[Theme] [Theme]
other = "Đề tài" other = "Đề tài"
[Submenu]
other = "Menu con {{.}}"

View file

@ -78,3 +78,6 @@ other = "语言"
[Theme] [Theme]
other = "主题" other = "主题"
[Submenu]
other = "子菜单{{.}}"

View file

@ -78,3 +78,6 @@ other = "語言"
[Theme] [Theme]
other = "主題" other = "主題"
[Submenu]
other = "子功能表{{.}}"

View file

@ -78,3 +78,6 @@ other = "语言"
[Theme] [Theme]
other = "主题" other = "主题"
[Submenu]
other = "子菜单{{.}}"

View file

@ -146,9 +146,9 @@
{{- $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }} {{- $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }}
{{- $pageHash := md5 .Page }} {{- $pageHash := md5 .Page }}
{{- $isOpen := or $currentAlwaysopen $isSelf $isAncestor }} {{- $isOpen := or $currentAlwaysopen $isSelf $isAncestor }}
<li data-nav-id="{{.RelPermalink}}" class="dd-item{{if $isActive }} active{{end}}{{if (or $isSelf $isAncestor) }} parent{{end}}{{if $currentAlwaysopen}} alwaysopen{{end}}"><input type="checkbox" id="section-{{ $pageHash }}" class="toggle"{{ if $isOpen }} checked{{ end }}><label for="section-{{ $pageHash }}" ></label><a href="{{.RelPermalink}}"> <li data-nav-id="{{.RelPermalink}}" class="dd-item{{if $isActive }} active{{end}}{{if (or $isSelf $isAncestor) }} parent{{end}}{{if $currentAlwaysopen}} alwaysopen{{end}}">{{ if .Site.Params.collapsibleMenu }}<input type="checkbox" id="section-{{ $pageHash }}" aria-controls="subsections-{{ $pageHash }}" class="toggle"{{ if $isOpen }} checked{{ end }}><label class="a11y-only toggle" for="section-{{ $pageHash }}" >{{ T "Submenu" ( or .Params.menuTitle .LinkTitle .Title ) }}</label>{{ end }}<a href="{{.RelPermalink}}">
{{- partial "menu-pre.html" . }}{{ or .Params.menuTitle .LinkTitle .Title }}{{ partial "menu-post.html" . }} {{- partial "menu-pre.html" . }}{{ or .Params.menuTitle .LinkTitle .Title }}{{ partial "menu-post.html" . }}
{{- if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a><ul> {{- if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a><ul id="subsections-{{ $pageHash }}">
{{- $defaultAlwaysopen := .Site.Params.alwaysopen | default true }} {{- $defaultAlwaysopen := .Site.Params.alwaysopen | default true }}
{{- if eq $currentOrdersectionsby "title" }} {{- if eq $currentOrdersectionsby "title" }}
{{- range $pages.ByTitle }} {{- range $pages.ByTitle }}

View file

@ -37,14 +37,15 @@
background-color: #323232; /* var(--MENU-SEARCH-BG-color) */ background-color: #323232; /* var(--MENU-SEARCH-BG-color) */
} }
#sidebar .collapsible-menu label:after, #sidebar .collapsible-menu .toggle,
#sidebar .select-container, #sidebar .select-container,
#sidebar a { #sidebar a {
color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */ color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
} }
#sidebar select:hover, #sidebar select:hover,
#sidebar .collapsible-menu label:hover:after, #sidebar .collapsible-menu .toggle:hover,
#sidebar .collapsible-menu .toggle:focus,
#sidebar .select-container:hover, #sidebar .select-container:hover,
#sidebar a:hover { #sidebar a:hover {
color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */ color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
@ -55,7 +56,7 @@
background-color: rgba( 0, 0, 0, .166 ); /* var(--MENU-SECTIONS-ACTIVE-BG-color) */ background-color: rgba( 0, 0, 0, .166 ); /* var(--MENU-SECTIONS-ACTIVE-BG-color) */
} }
#sidebar ul.topics li.active > label:after, #sidebar ul.collapsible-menu li.active > .toggle,
#sidebar ul.topics li.active > a { #sidebar ul.topics li.active > a {
background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */ background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */
color: #444444; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */ color: #444444; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */

View file

@ -150,7 +150,7 @@ body h6 {
0 0 10px var(--INTERNAL-MAIN-TITLES-H5-color); 0 0 10px var(--INTERNAL-MAIN-TITLES-H5-color);
} }
body #sidebar ul.topics li.active > label:after, body #sidebar ul.collapsible-menu li.active > .toggle,
body #sidebar ul.topics li.active > a { body #sidebar ul.topics li.active > a {
color: #fff; color: #fff;
text-shadow: text-shadow:
@ -162,7 +162,8 @@ body #sidebar ul.topics li.active > a {
} }
body #sidebar select:hover, body #sidebar select:hover,
body #sidebar label:hover, body #sidebar .collapsible-menu .toggle:hover,
body #sidebar .collapsible-menu .toggle:focus,
body #sidebar .select-container:hover, body #sidebar .select-container:hover,
body #sidebar a:hover { body #sidebar a:hover {
color: #fff; color: #fff;

View file

@ -163,12 +163,7 @@ th {
display: block; display: block;
} }
#sidebar ul.topics input.toggle, #sidebar ul.collapsible-menu > li > .toggle,
#sidebar ul.topics label {
display: none;
}
#sidebar ul.topics > li > label,
#sidebar ul.topics > li > a { #sidebar ul.topics > li > a {
font-size: 1.1rem; font-size: 1.1rem;
line-height: 2rem; line-height: 2rem;
@ -1356,44 +1351,38 @@ input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; } input[type="search"]::-webkit-search-results-decoration { display: none; }
#sidebar ul.collapsible-menu input.toggle { #sidebar ul.collapsible-menu input.toggle {
-webkit-appearance: none;
appearance: none;
cursor: pointer; cursor: pointer;
display: block; height: 2rem;
left: -1rem; left: 1rem;
opacity: 0; padding-top: .35rem;
overflow: hidden;
position: absolute; position: absolute;
top: 0; width: 1px;
} }
#sidebar ul.collapsible-menu label { #sidebar ul.collapsible-menu > li > input.toggle {
cursor: pointer; padding-top: .25rem;
display: inline;
height: 1rem;
left: 0;
margin-top: .2em;
position: absolute;
width: 1rem;
} }
#sidebar .collapsible-menu input.toggle + label:after { #sidebar .collapsible-menu input.toggle:before {
content: "\f054"; content: "\f054";
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-size: .8rem; font-size: .8rem;
font-weight: 900; font-weight: 900;
padding: .5rem .1rem;
margin-left: -1rem;
} }
#sidebar .collapsible-menu input.toggle:checked + label:after { #sidebar .collapsible-menu input.toggle:checked:before {
content: "\f078"; content: "\f078";
font-family: "Font Awesome 5 Free";
font-size: .8rem;
font-weight: 900;
} }
#sidebar .collapsible-menu input.toggle + label + a + ul { #sidebar .collapsible-menu input.toggle + label.toggle + a + ul {
display: none; display: none;
} }
#sidebar .collapsible-menu input.toggle:checked + label + a + ul { #sidebar .collapsible-menu input.toggle:checked + label.toggle + a + ul {
display: inline; display: inline;
} }
@ -1420,15 +1409,14 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
.a11y-only { .a11y-only {
/* idea taken from https://www.filamentgroup.com/lab/a11y-form-labels.html */ /* idea taken from https://www.filamentgroup.com/lab/a11y-form-labels.html */
clip: rect(1px,1px,1px,1px);
overflow: hidden;
position: absolute; position: absolute;
height: 1px; height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
transform: translateY(-100%); transform: translateY(-100%);
transition: transform .5s cubic-bezier(.18,.89,.32,1.28); transition: transform .5s cubic-bezier(.18,.89,.32,1.28);
white-space: nowrap; white-space: nowrap;
width: 1px;
} }
/* filament style for making action visible on focus - not adepted yet /* filament style for making action visible on focus - not adepted yet

View file

@ -135,14 +135,15 @@ a:hover,
background-color: var(--INTERNAL-MENU-SEARCH-BG-color); background-color: var(--INTERNAL-MENU-SEARCH-BG-color);
} }
#sidebar .collapsible-menu label:after, #sidebar .collapsible-menu .toggle,
#sidebar .select-container, #sidebar .select-container,
#sidebar a { #sidebar a {
color: var(--INTERNAL-MENU-SECTIONS-LINK-color); color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
} }
#sidebar select:hover, #sidebar select:hover,
#sidebar .collapsible-menu label:hover:after, #sidebar .collapsible-menu .toggle:hover,
#sidebar .collapsible-menu .toggle:focus,
#sidebar .select-container:hover, #sidebar .select-container:hover,
#sidebar a:hover { #sidebar a:hover {
color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color); color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
@ -153,7 +154,7 @@ a:hover,
background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color); background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
} }
#sidebar ul.topics li.active > label:after, #sidebar ul.collapsible-menu li.active > .toggle,
#sidebar ul.topics li.active > a { #sidebar ul.topics li.active > a {
background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color); background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color); color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);