feat(a11y): add semantic markup to preference settings (#2811)

pages/settings/preferences/index.vue

@@ -15,6 +15,11 @@ const userSettings = useUserSettings()
         {{ $t('settings.preferences.label') }}
       </h1>
     </template>
+    <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')"
@@ -73,8 +78,10 @@ const userSettings = useUserSettings()
       >
         {{ $t('settings.preferences.use_star_favorite_icon') }}
       </SettingsToggleItem>
+    </section>
+    <section>
       <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
-      <div i-ri-hearts-line />
+        <span aria-hidden="true" block i-ri-hearts-line />
         {{ $t('settings.preferences.wellbeing') }}
       </h2>
       <SettingsToggleItem
@@ -131,8 +138,10 @@ const userSettings = useUserSettings()
           {{ $t('settings.preferences.zen_mode_description') }}
         </template>
       </SettingsToggleItem>
+    </section>
+    <section>
       <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
-      <div i-ri-flask-line />
+        <span aria-hidden="true" block i-ri-flask-line />
         {{ $t('settings.preferences.title') }}
       </h2>
       <!-- Embedded Media -->
@@ -172,5 +181,6 @@ const userSettings = useUserSettings()
           {{ $t('settings.preferences.user_picker_description') }}
         </template>
       </SettingsToggleItem>
+    </section>
   </MainContent>
 </template>