commit: a08378253fe8ca72d178b19c5d45da21100cfe71
parent 2635e24679b8f3492ba9056f35d0964749eb9867
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Sat, 28 Jan 2023 22:59:40 +0000
Merge branch 'tusooa/topbar-alttext' into 'develop'
Accessibility fixes for panel headers/top bar
See merge request pleroma/pleroma-fe!1772
Diffstat:
5 files changed, 82 insertions(+), 24 deletions(-)
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
@@ -20,6 +20,7 @@
class="logo"
:to="{ name: 'root' }"
:style="logoBgStyle"
+ :title="sitename"
>
<div
class="mask"
@@ -38,13 +39,13 @@
/>
<button
class="button-unstyled nav-icon"
+ :title="$t('nav.preferences')"
@click.stop="openSettingsModal"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="cog"
- :title="$t('nav.preferences')"
/>
</button>
<a
@@ -52,26 +53,26 @@
href="/pleroma/admin/#/login-pleroma"
class="nav-icon"
target="_blank"
+ :title="$t('nav.administration')"
@click.stop
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="tachometer-alt"
- :title="$t('nav.administration')"
/>
</a>
<span class="spacer" />
<button
v-if="currentUser"
class="button-unstyled nav-icon"
+ :title="$t('login.logout')"
@click.stop.prevent="logout"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="sign-out-alt"
- :title="$t('login.logout')"
/>
</button>
</div>
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -6,36 +6,51 @@
:trigger-attrs="{ title: $t('timeline.quick_filter_settings') }"
>
<template #content>
- <div class="dropdown-menu">
- <div v-if="loggedIn">
+ <div
+ class="dropdown-menu"
+ role="menu"
+ >
+ <div
+ v-if="loggedIn"
+ role="group"
+ >
<button
v-if="!conversation"
class="button-default dropdown-item"
+ :aria-checked="replyVisibilityAll"
+ role="menuitemradio"
@click="replyVisibilityAll = true"
>
<span
class="menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityAll }"
+ :aria-hidden="true"
/>{{ $t('settings.reply_visibility_all') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
+ :aria-checked="replyVisibilityFollowing"
+ role="menuitemradio"
@click="replyVisibilityFollowing = true"
>
<span
class="menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
+ :aria-hidden="true"
/>{{ $t('settings.reply_visibility_following_short') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
+ :aria-checked="replyVisibilitySelf"
+ role="menuitemradio"
@click="replyVisibilitySelf = true"
>
<span
class="menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
+ :aria-hidden="true"
/>{{ $t('settings.reply_visibility_self_short') }}
</button>
<div
@@ -46,33 +61,43 @@
</div>
<button
class="button-default dropdown-item"
+ role="menuitemcheckbox"
+ :aria-checked="muteBotStatuses"
@click="muteBotStatuses = !muteBotStatuses"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': muteBotStatuses }"
+ :aria-hidden="true"
/>{{ $t('settings.mute_bot_posts') }}
</button>
<button
class="button-default dropdown-item"
+ role="menuitemcheckbox"
+ :aria-checked="hideMedia"
@click="hideMedia = !hideMedia"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMedia }"
+ :aria-hidden="true"
/>{{ $t('settings.hide_media_previews') }}
</button>
<button
class="button-default dropdown-item"
+ role="menuitemcheckbox"
+ :aria-checked="hideMutedPosts"
@click="hideMutedPosts = !hideMutedPosts"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMutedPosts }"
+ :aria-hidden="true"
/>{{ $t('settings.hide_all_muted_posts') }}
</button>
<button
class="button-default dropdown-item dropdown-item-icon"
+ role="menuitem"
@click="openTab('filtering')"
>
<FAIcon icon="font" />{{ $t('settings.word_filter_and_more') }}
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
@@ -6,60 +6,87 @@
:trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
>
<template #content>
- <div class="dropdown-menu">
- <button
- class="button-default dropdown-item"
- @click="conversationDisplay = 'tree'"
- >
- <span
- class="menu-checkbox -radio"
- :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
- /><FAIcon icon="folder-tree" /> {{ $t('settings.conversation_display_tree_quick') }}
- </button>
- <button
- class="button-default dropdown-item"
- @click="conversationDisplay = 'linear'"
- >
- <span
- class="menu-checkbox -radio"
- :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
- /><FAIcon icon="list" /> {{ $t('settings.conversation_display_linear_quick') }}
- </button>
+ <div
+ class="dropdown-menu"
+ role="menu"
+ >
+ <div role="group">
+ <button
+ class="button-default dropdown-item"
+ :aria-checked="conversationDisplay === 'tree'"
+ role="menuitemradio"
+ @click="conversationDisplay = 'tree'"
+ >
+ <span
+ class="menu-checkbox -radio"
+ :aria-hidden="true"
+ :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
+ /><FAIcon
+ icon="folder-tree"
+ :aria-hidden="true"
+ /> {{ $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
role="separator"
class="dropdown-divider"
/>
<button
class="button-default dropdown-item"
+ role="menuitemcheckbox"
+ :aria-checked="showUserAvatars"
@click="showUserAvatars = !showUserAvatars"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': showUserAvatars }"
+ :aria-hidden="true"
/>{{ $t('settings.mention_link_show_avatar_quick') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
+ role="menuitemcheckbox"
+ :aria-checked="autoUpdate"
@click="autoUpdate = !autoUpdate"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': autoUpdate }"
+ :aria-hidden="true"
/>{{ $t('settings.auto_update') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
+ role="menuitemcheckbox"
+ :aria-checked="collapseWithSubjects"
@click="collapseWithSubjects = !collapseWithSubjects"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': collapseWithSubjects }"
+ :aria-hidden="true"
/>{{ $t('settings.collapse_subject') }}
</button>
<button
class="button-default dropdown-item dropdown-item-icon"
+ role="menuitem"
@click="openTab('general')"
>
<FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
@@ -8,6 +8,7 @@
class="button-unstyled nav-icon"
:title="$t('nav.search')"
type="button"
+ :aria-expanded="!hidden"
@click.prevent.stop="toggleHidden"
>
<FAIcon
@@ -29,6 +30,7 @@
<button
class="button-default search-button"
type="submit"
+ :title="$t('nav.search')"
@click="find(searchTerm)"
>
<FAIcon
@@ -39,6 +41,8 @@
<button
class="button-unstyled cancel-search"
type="button"
+ :title="$t('nav.search_close')"
+ :aria-expanded="!hidden"
@click.prevent.stop="toggleHidden"
>
<FAIcon
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -176,6 +176,7 @@
"bookmarks": "Bookmarks",
"user_search": "User Search",
"search": "Search",
+ "search_close": "Close search bar",
"who_to_follow": "Who to follow",
"preferences": "Preferences",
"timelines": "Timelines",
