feat(a11y): add semantic markup to interface settings (#2809)

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

components/settings/SettingsBottomNav.vue

@@ -67,7 +67,14 @@ function save() {
 </script>
 
 <template>
+  <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
@@ -124,4 +131,5 @@ function save() {
         </button>
       </div>
     </form>
+  </section>
 </template>

components/settings/SettingsColorMode.vue

@@ -27,6 +27,10 @@ const modes = [
 </script>
 
 <template>
+  <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"
@@ -41,4 +45,5 @@ const modes = [
         {{ $t(label) }}
       </button>
     </div>
+  </section>
 </template>

components/settings/SettingsFontSize.vue

@@ -13,7 +13,11 @@ function setFontSize(e: Event) {
 </script>
 
 <template>
-  <div flex items-center space-x-4>
+  <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
@@ -47,6 +51,7 @@ function setFontSize(e: Event) {
       </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 {

components/settings/SettingsThemeColors.vue

@@ -12,6 +12,10 @@ function updateTheme(theme: ThemeColors) {
 </script>
 
 <template>
+  <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"
@@ -28,4 +32,5 @@ function updateTheme(theme: ThemeColors) {
         @click="updateTheme(theme)"
       />
     </div>
+  </section>
 </template>

pages/settings/interface/index.vue

@@ -13,34 +13,11 @@ useHydratedHead({
         <span>{{ $t('settings.interface.label') }}</span>
       </div>
     </template>
-    <div p6 flex="~ col gap6">
+    <div px-6 pt-3 pb-6 flex="~ col gap6">
-      <div space-y-2>
+      <SettingsFontSize />
-        <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>
   </MainContent>
 </template>