teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
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

324
pages/settings/preferences/index.vue
View file

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