nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-12-02 20:23:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

notice: improve accessibility of notice title #897

Browse source 
switch to details/summary elements which hopefully has better a11y
and will simplify state handling as it is build into the browser
This commit is contained in:
Sören Weber 2024-11-30 19:10:52 +01:00
parent 15b9b378f4
commit bda57027b3
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
32 changed files with 142 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/format-print.css
View file

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

14
assets/css/theme-neon.css
View file

@ -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 div.box > .box-label {
#R-body .box,
#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 div.box > .box-label {
.print #R-body .box,
.print #R-body .box > .box-label {
box-shadow: none;
text-shadow: none;
}

136
assets/css/theme.css
View file

@ -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 div.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 div.expand > .expand-content > :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)) {
#R-body .box > .box-content > :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 .tab-content > .tab-content-text > :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)) {
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 div.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 div.expand > .expand-content > :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 div.expand > .expand-content > 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) {
#R-body .box > .box-content > :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 .box > .box-content > div:last-child pre:not(.mermaid),
#R-body .tab-content > .tab-content-text > :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 .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 {
-webkit-appearance: none;
appearance: none;
.expand > .box-label {
cursor: pointer;
}
.expand > label {
cursor: pointer;
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 {
.expand > .box-label:hover,
.expand > .box-label:active,
.expand > .box-label:focus {
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 > .expand-content {
margin-inline-start: 1rem;
margin-top: 0.5rem;
.expand[open] > .box-label > i.expander-icon {
transform: rotate(90deg);
}
.box.expand > .expand-content {
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 {
html[dir='rtl'] .expand > .box-label > i.expander-icon {
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);
}
div.box.cstyle.transparent > .box-spacer {
display: none;
.box.expand.cstyle.transparent > .box-label:hover,
.box.expand.cstyle.transparent > .box-label:active,
.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;
}

3
exampleSite/i18n/art-x-pir.toml
View file

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

3
i18n/ar.toml
View file

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

3
i18n/cs.toml
View file

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

3
i18n/de.toml
View file

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

3
i18n/en.toml
View file

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

3
i18n/es.toml
View file

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

3
i18n/fi.toml
View file

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

3
i18n/fr.toml
View file

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

3
i18n/hi.toml
View file

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

3
i18n/hu.toml
View file

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

3
i18n/id.toml
View file

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

3
i18n/it.toml
View file

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

3
i18n/ja.toml
View file

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

3
i18n/ko.toml
View file

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

3
i18n/nl.toml
View file

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

3
i18n/pl.toml
View file

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

3
i18n/pt.toml
View file

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

3
i18n/ro.toml
View file

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

3
i18n/ru.toml
View file

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

3
i18n/sw.toml
View file

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

3
i18n/tr.toml
View file

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

3
i18n/vi.toml
View file

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

3
i18n/zh-CN.toml
View file

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

3
i18n/zh-Hans.toml
View file

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

3
i18n/zh-Hant.toml
View file

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

3
i18n/zh-TW.toml
View file

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

3
i18n/zh.toml
View file

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

30
layouts/partials/shortcodes/notice.html
View file

@ -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 }}>
{{- if $expander }}
<input type="checkbox" id="R-expand-{{ $id }}" aria-controls="R-expandcontent-{{ $id }}"{{ if $expanded }} checked{{ end }}>
<label class="expand-label box-label" for="R-expand-{{ $id }}">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<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 }}
</label>
<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 }}
<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 }}>
<summary class="box-label{{ if and (not $expander) (not $icon) (not $title) }} a11y-only{{ end }}">{{ if $expander }}
<i class="expander-icon fa-fw fas fa-chevron-right"></i> {{ end }}{{ if $icon }}
<i class="{{ $icon }}"></i> {{ end }}{{ if $title }}
{{ $title | .RenderString }}{{ else }}
<span class="a11y-only">{{ T "Details" }}</span>{{ end }}
</summary>
{{- 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 }}

2
layouts/partials/version.txt
View file

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