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

---
 pages/settings/preferences/index.vue | 324 ++++++++++++++-------------
 1 file changed, 167 insertions(+), 157 deletions(-)

diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index b0d6d235..c0d7be72 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -15,162 +15,172 @@ const userSettings = useUserSettings()
         {{ $t('settings.preferences.label') }}
       </h1>
     </template>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideAltIndicatorOnPosts')"
-      @click="togglePreferences('hideAltIndicatorOnPosts')"
-    >
-      {{ $t('settings.preferences.hide_alt_indi_on_posts') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideGifIndicatorOnPosts')"
-      @click="togglePreferences('hideGifIndicatorOnPosts')"
-    >
-      {{ $t('settings.preferences.hide_gif_indi_on_posts') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideAccountHoverCard')"
-      @click="togglePreferences('hideAccountHoverCard')"
-    >
-      {{ $t('settings.preferences.hide_account_hover_card') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideTagHoverCard')"
-      @click="togglePreferences('hideTagHoverCard')"
-    >
-      {{ $t('settings.preferences.hide_tag_hover_card') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'enableAutoplay')"
-      :disabled="getPreferences(userSettings, 'enableDataSaving')"
-      @click="togglePreferences('enableAutoplay')"
-    >
-      {{ $t('settings.preferences.enable_autoplay') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'optimizeForLowPerformanceDevice')"
-      @click="togglePreferences('optimizeForLowPerformanceDevice')"
-    >
-      {{ $t('settings.preferences.optimize_for_low_performance_device') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'enableDataSaving')"
-      @click="togglePreferences('enableDataSaving')"
-    >
-      {{ $t("settings.preferences.enable_data_saving") }}
-      <template #description>
-        {{ $t("settings.preferences.enable_data_saving_description") }}
-      </template>
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'enablePinchToZoom')"
-      @click="togglePreferences('enablePinchToZoom')"
-    >
-      {{ $t('settings.preferences.enable_pinch_to_zoom') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'useStarFavoriteIcon')"
-      @click="togglePreferences('useStarFavoriteIcon')"
-    >
-      {{ $t('settings.preferences.use_star_favorite_icon') }}
-    </SettingsToggleItem>
-    <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
-      <div i-ri-hearts-line />
-      {{ $t('settings.preferences.wellbeing') }}
-    </h2>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'grayscaleMode')"
-      @click="togglePreferences('grayscaleMode')"
-    >
-      {{ $t('settings.preferences.grayscale_mode') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideBoostCount')"
-      @click="togglePreferences('hideBoostCount')"
-    >
-      {{ $t('settings.preferences.hide_boost_count') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideFavoriteCount')"
-      @click="togglePreferences('hideFavoriteCount')"
-    >
-      {{ $t('settings.preferences.hide_favorite_count') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideReplyCount')"
-      @click="togglePreferences('hideReplyCount')"
-    >
-      {{ $t('settings.preferences.hide_reply_count') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideFollowerCount')"
-      @click="togglePreferences('hideFollowerCount')"
-    >
-      {{ $t('settings.preferences.hide_follower_count') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideUsernameEmojis')"
-      @click="togglePreferences('hideUsernameEmojis')"
-    >
-      {{ $t("settings.preferences.hide_username_emojis") }}
-      <template #description>
-        {{ $t('settings.preferences.hide_username_emojis_description') }}
-      </template>
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideNews')"
-      @click="togglePreferences('hideNews')"
-    >
-      {{ $t("settings.preferences.hide_news") }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'zenMode')"
-      @click="togglePreferences('zenMode')"
-    >
-      {{ $t("settings.preferences.zen_mode") }}
-      <template #description>
-        {{ $t('settings.preferences.zen_mode_description') }}
-      </template>
-    </SettingsToggleItem>
-    <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
-      <div i-ri-flask-line />
-      {{ $t('settings.preferences.title') }}
-    </h2>
-    <!-- Embedded Media -->
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'experimentalEmbeddedMedia')"
-      @click="togglePreferences('experimentalEmbeddedMedia')"
-    >
-      {{ $t('settings.preferences.embedded_media') }}
-      <template #description>
-        {{ $t('settings.preferences.embedded_media_description') }}
-      </template>
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'experimentalVirtualScroller')"
-      @click="togglePreferences('experimentalVirtualScroller')"
-    >
-      {{ $t('settings.preferences.virtual_scroll') }}
-      <template #description>
-        {{ $t('settings.preferences.virtual_scroll_description') }}
-      </template>
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'experimentalGitHubCards')"
-      @click="togglePreferences('experimentalGitHubCards')"
-    >
-      {{ $t('settings.preferences.github_cards') }}
-      <template #description>
-        {{ $t('settings.preferences.github_cards_description') }}
-      </template>
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'experimentalUserPicker')"
-      @click="togglePreferences('experimentalUserPicker')"
-    >
-      {{ $t('settings.preferences.user_picker') }}
-      <template #description>
-        {{ $t('settings.preferences.user_picker_description') }}
-      </template>
-    </SettingsToggleItem>
+    <section>
+      <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center sr-only>
+        <span aria-hidden="true" block i-ri-equalizer-line />
+        {{ $t('settings.preferences.label') }}
+      </h2>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideAltIndicatorOnPosts')"
+        @click="togglePreferences('hideAltIndicatorOnPosts')"
+      >
+        {{ $t('settings.preferences.hide_alt_indi_on_posts') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideGifIndicatorOnPosts')"
+        @click="togglePreferences('hideGifIndicatorOnPosts')"
+      >
+        {{ $t('settings.preferences.hide_gif_indi_on_posts') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideAccountHoverCard')"
+        @click="togglePreferences('hideAccountHoverCard')"
+      >
+        {{ $t('settings.preferences.hide_account_hover_card') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideTagHoverCard')"
+        @click="togglePreferences('hideTagHoverCard')"
+      >
+        {{ $t('settings.preferences.hide_tag_hover_card') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'enableAutoplay')"
+        :disabled="getPreferences(userSettings, 'enableDataSaving')"
+        @click="togglePreferences('enableAutoplay')"
+      >
+        {{ $t('settings.preferences.enable_autoplay') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'optimizeForLowPerformanceDevice')"
+        @click="togglePreferences('optimizeForLowPerformanceDevice')"
+      >
+        {{ $t('settings.preferences.optimize_for_low_performance_device') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'enableDataSaving')"
+        @click="togglePreferences('enableDataSaving')"
+      >
+        {{ $t("settings.preferences.enable_data_saving") }}
+        <template #description>
+          {{ $t("settings.preferences.enable_data_saving_description") }}
+        </template>
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'enablePinchToZoom')"
+        @click="togglePreferences('enablePinchToZoom')"
+      >
+        {{ $t('settings.preferences.enable_pinch_to_zoom') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'useStarFavoriteIcon')"
+        @click="togglePreferences('useStarFavoriteIcon')"
+      >
+        {{ $t('settings.preferences.use_star_favorite_icon') }}
+      </SettingsToggleItem>
+    </section>
+    <section>
+      <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
+        <span aria-hidden="true" block i-ri-hearts-line />
+        {{ $t('settings.preferences.wellbeing') }}
+      </h2>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'grayscaleMode')"
+        @click="togglePreferences('grayscaleMode')"
+      >
+        {{ $t('settings.preferences.grayscale_mode') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideBoostCount')"
+        @click="togglePreferences('hideBoostCount')"
+      >
+        {{ $t('settings.preferences.hide_boost_count') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideFavoriteCount')"
+        @click="togglePreferences('hideFavoriteCount')"
+      >
+        {{ $t('settings.preferences.hide_favorite_count') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideReplyCount')"
+        @click="togglePreferences('hideReplyCount')"
+      >
+        {{ $t('settings.preferences.hide_reply_count') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideFollowerCount')"
+        @click="togglePreferences('hideFollowerCount')"
+      >
+        {{ $t('settings.preferences.hide_follower_count') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideUsernameEmojis')"
+        @click="togglePreferences('hideUsernameEmojis')"
+      >
+        {{ $t("settings.preferences.hide_username_emojis") }}
+        <template #description>
+          {{ $t('settings.preferences.hide_username_emojis_description') }}
+        </template>
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideNews')"
+        @click="togglePreferences('hideNews')"
+      >
+        {{ $t("settings.preferences.hide_news") }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'zenMode')"
+        @click="togglePreferences('zenMode')"
+      >
+        {{ $t("settings.preferences.zen_mode") }}
+        <template #description>
+          {{ $t('settings.preferences.zen_mode_description') }}
+        </template>
+      </SettingsToggleItem>
+    </section>
+    <section>
+      <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
+        <span aria-hidden="true" block i-ri-flask-line />
+        {{ $t('settings.preferences.title') }}
+      </h2>
+      <!-- Embedded Media -->
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'experimentalEmbeddedMedia')"
+        @click="togglePreferences('experimentalEmbeddedMedia')"
+      >
+        {{ $t('settings.preferences.embedded_media') }}
+        <template #description>
+          {{ $t('settings.preferences.embedded_media_description') }}
+        </template>
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'experimentalVirtualScroller')"
+        @click="togglePreferences('experimentalVirtualScroller')"
+      >
+        {{ $t('settings.preferences.virtual_scroll') }}
+        <template #description>
+          {{ $t('settings.preferences.virtual_scroll_description') }}
+        </template>
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'experimentalGitHubCards')"
+        @click="togglePreferences('experimentalGitHubCards')"
+      >
+        {{ $t('settings.preferences.github_cards') }}
+        <template #description>
+          {{ $t('settings.preferences.github_cards_description') }}
+        </template>
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'experimentalUserPicker')"
+        @click="togglePreferences('experimentalUserPicker')"
+      >
+        {{ $t('settings.preferences.user_picker') }}
+        <template #description>
+          {{ $t('settings.preferences.user_picker_description') }}
+        </template>
+      </SettingsToggleItem>
+    </section>
   </MainContent>
 </template>