blowfish/layouts/partials/header/components/a11y.html

{{- $prefix := .prefix | default "" -}}
<div class="flex items-center">
  <button
    id="{{ $prefix }}a11y-toggle"
    aria-label="Open accessibility panel"
    aria-expanded="false"
    type="button"
    class="bf-icon-color-hover"
    role="button"
    aria-pressed="false">
    {{ partial "icon.html" "a11y" }}
  </button>

  <div id="{{ $prefix }}a11y-overlay" class="fixed inset-0 hidden" style="z-index:9999;"></div>

  <div
    id="{{ $prefix }}a11y-panel"
    role="dialog"
    aria-labelledby="{{ $prefix }}a11y-panel-title"
    class="a11y-panel-enter fixed hidden 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-300 dark:border-neutral-700"
    style="min-width: 20rem; z-index:9999;">
    <div class="flex items-center justify-between mb-6">
      <h3
        id="{{ $prefix }}a11y-panel-title"
        class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
        {{ i18n "a11y.title" }}
      </h3>
      <button
        id="{{ $prefix }}a11y-close"
        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">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <div class="space-y-5">
      {{ $toggles := slice }}
      {{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
      {{ $shouldDisableBackgroundImage := or
        (eq site.Params.homepage.layout "background")
        (eq site.Params.article.heroStyle "background")
        (eq site.Params.list.heroStyle "background")
        (eq site.Params.taxonomy.heroStyle "background")
        (eq site.Params.term.heroStyle "background")
      }}
      {{ if $shouldDisableBlur }}
        {{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
      {{ end }}
      {{ if $shouldDisableBackgroundImage }}
        {{ $toggles = $toggles | append (dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images")) }}
      {{ end }}
      {{- $toggles = $toggles | append
        (dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
        (dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
      -}}

      {{- 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 }}
          </label>
          <div class="ios-toggle">
            <input type="checkbox" id="{{ .id }}">
          </div>
        </div>
      {{- end }}


      <div class="flex items-center justify-between">
        <label
          for="{{ $prefix }}font-size-select"
          class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
          {{ i18n "a11y.font_size" }}
        </label>
        <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 "default" "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
          {{ range $fontSizes }}
            <option value="{{ . }}">{{ . }}</option>
          {{ end }}
        </select>
      </div>
    </div>
  </div>
</div>