moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make quick settings menus more accessible

This commit is contained in:
tusooa 2023-01-21 15:30:23 -05:00
parent 5243632678
commit 1ab958ba6b
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
2 changed files with 73 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/quick_filter_settings/quick_filter_settings.vue
View File

@ -6,36 +6,51 @@
:trigger-attrs="{ title: $t('timeline.quick_filter_settings') }" :trigger-attrs="{ title: $t('timeline.quick_filter_settings') }"
> >
<template #content> <template #content>
<div class="dropdown-menu"> <div
<div v-if="loggedIn"> class="dropdown-menu"
role="menu"
>
<div
v-if="loggedIn"
role="group"
>
<button <button
v-if="!conversation" v-if="!conversation"
class="button-default dropdown-item" class="button-default dropdown-item"
:aria-checked="replyVisibilityAll"
role="menuitemradio"
@click="replyVisibilityAll = true" @click="replyVisibilityAll = true"
> >
<span <span
class="menu-checkbox -radio" class="menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityAll }" :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_all') }} />{{ $t('settings.reply_visibility_all') }}
</button> </button>
<button <button
v-if="!conversation" v-if="!conversation"
class="button-default dropdown-item" class="button-default dropdown-item"
:aria-checked="replyVisibilityFollowing"
role="menuitemradio"
@click="replyVisibilityFollowing = true" @click="replyVisibilityFollowing = true"
> >
<span <span
class="menu-checkbox -radio" class="menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityFollowing }" :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_following_short') }} />{{ $t('settings.reply_visibility_following_short') }}
</button> </button>
<button <button
v-if="!conversation" v-if="!conversation"
class="button-default dropdown-item" class="button-default dropdown-item"
:aria-checked="replyVisibilitySelf"
role="menuitemradio"
@click="replyVisibilitySelf = true" @click="replyVisibilitySelf = true"
> >
<span <span
class="menu-checkbox -radio" class="menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilitySelf }" :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_self_short') }} />{{ $t('settings.reply_visibility_self_short') }}
</button> </button>
<div <div
@ -46,33 +61,43 @@
</div> </div>
<button <button
class="button-default dropdown-item" class="button-default dropdown-item"
role="menuitemcheckbox"
:aria-checked="muteBotStatuses"
@click="muteBotStatuses = !muteBotStatuses" @click="muteBotStatuses = !muteBotStatuses"
> >
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': muteBotStatuses }" :class="{ 'menu-checkbox-checked': muteBotStatuses }"
:aria-hidden="true"
/>{{ $t('settings.mute_bot_posts') }} />{{ $t('settings.mute_bot_posts') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="button-default dropdown-item"
role="menuitemcheckbox"
:aria-checked="hideMedia"
@click="hideMedia = !hideMedia" @click="hideMedia = !hideMedia"
> >
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMedia }" :class="{ 'menu-checkbox-checked': hideMedia }"
:aria-hidden="true"
/>{{ $t('settings.hide_media_previews') }} />{{ $t('settings.hide_media_previews') }}
</button> </button>
<button <button
class="button-default dropdown-item" class="button-default dropdown-item"
role="menuitemcheckbox"
:aria-checked="hideMutedPosts"
@click="hideMutedPosts = !hideMutedPosts" @click="hideMutedPosts = !hideMutedPosts"
> >
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMutedPosts }" :class="{ 'menu-checkbox-checked': hideMutedPosts }"
:aria-hidden="true"
/>{{ $t('settings.hide_all_muted_posts') }} />{{ $t('settings.hide_all_muted_posts') }}
</button> </button>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
role="menuitem"
@click="openTab('filtering')" @click="openTab('filtering')"
> >
<FAIcon icon="font" />{{ $t('settings.word_filter_and_more') }} <FAIcon icon="font" />{{ $t('settings.word_filter_and_more') }}

65
src/components/quick_view_settings/quick_view_settings.vue
View File

@ -6,60 +6,87 @@
:trigger-attrs="{ title: $t('timeline.quick_view_settings') }" :trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
> >
<template #content> <template #content>
<div class="dropdown-menu"> <div
<button class="dropdown-menu"
class="button-default dropdown-item" role="menu"
@click="conversationDisplay = 'tree'" >
> <div role="group">
<span <button
class="menu-checkbox -radio" class="button-default dropdown-item"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }" :aria-checked="conversationDisplay === 'tree'"
/><FAIcon icon="folder-tree" /> {{ $t('settings.conversation_display_tree_quick') }} role="menuitemradio"
</button> @click="conversationDisplay = 'tree'"
<button >
class="button-default dropdown-item" <span
@click="conversationDisplay = 'linear'" class="menu-checkbox -radio"
> :aria-hidden="true"
<span :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
class="menu-checkbox -radio" /><FAIcon
:class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }" icon="folder-tree"
/><FAIcon icon="list" /> {{ $t('settings.conversation_display_linear_quick') }} :aria-hidden="true"
</button> /> {{ $t('settings.conversation_display_tree_quick') }}
</button>
<button
class="button-default dropdown-item"
:aria-checked="conversationDisplay === 'linear'"
role="menuitemradio"
@click="conversationDisplay = 'linear'"
>
<span
class="menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
:aria-hidden="true"
/><FAIcon
icon="list"
:aria-hidden="true"
/> {{ $t('settings.conversation_display_linear_quick') }}
</button>
</div>
<div <div
role="separator" role="separator"
class="dropdown-divider" class="dropdown-divider"
/> />
<button <button
class="button-default dropdown-item" class="button-default dropdown-item"
role="menuitemcheckbox"
:aria-checked="showUserAvatars"
@click="showUserAvatars = !showUserAvatars" @click="showUserAvatars = !showUserAvatars"
> >
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': showUserAvatars }" :class="{ 'menu-checkbox-checked': showUserAvatars }"
:aria-hidden="true"
/>{{ $t('settings.mention_link_show_avatar_quick') }} />{{ $t('settings.mention_link_show_avatar_quick') }}
</button> </button>
<button <button
v-if="!conversation" v-if="!conversation"
class="button-default dropdown-item" class="button-default dropdown-item"
role="menuitemcheckbox"
:aria-checked="autoUpdate"
@click="autoUpdate = !autoUpdate" @click="autoUpdate = !autoUpdate"
> >
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': autoUpdate }" :class="{ 'menu-checkbox-checked': autoUpdate }"
:aria-hidden="true"
/>{{ $t('settings.auto_update') }} />{{ $t('settings.auto_update') }}
</button> </button>
<button <button
v-if="!conversation" v-if="!conversation"
class="button-default dropdown-item" class="button-default dropdown-item"
role="menuitemcheckbox"
:aria-checked="collapseWithSubjects"
@click="collapseWithSubjects = !collapseWithSubjects" @click="collapseWithSubjects = !collapseWithSubjects"
> >
<span <span
class="menu-checkbox" class="menu-checkbox"
:class="{ 'menu-checkbox-checked': collapseWithSubjects }" :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
:aria-hidden="true"
/>{{ $t('settings.collapse_subject') }} />{{ $t('settings.collapse_subject') }}
</button> </button>
<button <button
class="button-default dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
role="menuitem"
@click="openTab('general')" @click="openTab('general')"
> >
<FAIcon icon="wrench" />{{ $t('settings.more_settings') }} <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}