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

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

components/settings/SettingsBottomNav.vue

@@ -67,8 +67,9 @@ function save() {
 </script>
 
 <template>
+  <form aria-labelledby="interface-bn" aria-describedby="interface-bn-desc" @submit.prevent="save">
     <!-- preview -->
-  <div flex="~ gap4 wrap" items-center select-settings h-14 p0>
+    <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
@@ -100,6 +101,7 @@ function save() {
         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" />
@@ -107,7 +109,7 @@ function save() {
       </button>
       <button
         btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
-      type="button"
+        type="reset"
         @click="reset"
       >
         <span aria-hidden="true" class="block i-ri:repeat-line" />
@@ -116,10 +118,10 @@ function save() {
       <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>
+  </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 />