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:
commit
a08378253f
@ -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>
|
||||||
|
@ -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') }}
|
||||||
|
@ -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') }}
|
||||||
|
@ -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
|
||||||
|
@ -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",
|
||||||
|
Loading…
Reference in New Issue
Block a user