fix(a11y): add aria-* entries to interface settings (#2799)

Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>

components/settings/SettingsBottomNav.vue

@@ -67,59 +67,61 @@ function save() {
 </script>
 
 <template>
-  <!-- preview -->
+  <form aria-labelledby="interface-bn" aria-describedby="interface-bn-desc" @submit.prevent="save">
-  <div flex="~ gap4 wrap" items-center select-settings h-14 p0>
+    <!-- preview -->
-    <nav
+    <div aria-hidden="true" flex="~ gap4 wrap" items-center select-settings h-14 p0>
-      v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name"
+      <nav
-      flex="~ 1" items-center justify-center text-xl
+        v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name"
-      scrollbar-hide overscroll-none
+        flex="~ 1" items-center justify-center text-xl
-    >
+        scrollbar-hide overscroll-none
-      <button btn-base :class="availableNavButton.icon" mx-4 tabindex="-1" />
+      >
-    </nav>
+        <button btn-base :class="availableNavButton.icon" mx-4 tabindex="-1" />
-  </div>
+      </nav>
+    </div>
 
-  <!-- button selection -->
+    <!-- button selection -->
-  <div flex="~ gap4 wrap" py4>
+    <div flex="~ gap4 wrap" py4>
-    <button
+      <button
-      v-for="{ name, label, icon } in availableNavButtons"
+        v-for="{ name, label, icon } in availableNavButtons"
-      :key="name"
+        :key="name"
-      btn-text flex="~ gap-2" items-center p2 border="~ base rounded" bg-base ws-nowrap
+        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' : ''"
+        :class="isAdded(name) ? 'text-secondary hover:text-second bg-auto' : ''"
-      type="button"
+        type="button"
-      role="switch"
+        role="switch"
-      :aria-checked="isAdded(name)"
+        :aria-checked="isAdded(name)"
-      @click="isAdded(name) ? remove(name) : append(name)"
+        @click="isAdded(name) ? remove(name) : append(name)"
-    >
+      >
-      <span :class="icon" />
+        <span :class="icon" />
-      {{ label ? $t(label) : 'More menu' }}
+        {{ label ? $t(label) : 'More menu' }}
-    </button>
+      </button>
-  </div>
+    </div>
 
-  <div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-end flex-row">
+    <div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-end flex-row">
-    <button
+      <button
-      btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
+        btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
-      type="button"
+        type="button"
-      :disabled="selectedNavButtonNames.length === 0"
+        :disabled="selectedNavButtonNames.length === 0"
-      @click="clear"
+        :class="selectedNavButtonNames.length === 0 ? 'border-none' : undefined"
-    >
+        @click="clear"
-      <span aria-hidden="true" class="block i-ri:delete-bin-line" />
+      >
-      {{ $t('action.clear') }}
+        <span aria-hidden="true" class="block i-ri:delete-bin-line" />
-    </button>
+        {{ $t('action.clear') }}
-    <button
+      </button>
-      btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
+      <button
-      type="button"
+        btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
-      @click="reset"
+        type="reset"
-    >
+        @click="reset"
-      <span aria-hidden="true" class="block i-ri:repeat-line" />
+      >
-      {{ $t('action.reset') }}
+        <span aria-hidden="true" class="block i-ri:repeat-line" />
-    </button>
+        {{ $t('action.reset') }}
-    <button
+      </button>
-      btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center"
+      <button
-      :disabled="!canSave"
+        btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center"
-      @click="save"
+        :disabled="!canSave"
-    >
+      >
-      <span aria-hidden="true" i-ri:save-2-fill />
+        <span aria-hidden="true" i-ri:save-2-fill />
-      {{ $t('action.save') }}
+        {{ $t('action.save') }}
-    </button>
+      </button>
-  </div>
+    </div>
+  </form>
 </template>

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)"
     >

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"

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"

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 />