notice: improve accessibility of notice title #897

switch to details/summary elements which hopefully has better a11y
and will simplify state handling as it is build into the browser

assets/css/format-print.css

@@ -161,7 +161,7 @@ mark.search {
 .mermaid.zoom:hover {
   border-color: transparent;
 }
-div.box > .box-content {
+.box > .box-content {
   background-color: rgba(255, 255, 255, 1);
 }
 

assets/css/theme-neon.css

@@ -214,14 +214,14 @@ body .anchor {
 
 body .badge,
 body .btn,
-body div.box:not(.cstyle.transparent) {
+body .box:not(.cstyle.transparent) {
   box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 2px rgba(255, 255, 255, 1), 0 0 4px rgba(128, 128, 128, 1), 0 0 4px var(--VARIABLE-BOX-color);
 }
 
 body .badge > .badge-content,
 body .btn,
 body .btn > *,
-body div.box:not(.cstyle.transparent) > .box-label {
+body .box:not(.cstyle.transparent) > .box-label {
   text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 2px rgba(255, 255, 255, 1), 0 0 4px rgba(128, 128, 128, 1), 0 0 4px var(--VARIABLE-BOX-CAPTION-color);
 }
 
@@ -248,7 +248,7 @@ body .btn.cstyle.interactive.transparent > *:focus {
   color: var(--INTERNAL-MAIN-TEXT-color);
 }
 
-body div.box.cstyle.transparent {
+body .box.cstyle.transparent {
   box-shadow: none;
 }
 
@@ -266,8 +266,8 @@ body div.box.cstyle.transparent {
   #R-body .badge > .badge-content,
   #R-body .btn,
   #R-body .btn > *,
-  #R-body div.box,
+  #R-body .box,
-  #R-body div.box > .box-label {
+  #R-body .box > .box-label {
     box-shadow: none;
     text-shadow: none;
   }
@@ -292,8 +292,8 @@ above will not apply, so we have to repeat it here */
 .print #R-body .badge > .badge-content,
 .print #R-body .btn,
 .print #R-body .btn > *,
-.print #R-body div.box,
+.print #R-body .box,
-.print #R-body div.box > .box-label {
+.print #R-body .box > .box-label {
   box-shadow: none;
   text-shadow: none;
 }

assets/css/theme.css

@@ -786,23 +786,29 @@ blockquote cite {
 
 /* colored boxes */
 
-div.box {
+.box {
   background-color: var(--VARIABLE-BOX-color);
   border-color: var(--VARIABLE-BOX-color);
-  margin: 1.5rem 0;
   border-style: solid;
   border-width: 1px;
+  margin: 1.5rem 0;
+  outline: none;
+  pointer-events: none;
 }
 
-div.box > .box-label {
+.box > .box-label {
   color: var(--VARIABLE-BOX-CAPTION-color);
   font-weight: 500;
   margin-left: 0.6rem;
   margin-right: 0.6rem;
   padding: 0.2rem 0;
 }
+.box > .box-label::-webkit-details-marker,
+.box > .box-label::marker {
+  display: none;
+}
 
-div.box > .box-content {
+.box > .box-content {
   background-color: var(--VARIABLE-BOX-BG-color);
   color: var(--VARIABLE-BOX-TEXT-color);
   padding-top: 1rem;
@@ -831,12 +837,10 @@ p:empty {
 #R-body table th > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
 #R-body table td > :nth-child(1 of :not(:empty)),
 #R-body table td > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
-#R-body div.box > .box-content > :nth-child(1 of :not(:empty)),
+#R-body .box > .box-content > :nth-child(1 of :not(:empty)),
-#R-body div.box > .box-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
+#R-body .box > .box-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content > :nth-child(1 of :not(:empty)),
+#R-body .tab-content > .tab-content-text > :nth-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
+#R-body .tab-content > .tab-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)) {
-#R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)),
-#R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)) {
   margin-top: 0;
 }
 
@@ -846,21 +850,18 @@ p:empty {
 #R-body table td > :nth-last-child(1 of :not(:empty)),
 #R-body table td > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
 #R-body table td > div:last-child pre:not(.mermaid),
-#R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)),
+#R-body .box > .box-content > :nth-last-child(1 of :not(:empty)),
-#R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
+#R-body .box > .box-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
-#R-body div.box > .box-content > div:last-child pre:not(.mermaid),
+#R-body .box > .box-content > div:last-child pre:not(.mermaid),
-#R-body div.expand > .expand-content > :nth-last-child(1 of :not(:empty)),
+#R-body .tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
+#R-body .tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content > div:last-child pre:not(.mermaid),
+#R-body .tab-content > .tab-content-text > div:last-child pre:not(.mermaid) {
-#R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)),
-#R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
-#R-body div.tab-content > .tab-content-text > div:last-child pre:not(.mermaid) {
   margin-bottom: 0;
 }
 
 /* resources shortcode */
 
-div.attachments .box-content {
+.attachments .box-content {
   display: block;
   margin: 0;
   padding-inline-start: 1.75rem;
@@ -1520,85 +1521,33 @@ option {
 .expand {
   margin-bottom: 1.5rem;
   margin-top: 1.5rem;
+  outline: initial;
+  pointer-events: initial;
   position: relative;
 }
 
-.expand > input {
+.expand > .box-label {
-  -webkit-appearance: none;
-  appearance: none;
   cursor: pointer;
 }
-
+.expand > .box-label:hover,
-.expand > label {
+.expand > .box-label:active,
-  cursor: pointer;
+.expand > .box-label:focus {
-  display: inline;
-  font-weight: 300;
-  inset-inline-start: 0;
-  position: absolute;
-}
-.expand:not(.box) > label {
-  color: var(--INTERNAL-MAIN-LINK-color);
-}
-
-.expand > input:active + label,
-.expand > input:focus + label,
-.expand > label:hover {
   text-decoration: underline;
 }
-.expand:not(.box) > label:hover,
-.expand:not(.box) > label:active,
-.expand:not(.box) > label:focus,
-.expand:not(.box) > input:hover + label,
-.expand:not(.box) > input:active + label,
-.expand:not(.box) > input:focus + label {
-  color: var(--INTERNAL-MAIN-LINK-HOVER-color);
-}
 
-.expand > label > .expander-icon {
+.expand > .box-label > .expander-icon {
   font-size: 0.8rem;
   width: 0.6rem;
 }
-
+.expand[open] > .box-label > i.expander-icon {
-.expand > .expand-content {
+  transform: rotate(90deg);
-  margin-inline-start: 1rem;
-  margin-top: 0.5rem;
 }
-.box.expand > .expand-content {
+html[dir='rtl'] .expand > .box-label > i.expander-icon {
-  margin-inline-start: 0;
-  margin-top: 0.4rem;
-}
-.box.expand > .box-spacer {
-  margin-bottom: 0.4rem;
-}
-
-/* closed expander */
-.expand > input + label ~ .expand-content {
-  display: none;
-}
-
-.expand > input + label > .fa-chevron-down {
-  display: none;
-}
-.expand > input + label > .fa-chevron-right {
-  display: inline-block;
-}
-
-/* open expander */
-.expand > input:checked + label ~ .expand-content {
-  display: block;
-}
-
-.expand > input:checked + label > .fa-chevron-down {
-  display: inline-block;
-}
-.expand > input:checked + label > .fa-chevron-right {
-  display: none;
-}
-
-/* adjust expander for RTL reading direction */
-html[dir='rtl'] .expand > .expand-label > i.fa-chevron-right {
   transform: scaleX(-1);
 }
+html[dir='rtl'] .expand[open] > .box-label > i.expander-icon {
+  transform: rotate(90deg);
+}
 
 #R-body footer.footline {
   margin-top: 2rem;
@@ -2762,26 +2711,27 @@ body.notfound #shrug svg {
   width: 15rem;
 }
 
-/* notice box */
+/* transparent boxes have different margins and - apperantly - different coloring */
 
-div.box.cstyle.transparent {
+.box.cstyle.transparent {
   border-width: 0;
 }
 
-div.box.cstyle.transparent > .box-label {
+.box.cstyle.transparent > .box-label {
   margin: 0;
   padding-bottom: 0;
   padding-top: 0;
 }
-div.box.expand.cstyle.transparent > .box-label {
+.box.expand.cstyle.transparent > .box-label {
   color: var(--INTERNAL-MAIN-LINK-color);
 }
-
+.box.expand.cstyle.transparent > .box-label:hover,
-div.box.cstyle.transparent > .box-spacer {
+.box.expand.cstyle.transparent > .box-label:active,
-  display: none;
+.box.expand.cstyle.transparent > .box-label:focus {
+  color: var(--INTERNAL-MAIN-LINK-HOVER-color);
 }
 
-div.box.cstyle.transparent > .box-content {
+.box.cstyle.transparent > .box-content {
   margin-top: 0;
   padding-bottom: 0;
 }

exampleSite/i18n/art-x-pir.toml

@@ -123,3 +123,6 @@ other = "Categorrries"
 
 [category]
 other = "Categorrry"
+
+[Details]
+other = "Details"

i18n/ar.toml

@@ -123,3 +123,6 @@ other = "فئات"
 
 [category]
 other = "فئة"
+
+[Details]
+other = "التفاصيل"

i18n/cs.toml

@@ -123,3 +123,6 @@ other = "Kategorie"
 
 [category]
 other = "Kategorie"
+
+[Details]
+other = "Podrobnosti"

i18n/de.toml

@@ -123,3 +123,6 @@ other = "Kategorien"
 
 [category]
 other = "Kategorie"
+
+[Details]
+other = "Details"

i18n/en.toml

@@ -123,3 +123,6 @@ other = "Categories"
 
 [category]
 other = "Category"
+
+[Details]
+other = "Details"

i18n/es.toml

@@ -123,3 +123,6 @@ other = "Categorías"
 
 [category]
 other = "Categoría"
+
+[Details]
+other = "Detalles"

i18n/fi.toml

@@ -123,3 +123,6 @@ other = "Luokat"
 
 [category]
 other = "Kategoria"
+
+[Details]
+other = "Tiedot"

i18n/fr.toml

@@ -123,3 +123,6 @@ other = "Catégories"
 
 [category]
 other = "Catégorie"
+
+[Details]
+other = "Détails"

i18n/hi.toml

@@ -123,3 +123,6 @@ other = "श्रेणियाँ"
 
 [category]
 other = "वर्ग"
+
+[Details]
+other = "ब्यौरा"

i18n/hu.toml

@@ -123,3 +123,6 @@ other = "Kategóriák"
 
 [category]
 other = "Kategória"
+
+[Details]
+other = "Részletek"

i18n/id.toml

@@ -123,3 +123,6 @@ other = "Kategori"
 
 [category]
 other = "Kategori"
+
+[Details]
+other = "Rincian"

i18n/it.toml

@@ -123,3 +123,6 @@ other = "Categorie"
 
 [category]
 other = "Categoria"
+
+[Details]
+other = "Dettagli"

i18n/ja.toml

@@ -123,3 +123,6 @@ other = "カテゴリー"
 
 [category]
 other = "カテゴリー"
+
+[Details]
+other = "細部"

i18n/ko.toml

@@ -126,3 +126,6 @@ other = "카테고리"
 
 [category]
 other = "카테고리"
+
+[Details]
+other = "세부 정보"

i18n/nl.toml

@@ -123,3 +123,6 @@ other = "Categorieën"
 
 [category]
 other = "Categorie"
+
+[Details]
+other = "Details"

i18n/pl.toml

@@ -123,3 +123,6 @@ other = "Kategorie"
 
 [category]
 other = "Kategoria"
+
+[Details]
+other = "Szczegóły"

i18n/pt.toml

@@ -123,3 +123,6 @@ other = "Categorias"
 
 [category]
 other = "Categoria"
+
+[Details]
+other = "Detalhes"

i18n/ro.toml

@@ -123,3 +123,6 @@ other = "Categorii"
 
 [category]
 other = "Categorie"
+
+[Details]
+other = "Detalii"

i18n/ru.toml

@@ -123,3 +123,6 @@ other = "Категории"
 
 [category]
 other = "Категория"
+
+[Details]
+other = "Подробности"

i18n/sw.toml

@@ -123,3 +123,6 @@ other = "Kategoria"
 
 [category]
 other = "Kategoria"
+
+[Details]
+other = "Maelezo"

i18n/tr.toml

@@ -123,3 +123,6 @@ other = "Kategoriler"
 
 [category]
 other = "Kategori"
+
+[Details]
+other = "Şey"

i18n/vi.toml

@@ -126,3 +126,6 @@ other = "Thể loại"
 
 [category]
 other = "Loại"
+
+[Details]
+other = "Chi tiết"

i18n/zh-CN.toml

@@ -123,3 +123,6 @@ other = "类别"
 
 [category]
 other = "类别"
+
+[Details]
+other = "详情"

i18n/zh-Hans.toml

@@ -123,3 +123,6 @@ other = "类别"
 
 [category]
 other = "类别"
+
+[Details]
+other = "详情"

i18n/zh-Hant.toml

@@ -123,3 +123,6 @@ other = "類別"
 
 [category]
 other = "類別"
+
+[Details]
+other = "詳情"

i18n/zh-TW.toml

@@ -123,3 +123,6 @@ other = "類別"
 
 [category]
 other = "類別"
+
+[Details]
+other = "詳情"

i18n/zh.toml

@@ -123,3 +123,6 @@ other = "类别"
 
 [category]
 other = "类别"
+
+[Details]
+other = "详情"

layouts/partials/shortcodes/notice.html

@@ -31,32 +31,20 @@
     {{- $expander = true }}
   {{- end }}
 {{- end }}
-{{- $id := cond (or (eq .id nil) (eq .id "")) (partial "_relearn/makeRandomMd5.gotmpl" $page) .id }}
-{{- $idattribute := "" }}
-{{- if $expander }}
-  {{- $containerclass = $containerclass | append "expand-content" }}
-  {{- $idattribute = printf ` id="R-expandcontent-%s"` $id }}
-{{- end }}
 {{- with $page }}
   {{- if or $icon $title $hasContent -}}
-<div class="{{ if $expander }}expand {{ end }}box {{ $class }} cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
+<details class="{{ if $expander }}expand {{ end }}box {{ $class }} cstyle {{ $style }}"{{ if $color }} style=" --VARIABLE-BOX-color: {{ $color }};"{{ end }}{{ if not $expander }} tabindex="-1" open{{ else if $expanded }} open{{ end }}>
-    {{- if $expander }}
+  <summary class="box-label{{ if and (not $expander) (not $icon) (not $title) }} a11y-only{{ end }}">{{ if $expander }}
-  <input type="checkbox" id="R-expand-{{ $id }}" aria-controls="R-expandcontent-{{ $id }}"{{ if $expanded }} checked{{ end }}>
+    <i class="expander-icon fa-fw fas fa-chevron-right"></i> {{ end }}{{ if $icon }}
-  <label class="expand-label box-label" for="R-expand-{{ $id }}">
+    <i class="{{ $icon }}"></i> {{ end }}{{ if $title }}
-    <i class="expander-icon fa-fw fas fa-chevron-down"></i>
+    {{ $title | .RenderString }}{{ else }}
-    <i class="expander-icon fa-fw fas fa-chevron-right"></i> {{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
+    <span class="a11y-only">{{ T "Details" }}</span>{{ end }}
-  </label>
+  </summary>
-  <div class="box-spacer"></div>
-    {{- else if or $icon $title }}
-  <div class="box-label">
-    {{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
-  </div>
-    {{- end }}
     {{- if $hasContent }}
-{{ printf "  <%s%s class=\"%s\">" $containerstyle $idattribute (delimit $containerclass " ") | safeHTML }}
+{{ printf "  <%s class=\"%s\">" $containerstyle (delimit $containerclass " ") | safeHTML }}
 {{ $content | safeHTML }}
 {{ printf "  </%s>" $containerstyle | safeHTML }}
     {{- end }}
-</div>
+</details>
   {{- end }}
 {{- end }}

layouts/partials/version.txt

@@ -1 +1 @@
-7.1.1+1bb7c1d99ee8ae29ead714decffe8310263ef74c
+7.1.1+15b9b378f434ff288d819579379d632a97bf4938