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

Merge branch 'tusooa/topbar-alttext' into 'develop' 

Accessibility fixes for panel headers/top bar

See merge request pleroma/pleroma-fe!1772
This commit is contained in:
HJ 2023-01-28 22:59:40 +00:00
parent 2635e24679 1ab958ba6b
commit a08378253f
5 changed files with 82 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/desktop_nav/desktop_nav.vue
View File

@ -20,6 +20,7 @@
class="logo" class="logo"
:to="{ name: 'root' }" :to="{ name: 'root' }"
:style="logoBgStyle" :style="logoBgStyle"
:title="sitename"
> >
<div <div
class="mask" class="mask"
@ -38,13 +39,13 @@
/> />
<button <button
class="button-unstyled nav-icon" class="button-unstyled nav-icon"
:title="$t('nav.preferences')"
@click.stop="openSettingsModal" @click.stop="openSettingsModal"
> >
<FAIcon <FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="cog" icon="cog"
:title="$t('nav.preferences')"
/> />
</button> </button>
<a <a
@ -52,26 +53,26 @@
href="/pleroma/admin/#/login-pleroma" href="/pleroma/admin/#/login-pleroma"
class="nav-icon" class="nav-icon"
target="_blank" target="_blank"
:title="$t('nav.administration')"
@click.stop @click.stop
> >
<FAIcon <FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="tachometer-alt" icon="tachometer-alt"
:title="$t('nav.administration')"
/> />
</a> </a>
<span class="spacer" /> <span class="spacer" />
<button <button
v-if="currentUser" v-if="currentUser"
class="button-unstyled nav-icon" class="button-unstyled nav-icon"
:title="$t('login.logout')"
@click.stop.prevent="logout" @click.stop.prevent="logout"
> >
<FAIcon <FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="sign-out-alt" icon="sign-out-alt"
:title="$t('login.logout')"
/> />
</button> </button>
</div> </div>

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') }}

4
src/components/search_bar/search_bar.vue
View File

@ -8,6 +8,7 @@
class="button-unstyled nav-icon" class="button-unstyled nav-icon"
:title="$t('nav.search')" :title="$t('nav.search')"
type="button" type="button"
:aria-expanded="!hidden"
@click.prevent.stop="toggleHidden" @click.prevent.stop="toggleHidden"
> >
<FAIcon <FAIcon
@ -29,6 +30,7 @@
<button <button
class="button-default search-button" class="button-default search-button"
type="submit" type="submit"
:title="$t('nav.search')"
@click="find(searchTerm)" @click="find(searchTerm)"
> >
<FAIcon <FAIcon
@ -39,6 +41,8 @@
<button <button
class="button-unstyled cancel-search" class="button-unstyled cancel-search"
type="button" type="button"
:title="$t('nav.search_close')"
:aria-expanded="!hidden"
@click.prevent.stop="toggleHidden" @click.prevent.stop="toggleHidden"
> >
<FAIcon <FAIcon

1
src/i18n/en.json
View File

@ -176,6 +176,7 @@
"bookmarks": "Bookmarks", "bookmarks": "Bookmarks",
"user_search": "User Search", "user_search": "User Search",
"search": "Search", "search": "Search",
"search_close": "Close search bar",
"who_to_follow": "Who to follow", "who_to_follow": "Who to follow",
"preferences": "Preferences", "preferences": "Preferences",
"timelines": "Timelines", "timelines": "Timelines",