a11y: label for submenu expander #307

2024-11-22 23:37:53 +00:00 · 2022-10-06 01:09:58 +02:00 · 2022-10-06 01:09:58 +02:00 · b9249493c4
commit b9249493c4
parent da25f7d13f
27 changed files with 102 additions and 45 deletions
--- a/exampleSite/content/basics/configuration/_index.en.md
+++ b/exampleSite/content/basics/configuration/_index.en.md
@ -76,7 +76,7 @@ Note that some of these parameters are explained in details in other sections of
  themeVariant = "relearn-light"
  # Change the title separator. Default to "::".
  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
  # If a single page can contain content in multiple languages, add those here
  additionalContentLanguage = [ "en" ]
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@ -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

 - **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.
--- a/i18n/ar.toml
+++ b/i18n/ar.toml
@ -78,3 +78,6 @@ other = "اللغة"

 [Theme]
 other = "موضوع"
+
+[Submenu]
+other = "{{.}} القائمة الفرعية"
--- a/i18n/de.toml
+++ b/i18n/de.toml
@ -78,3 +78,6 @@ other = "Sprache"

 [Theme]
 other = "Theme"
+
+[Submenu]
+other = "Untermenu {{.}}"
--- a/i18n/en.toml
+++ b/i18n/en.toml
@ -78,3 +78,6 @@ other = "Language"

 [Theme]
 other = "Theme"
+
+[Submenu]
+other = "Submenu {{.}}"
--- a/i18n/es.toml
+++ b/i18n/es.toml
@ -78,3 +78,6 @@ other = "Idioma"

 [Theme]
 other = "Tema"
+
+[Submenu]
+other = "Submenú {{.}}"
--- a/i18n/fr.toml
+++ b/i18n/fr.toml
@ -78,3 +78,6 @@ other = "Langue"

 [Theme]
 other = "Thème"
+
+[Submenu]
+other = "Sous-menu {{.}}"
--- a/i18n/hi.toml
+++ b/i18n/hi.toml
@ -78,3 +78,6 @@ other = "भाषा"

 [Theme]
 other = "विषय"
+
+[Submenu]
+other = "सबमेनू {{.}}"
--- a/i18n/id.toml
+++ b/i18n/id.toml
@ -78,3 +78,6 @@ other = "Bahasa"

 [Theme]
 other = "Tema"
+
+[Submenu]
+other = "Submenu {{.}}"
--- a/i18n/it.toml
+++ b/i18n/it.toml
@ -78,3 +78,6 @@ other = "Lingua"

 [Theme]
 other = "Tema"
+
+[Submenu]
+other = "Sottomenu {{.}}"
--- a/i18n/ja.toml
+++ b/i18n/ja.toml
@ -78,3 +78,6 @@ other = "言語"

 [Theme]
 other = "テーマ"
+
+[Submenu]
+other = "サブメニュー {{.}}"
--- a/i18n/kr.toml
+++ b/i18n/kr.toml
@ -81,3 +81,6 @@ other = "언어"

 [Theme]
 other = "주제"
+
+[Submenu]
+other = "하위 메뉴 {{.}}"
--- a/i18n/nl.toml
+++ b/i18n/nl.toml
@ -78,3 +78,6 @@ other = "Taal"

 [Theme]
 other = "Thema"
+
+[Submenu]
+other = "Submenu {{.}}"
--- a/i18n/pir.toml
+++ b/i18n/pir.toml
@ -78,3 +78,6 @@ other = "Language"

 [Theme]
 other = "Theme"
+
+[Submenu]
+other = "Submenu {{.}}"
--- a/i18n/pl.toml
+++ b/i18n/pl.toml
@ -78,3 +78,6 @@ other = "Język"

 [Theme]
 other = "Kompozycja"
+
+[Submenu]
+other = "Podmenu {{.}}"
--- a/i18n/pt.toml
+++ b/i18n/pt.toml
@ -78,3 +78,6 @@ other = "Idioma"

 [Theme]
 other = "Tema"
+
+[Submenu]
+other = "Submenu {{.}}"
--- a/i18n/ru.toml
+++ b/i18n/ru.toml
@ -78,3 +78,6 @@ other = "Язык"

 [Theme]
 other = "Тема"
+
+[Submenu]
+other = "Подменю {{.}}"
--- a/i18n/tr.toml
+++ b/i18n/tr.toml
@ -77,4 +77,7 @@ other = "{{.}}. Bölüm"
 other = "Dil"

 [Theme]
-other = "Tема"
+other = "Tema"
+
+[Submenu]
+other = "Alt menü {{.}}"
--- a/i18n/vi.toml
+++ b/i18n/vi.toml
@ -81,3 +81,6 @@ other = "Ngôn ngữ"

 [Theme]
 other = "Đề tài"
+
+[Submenu]
+other = "Menu con {{.}}"
--- a/i18n/zh-cn.toml
+++ b/i18n/zh-cn.toml
@ -78,3 +78,6 @@ other = "语言"

 [Theme]
 other = "主题"
