hugo-theme-relearn/layouts/partials/shortcodes/notice.html
Sören Weber bda57027b3
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
2024-11-30 19:10:58 +01:00

50 lines
No EOL
2.3 KiB
HTML

{{- $page := .page }}
{{- if and (not $page) .context }}
{{- $page = .context }}
{{- warnf "%q: DEPRECATED parameter 'context' for shortcode 'notice' found, use 'page' instead; see https://mcshelby.github.io/hugo-theme-relearn/introduction/releasenotes/5/#5-18-0" $page.File.Filename }}
{{- end }}
{{- $class := .class | default "notices" }}
{{- $containerstyle := .containerstyle | default "div" }}
{{- $containerclass := .containerclass | default slice | append "box-content" }}
{{- $color := .color | default "" }}
{{- $content := trim .content "\n\r\t " }}
{{- $hasContent := ne (strings.TrimLeft "<p>" $content) "" }}
{{- if not (hasPrefix $content "<") }}
{{- $content = printf "<p>\n%s" $content }}
{{- end }}
{{- $style := .style | default "default" }}
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }}
{{- $title := trim ($boxStyle.title) " " }}
{{- $icon := trim ($boxStyle.icon) " " }}
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
{{- $icon = printf "fa-fw fas fa-%s" $icon }}
{{- end }}
{{- $expander := false }}
{{- $expanded := .expanded | default "" }}
{{- if $hasContent }}
{{- if eq (printf "%T" $expanded) "string" }}
{{- if ne (trim $expanded " ") "" }}
{{- $expander = true }}
{{- $expanded = (eq $expanded "true") }}
{{- end }}
{{- else }}
{{- $expander = true }}
{{- end }}
{{- end }}
{{- with $page }}
{{- if or $icon $title $hasContent -}}
<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 class=\"%s\">" $containerstyle (delimit $containerclass " ") | safeHTML }}
{{ $content | safeHTML }}
{{ printf " </%s>" $containerstyle | safeHTML }}
{{- end }}
</details>
{{- end }}
{{- end }}