zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

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

zio/dev
Joaquín Sánchez 2024-04-21 09:14:12 +02:00 committed by GitHub
parent 57ff04853b
commit 77f0e2c2f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 167 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pages/settings/preferences/index.vue
View File

@ -15,6 +15,11 @@ const userSettings = useUserSettings()
{{ $t('settings.preferences.label') }} {{ $t('settings.preferences.label') }}
</h1> </h1>
</template> </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 <SettingsToggleItem
:checked="getPreferences(userSettings, 'hideAltIndicatorOnPosts')" :checked="getPreferences(userSettings, 'hideAltIndicatorOnPosts')"
@click="togglePreferences('hideAltIndicatorOnPosts')" @click="togglePreferences('hideAltIndicatorOnPosts')"
@ -73,8 +78,10 @@ const userSettings = useUserSettings()
> >
{{ $t('settings.preferences.use_star_favorite_icon') }} {{ $t('settings.preferences.use_star_favorite_icon') }}
</SettingsToggleItem> </SettingsToggleItem>
</section>
<section>
<h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center> <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') }} {{ $t('settings.preferences.wellbeing') }}
</h2> </h2>
<SettingsToggleItem <SettingsToggleItem
@ -131,8 +138,10 @@ const userSettings = useUserSettings()
{{ $t('settings.preferences.zen_mode_description') }} {{ $t('settings.preferences.zen_mode_description') }}
</template> </template>
</SettingsToggleItem> </SettingsToggleItem>
</section>
<section>
<h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center> <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') }} {{ $t('settings.preferences.title') }}
</h2> </h2>
<!-- Embedded Media --> <!-- Embedded Media -->
@ -172,5 +181,6 @@ const userSettings = useUserSettings()
{{ $t('settings.preferences.user_picker_description') }} {{ $t('settings.preferences.user_picker_description') }}
</template> </template>
</SettingsToggleItem> </SettingsToggleItem>
</section>
</MainContent> </MainContent>
</template> </template>