+
+[Submenu]
+other = "子菜单{{.}}"
--- a/i18n/zh-tw.toml
+++ b/i18n/zh-tw.toml
@ -78,3 +78,6 @@ other = "語言"

 [Theme]
 other = "主題"
+
+[Submenu]
+other = "子功能表{{.}}"
--- a/i18n/zh.toml
+++ b/i18n/zh.toml
@ -78,3 +78,6 @@ other = "语言"

 [Theme]
 other = "主题"
+
+[Submenu]
+other = "子菜单{{.}}"
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@ -146,9 +146,9 @@
            {{- $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }}
            {{- $pageHash := md5 .Page }}
            {{- $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" . }}
-              {{- 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 }}
              {{- if eq $currentOrdersectionsby "title" }}
                {{- range $pages.ByTitle }}
--- a/static/css/ie.css
+++ b/static/css/ie.css
@ -37,14 +37,15 @@
 		background-color: #323232; /* var(--MENU-SEARCH-BG-color) */
 	}

-	#sidebar .collapsible-menu label:after,
+	#sidebar .collapsible-menu .toggle,
 	#sidebar .select-container,
 	#sidebar a {
 		color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
 	}

 	#sidebar select:hover,
-	#sidebar .collapsible-menu label:hover:after,
+	#sidebar .collapsible-menu .toggle:hover,
+	#sidebar .collapsible-menu .toggle:focus,
 	#sidebar .select-container:hover,
 	#sidebar a:hover {
 		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) */
 	}

-	#sidebar ul.topics li.active > label:after,
+	#sidebar ul.collapsible-menu li.active > .toggle,
 	#sidebar ul.topics li.active > a {
 		background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */
 		color: #444444; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */
--- a/static/css/theme-neon.css
+++ b/static/css/theme-neon.css
@ -150,7 +150,7 @@ body h6 {
        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 {
    color: #fff;
    text-shadow:
@ -162,7 +162,8 @@ body #sidebar ul.topics li.active > a {
 }

 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 a:hover {
    color: #fff;
--- a/static/css/theme.css
+++ b/static/css/theme.css
@ -163,12 +163,7 @@ th {
    display: block;
 }

-#sidebar ul.topics input.toggle,
-#sidebar ul.topics label {
-    display: none;
-}
-
-#sidebar ul.topics > li > label,
+#sidebar ul.collapsible-menu > li > .toggle,
 #sidebar ul.topics > li > a {
    font-size: 1.1rem;
    line-height: 2rem;
@ -1356,44 +1351,38 @@ input[type="search"]::-webkit-search-results-button,
 input[type="search"]::-webkit-search-results-decoration { display: none; }

 #sidebar ul.collapsible-menu input.toggle {
-	cursor: pointer;
-    display: block;
-	left: -1rem;
-	opacity: 0;
-    overflow: hidden;
-	position: absolute;
-	top: 0;
-}
-
-#sidebar ul.collapsible-menu label {
+    -webkit-appearance: none;
+    appearance: none;
    cursor: pointer;
-    display: inline;
-    height: 1rem;
-    left: 0;
-    margin-top: .2em;
-	position: absolute;
-    width: 1rem;
+    height: 2rem;
+    left: 1rem;
+    padding-top: .35rem;
+    position: absolute;
+    width: 1px;
 }

-#sidebar .collapsible-menu input.toggle + label:after {
+#sidebar ul.collapsible-menu > li > input.toggle {
+    padding-top: .25rem;
+}
+
+#sidebar .collapsible-menu input.toggle:before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-size: .8rem;
    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";
-    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;
 }

-#sidebar .collapsible-menu input.toggle:checked + label + a + ul {
+#sidebar .collapsible-menu input.toggle:checked + label.toggle + a + ul {
 	display: inline;
 }

@ -1420,15 +1409,14 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }

 .a11y-only {
    /* idea taken from https://www.filamentgroup.com/lab/a11y-form-labels.html */
+    clip: rect(1px,1px,1px,1px);
+    overflow: hidden;
    position: absolute;
    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px 1px 1px 1px);
-    clip: rect(1px,1px,1px,1px);
    transform: translateY(-100%);
    transition: transform .5s cubic-bezier(.18,.89,.32,1.28);
    white-space: nowrap;
+    width: 1px;
 }

 /* filament style for making action visible on focus - not adepted yet
--- a/static/css/variant.css
+++ b/static/css/variant.css
@ -135,14 +135,15 @@ a:hover,
    background-color: var(--INTERNAL-MENU-SEARCH-BG-color);
 }

-#sidebar .collapsible-menu label:after,
+#sidebar .collapsible-menu .toggle,
 #sidebar .select-container,
 #sidebar a {
    color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
 }

 #sidebar select:hover,
-#sidebar .collapsible-menu label:hover:after,
+#sidebar .collapsible-menu .toggle:hover,
+#sidebar .collapsible-menu .toggle:focus,
 #sidebar .select-container:hover,
 #sidebar a:hover {
    color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
@ -153,7 +154,7 @@ a:hover,
    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 {
    background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
    color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);