dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: a11y id confict between desktop and mobile

Browse Source
This commit is contained in:
ZhenShuo Leo
2025-07-21 21:44:29 +08:00
parent 5b376cc116
commit 9f07989148
2 changed files with 64 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
layouts/partials/header/basic.html
View File

@@ -35,7 +35,7 @@
{{ partial "translations.html" . }}
{{ if .Site.Params.enableA11y | default false }}
{{ template "HeaderA11y" . }}
{{ template "HeaderA11y" (dict "prefix" "desktop-" "Site" .Site) }}
{{ end }}
{{ if .Site.Params.enableSearch | default false }}
@@ -74,7 +74,7 @@
{{ partial "translations.html" . }}
{{ if .Site.Params.enableA11y | default false }}
{{ template "HeaderA11y" . }}
{{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }}
{{ end }}
{{ if .Site.Params.enableSearch | default false }}
@@ -160,33 +160,36 @@
{{ end }}
{{ define "HeaderA11y" }}
{{- $prefix := .prefix | default "" -}}
<div class="flex items-center">
<button
id="a11y-toggle"
id="{{ $prefix }}a11y-toggle"
aria-label="Open accessibility panel"
aria-expanded="false"
type="button"
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
onclick="toggleA11yPanel()"
onclick="toggleA11yPanel('{{ $prefix }}')"
role="button"
aria-pressed="false">
{{ partial "icon.html" "a11y" }}
</button>
<div id="a11y-overlay" class="fixed inset-0 z-500 hidden"></div>
<div id="{{ $prefix }}a11y-overlay" class="fixed inset-0 z-500 hidden"></div>
<div
id="a11y-panel"
id="{{ $prefix }}a11y-panel"
role="dialog"
aria-labelledby="a11y-panel-title"
aria-labelledby="{{ $prefix }}a11y-panel-title"
class="a11y-panel-enter fixed hidden z-500 p-6 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-lg shadow-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700"
style="min-width: 20rem;">
<div class="flex items-center justify-between mb-6">
<h3 id="a11y-panel-title" class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
<h3
id="{{ $prefix }}a11y-panel-title"
class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Accessibility settings
</h3>
<button
onclick="toggleA11yPanel()"
onclick="toggleA11yPanel('{{ $prefix }}')"
class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
aria-label="Close a11y panel">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -196,13 +199,13 @@
</div>
<div class="space-y-5">
{{ $toggles := slice
(dict "id" "disable-blur" "label" "Disable background blur")
(dict "id" "disable-images" "label" "Disable background image")
(dict "id" "underline-links" "label" "Show link underline")
}}
{{- $toggles := slice
(dict "id" (print $prefix "disable-blur") "label" "Disable background blur")
(dict "id" (print $prefix "disable-images") "label" "Disable background image")
(dict "id" (print $prefix "underline-links") "label" "Show link underline")
-}}
{{ range $toggles }}
{{- range $toggles }}
<div class="flex items-center justify-between">
<label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
{{ .label }}
@@ -211,15 +214,17 @@
<input type="checkbox" id="{{ .id }}">
</div>
</div>
{{ end }}
{{- end }}
<div class="flex items-center justify-between">
<label for="font-size-select" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
<label
for="{{ $prefix }}font-size-select"
class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
Font size
</label>
<select
id="font-size-select"
id="{{ $prefix }}font-size-select"
class="border rounded-lg px-3 py-1.5 pr-8 text-neutral-900 text-sm dark:bg-neutral-700 dark:text-neutral-200 focus:ring-primary-500 focus:border-primary-500">
{{ $fontSizes := slice "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
{{ range $fontSizes }}