From c504e14ff5e313b6c78d8a346359da37648156d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 14 Apr 2024 20:06:25 +0200
Subject: [PATCH] feat(a11y): add semantic markup to interface settings (#2809)

Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
---
 components/settings/SettingsBottomNav.vue   | 118 +++++++++++---------
 components/settings/SettingsColorMode.vue   |  33 +++---
 components/settings/SettingsFontSize.vue    |  65 ++++++-----
 components/settings/SettingsThemeColors.vue |  37 +++---
 pages/settings/interface/index.vue          |  33 +-----
 5 files changed, 143 insertions(+), 143 deletions(-)

diff --git a/components/settings/SettingsBottomNav.vue b/components/settings/SettingsBottomNav.vue
index 740f3d0c..e75a4154 100644
--- a/components/settings/SettingsBottomNav.vue
+++ b/components/settings/SettingsBottomNav.vue
@@ -67,61 +67,69 @@ function save() {
 </script>
 
 <template>
-  <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>
+  <section space-y-2>
+    <h2 id="interface-bn" font-medium>
+      {{ $t('settings.interface.bottom_nav') }}
+    </h2>
+    <form aria-labelledby="interface-bn" aria-describedby="interface-bn-desc" @submit.prevent="save">
+      <p id="interface-bn-desc" pb-2>
+        {{ $t('settings.interface.bottom_nav_instructions') }}
+      </p>
+      <!-- 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"
-        :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>
+      <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>
+  </section>
 </template>
diff --git a/components/settings/SettingsColorMode.vue b/components/settings/SettingsColorMode.vue
index ae852b79..a7ad444e 100644
--- a/components/settings/SettingsColorMode.vue
+++ b/components/settings/SettingsColorMode.vue
@@ -27,18 +27,23 @@ const modes = [
 </script>
 
 <template>
-  <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
-      :aria-pressed="colorMode.preference === mode ? 'true' : 'false'"
-      :class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
-      @click="setColorMode(mode)"
-    >
-      <span :class="`${icon}`" />
-      {{ $t(label) }}
-    </button>
-  </div>
+  <section space-y-2>
+    <h2 id="interface-cm" font-medium>
+      {{ $t('settings.interface.color_mode') }}
+    </h2>
+    <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
+        :aria-pressed="colorMode.preference === mode ? 'true' : 'false'"
+        :class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
+        @click="setColorMode(mode)"
+      >
+        <span :class="`${icon}`" />
+        {{ $t(label) }}
+      </button>
+    </div>
+  </section>
 </template>
diff --git a/components/settings/SettingsFontSize.vue b/components/settings/SettingsFontSize.vue
index eb97002b..ad85be0f 100644
--- a/components/settings/SettingsFontSize.vue
+++ b/components/settings/SettingsFontSize.vue
@@ -13,40 +13,45 @@ function setFontSize(e: Event) {
 </script>
 
 <template>
-  <div flex items-center space-x-4>
-    <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"
-        :max="sizes.length - 1"
-        :step="1"
-        type="range"
-        focus:outline-none
-        appearance-none bg-transparent
-        w-full cursor-pointer
-        @change="setFontSize"
-      >
-      <div flex items-center justify-between absolute w-full pointer-events-none>
-        <div
-          v-for="i in sizes.length" :key="i"
-          class="container-marker"
-          h-3 w-3
-          rounded-full bg-secondary-light
-          relative
+  <section space-y-2>
+    <h2 id="interface-fs" font-medium>
+      {{ $t('settings.interface.font_size') }}
+    </h2>
+    <div flex items-center space-x-4 select-settings>
+      <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"
+          :max="sizes.length - 1"
+          :step="1"
+          type="range"
+          focus:outline-none
+          appearance-none bg-transparent
+          w-full cursor-pointer
+          @change="setFontSize"
         >
+        <div flex items-center justify-between absolute w-full pointer-events-none>
           <div
-            v-if="(sizes.indexOf(userSettings.fontSize)) === i - 1"
-            absolute rounded-full class="-top-1 -left-1"
-            bg-primary h-5 w-5
-          />
+            v-for="i in sizes.length" :key="i"
+            class="container-marker"
+            h-3 w-3
+            rounded-full bg-secondary-light
+            relative
+          >
+            <div
+              v-if="(sizes.indexOf(userSettings.fontSize)) === i - 1"
+              absolute rounded-full class="-top-1 -left-1"
+              bg-primary h-5 w-5
+            />
+          </div>
         </div>
       </div>
+      <span text-xl text-secondary>Aa</span>
     </div>
-    <span text-xl text-secondary>Aa</span>
-  </div>
+  </section>
 </template>
 
 <style>
@@ -64,7 +69,7 @@ function setFontSize(e: Event) {
   input[type=range]::-webkit-slider-runnable-track {
     --at-apply: bg-secondary-light rounded-full h1 op60;
   }
-  input[type=range]:focus:-webkit-slider-runnable-track {
+  input[type=range]:focus::-webkit-slider-runnable-track {
     --at-apply: outline-2 outline-red;
   }
   input[type=range]::-webkit-slider-thumb {
diff --git a/components/settings/SettingsThemeColors.vue b/components/settings/SettingsThemeColors.vue
index 24ab7d0a..6caceb10 100644
--- a/components/settings/SettingsThemeColors.vue
+++ b/components/settings/SettingsThemeColors.vue
@@ -12,20 +12,25 @@ function updateTheme(theme: ThemeColors) {
 </script>
 
 <template>
-  <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"
-      @click="updateTheme(theme)"
-    />
-  </div>
+  <section space-y-2>
+    <h2 id="interface-tc" font-medium>
+      {{ $t('settings.interface.theme_color') }}
+    </h2>
+    <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"
+        @click="updateTheme(theme)"
+      />
+    </div>
+  </section>
 </template>
diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
index f3f837bd..723859b1 100644
--- a/pages/settings/interface/index.vue
+++ b/pages/settings/interface/index.vue
@@ -13,34 +13,11 @@ useHydratedHead({
         <span>{{ $t('settings.interface.label') }}</span>
       </div>
     </template>
-    <div p6 flex="~ col gap6">
-      <div space-y-2>
-        <p id="interface-fs" font-medium>
-          {{ $t('settings.interface.font_size') }}
-        </p>
-        <SettingsFontSize select-settings />
-      </div>
-      <div space-y-2>
-        <p id="interface-cm" font-medium>
-          {{ $t('settings.interface.color_mode') }}
-        </p>
-        <SettingsColorMode />
-      </div>
-      <div space-y-2>
-        <p id="interface-tc" font-medium>
-          {{ $t('settings.interface.theme_color') }}
-        </p>
-        <SettingsThemeColors />
-      </div>
-      <div space-y-2>
-        <p id="interface-bn" font-medium>
-          {{ $t('settings.interface.bottom_nav') }}
-        </p>
-        <p id="interface-bn-desc">
-          {{ $t('settings.interface.bottom_nav_instructions') }}
-        </p>
-        <SettingsBottomNav />
-      </div>
+    <div px-6 pt-3 pb-6 flex="~ col gap6">
+      <SettingsFontSize />
+      <SettingsColorMode />
+      <SettingsThemeColors />
+      <SettingsBottomNav />
     </div>
   </MainContent>
 </template>