From 6bb9ad0511b81f78e2ba487f13806ff8f5fbe72a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sat, 13 Apr 2024 12:39:59 +0200
Subject: [PATCH] fix(a11y): add aria-* entries to interface settings (#2799)

Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
---
 components/settings/SettingsBottomNav.vue   | 108 ++++++++++----------
 components/settings/SettingsColorMode.vue   |   5 +-
 components/settings/SettingsFontSize.vue    |   1 +
 components/settings/SettingsThemeColors.vue |   4 +-
 pages/settings/interface/index.vue          |  10 +-
 5 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/components/settings/SettingsBottomNav.vue b/components/settings/SettingsBottomNav.vue
index 8b737f79..740f3d0c 100644
--- a/components/settings/SettingsBottomNav.vue
+++ b/components/settings/SettingsBottomNav.vue
@@ -67,59 +67,61 @@ function save() {
 </script>
 
 <template>
-  <!-- preview -->
-  <div flex="~ gap4 wrap" items-center select-settings h-14 p0>
-    <nav
-      v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name"
-      flex="~ 1" items-center justify-center text-xl
-      scrollbar-hide overscroll-none
-    >
-      <button btn-base :class="availableNavButton.icon" mx-4 tabindex="-1" />
-    </nav>
-  </div>
+  <form aria-labelledby="interface-bn" aria-describedby="interface-bn-desc" @submit.prevent="save">
+    <!-- preview -->
+    <div aria-hidden="true" flex="~ gap4 wrap" items-center select-settings h-14 p0>
+      <nav
+        v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name"
+        flex="~ 1" items-center justify-center text-xl
+        scrollbar-hide overscroll-none
+      >
+        <button btn-base :class="availableNavButton.icon" mx-4 tabindex="-1" />
+      </nav>
+    </div>
 
-  <!-- button selection -->
-  <div flex="~ gap4 wrap" py4>
-    <button
-      v-for="{ name, label, icon } in availableNavButtons"
-      :key="name"
-      btn-text flex="~ gap-2" items-center p2 border="~ base rounded" bg-base ws-nowrap
-      :class="isAdded(name) ? 'text-secondary hover:text-second bg-auto' : ''"
-      type="button"
-      role="switch"
-      :aria-checked="isAdded(name)"
-      @click="isAdded(name) ? remove(name) : append(name)"
-    >
-      <span :class="icon" />
-      {{ label ? $t(label) : 'More menu' }}
-    </button>
-  </div>
+    <!-- button selection -->
+    <div flex="~ gap4 wrap" py4>
+      <button
+        v-for="{ name, label, icon } in availableNavButtons"
+        :key="name"
+        btn-text flex="~ gap-2" items-center p2 border="~ base rounded" bg-base ws-nowrap
+        :class="isAdded(name) ? 'text-secondary hover:text-second bg-auto' : ''"
+        type="button"
+        role="switch"
+        :aria-checked="isAdded(name)"
+        @click="isAdded(name) ? remove(name) : append(name)"
+      >
+        <span :class="icon" />
+        {{ label ? $t(label) : 'More menu' }}
+      </button>
+    </div>
 
-  <div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-end flex-row">
-    <button
-      btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
-      type="button"
-      :disabled="selectedNavButtonNames.length === 0"
-      @click="clear"
-    >
-      <span aria-hidden="true" class="block i-ri:delete-bin-line" />
-      {{ $t('action.clear') }}
-    </button>
-    <button
-      btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
-      type="button"
-      @click="reset"
-    >
-      <span aria-hidden="true" class="block i-ri:repeat-line" />
-      {{ $t('action.reset') }}
-    </button>
-    <button
-      btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center"
-      :disabled="!canSave"
-      @click="save"
-    >
-      <span aria-hidden="true" i-ri:save-2-fill />
-      {{ $t('action.save') }}
-    </button>
-  </div>
+    <div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-end flex-row">
+      <button
+        btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
+        type="button"
+        :disabled="selectedNavButtonNames.length === 0"
+        :class="selectedNavButtonNames.length === 0 ? 'border-none' : undefined"
+        @click="clear"
+      >
+        <span aria-hidden="true" class="block i-ri:delete-bin-line" />
+        {{ $t('action.clear') }}
+      </button>
+      <button
+        btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
+        type="reset"
+        @click="reset"
+      >
+        <span aria-hidden="true" class="block i-ri:repeat-line" />
+        {{ $t('action.reset') }}
+      </button>
+      <button
+        btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center"
+        :disabled="!canSave"
+      >
+        <span aria-hidden="true" i-ri:save-2-fill />
+        {{ $t('action.save') }}
+      </button>
+    </div>
+  </form>
 </template>
diff --git a/components/settings/SettingsColorMode.vue b/components/settings/SettingsColorMode.vue
index 823f835d..ae852b79 100644
--- a/components/settings/SettingsColorMode.vue
+++ b/components/settings/SettingsColorMode.vue
@@ -27,12 +27,13 @@ const modes = [
 </script>
 
 <template>
-  <div flex="~ gap4 wrap" w-full>
+  <div flex="~ gap4 wrap" w-full role="group" aria-labelledby="interface-cm">
     <button
       v-for="{ icon, label, mode } in modes"
       :key="mode"
+      type="button"
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
-      :tabindex="colorMode.preference === mode ? 0 : -1"
+      :aria-pressed="colorMode.preference === mode ? 'true' : 'false'"
       :class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
       @click="setColorMode(mode)"
     >
diff --git a/components/settings/SettingsFontSize.vue b/components/settings/SettingsFontSize.vue
index 26492930..eb97002b 100644
--- a/components/settings/SettingsFontSize.vue
+++ b/components/settings/SettingsFontSize.vue
@@ -17,6 +17,7 @@ function setFontSize(e: Event) {
     <span text-xs text-secondary>Aa</span>
     <div flex-1 relative flex items-center>
       <input
+        aria-labelledby="interface-fs"
         :value="sizes.indexOf(userSettings.fontSize)"
         :aria-valuetext="`${userSettings.fontSize}${userSettings.fontSize === DEFAULT_FONT_SIZE ? ` ${$t('settings.interface.default')}` : ''}`"
         :min="0"
diff --git a/components/settings/SettingsThemeColors.vue b/components/settings/SettingsThemeColors.vue
index edb11126..24ab7d0a 100644
--- a/components/settings/SettingsThemeColors.vue
+++ b/components/settings/SettingsThemeColors.vue
@@ -12,14 +12,16 @@ function updateTheme(theme: ThemeColors) {
 </script>
 
 <template>
-  <div flex="~ gap4 wrap" p2>
+  <div flex="~ gap4 wrap" p2 role="group" aria-labelledby="interface-tc">
     <button
       v-for="[key, theme] in themes" :key="key"
       :style="{
         'background': key,
         '--local-ring-color': key,
       }"
+      type="button"
       :class="currentTheme === theme['--theme-color-name'] ? 'ring-2' : 'scale-90'"
+      :aria-pressed="currentTheme === theme['--theme-color-name'] ? 'true' : 'false'"
       :title="theme['--theme-color-name']"
       w-8 h-8 rounded-full transition-all
       ring="$local-ring-color offset-3 offset-$c-bg-base"
diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
index 4ad9bb8e..f3f837bd 100644
--- a/pages/settings/interface/index.vue
+++ b/pages/settings/interface/index.vue
@@ -15,28 +15,28 @@ useHydratedHead({
     </template>
     <div p6 flex="~ col gap6">
       <div space-y-2>
-        <p font-medium>
+        <p id="interface-fs" font-medium>
           {{ $t('settings.interface.font_size') }}
         </p>
         <SettingsFontSize select-settings />
       </div>
       <div space-y-2>
-        <p font-medium>
+        <p id="interface-cm" font-medium>
           {{ $t('settings.interface.color_mode') }}
         </p>
         <SettingsColorMode />
       </div>
       <div space-y-2>
-        <p font-medium>
+        <p id="interface-tc" font-medium>
           {{ $t('settings.interface.theme_color') }}
         </p>
         <SettingsThemeColors />
       </div>
       <div space-y-2>
-        <p font-medium>
+        <p id="interface-bn" font-medium>
           {{ $t('settings.interface.bottom_nav') }}
         </p>
-        <p>
+        <p id="interface-bn-desc">
           {{ $t('settings.interface.bottom_nav_instructions') }}
         </p>
         <SettingsBottomNav />