krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-10-26 10:42:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10865 from ianoxley/navbar-a11y-alt-text

Browse Source 
Add text alternatives for navbar items
This commit is contained in:
Matteo Pagliazzi
2019-05-26 11:59:04 +02:00
committed by GitHub
parent 7baa7427a0 6fba71ea2c
commit 1a97d69edd
4 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
website/client/components/header/menu.vue
View File

@@ -6,12 +6,12 @@ div
report-flag-modal
send-gems-modal
b-navbar.topbar.navbar-inverse.static-top(toggleable="lg", type="dark", :class="navbarZIndexClass")
b-navbar-brand.brand
b-navbar-brand.brand(aria-label="Habitica")
.logo.svg-icon.d-none.d-xl-block(v-html="icons.logo")
.svg-icon.gryphon.d-xs-block.d-xl-none
b-navbar-toggle(target='menu_collapse').menu-toggle
.quick-menu.mobile-only.form-inline
a.item-with-icon(@click="sync", v-b-tooltip.hover.bottom="$t('sync')")
a.item-with-icon(@click="sync", v-b-tooltip.hover.bottom="$t('sync')", :aria-label="$t('sync')")
.top-menu-icon.svg-icon(v-html="icons.sync")
notification-menu.item-with-icon
user-dropdown.item-with-icon
@@ -64,13 +64,13 @@ div
.top-menu-icon.svg-icon(v-html="icons.hourglasses", v-b-tooltip.hover.bottom="$t('mysticHourglassesTooltip')")
span {{ userHourglasses }}
.item-with-icon
.top-menu-icon.svg-icon.gem(v-html="icons.gem", @click='showBuyGemsModal("gems")', v-b-tooltip.hover.bottom="$t('gems')")
a.top-menu-icon.svg-icon.gem(:aria-label="$t('gems')", href="#buy-gems" v-html="icons.gem", @click.prevent='showBuyGemsModal("gems")', v-b-tooltip.hover.bottom="$t('gems')")
span {{userGems}}
.item-with-icon.gold
.top-menu-icon.svg-icon(v-html="icons.gold", v-b-tooltip.hover.bottom="$t('gold')")
.top-menu-icon.svg-icon(:aria-label="$t('gold')", v-html="icons.gold", v-b-tooltip.hover.bottom="$t('gold')")
span {{Math.floor(user.stats.gp * 100) / 100}}
.form-inline.desktop-only
a.item-with-icon(@click="sync", v-b-tooltip.hover.bottom="$t('sync')")
a.item-with-icon(@click="sync", @keyup.enter="sync", role="link", :aria-label="$t('sync')", tabindex="0", v-b-tooltip.hover.bottom="$t('sync')")
.top-menu-icon.svg-icon(v-html="icons.sync")
notification-menu.item-with-icon
user-dropdown.item-with-icon
@@ -290,6 +290,7 @@ div
margin-right: 24px;
}
&:focus /deep/ .top-menu-icon.svg-icon,
&:hover /deep/ .top-menu-icon.svg-icon {
color: $white;
}

2
website/client/components/header/notificationsDropdown.vue
View File

@@ -1,7 +1,7 @@
<template lang="pug">
menu-dropdown.item-notifications(:right="true", @toggled="handleOpenStatusChange", :openStatus="openStatus")
div(slot="dropdown-toggle")
div(v-b-tooltip.hover.bottom="$t('notifications')")
div(:aria-label="$t('notifications')", v-b-tooltip.hover.bottom="$t('notifications')")
message-count(
v-if='notificationsCount > 0',
:count="notificationsCount",

2
website/client/components/header/userDropdown.vue
View File

@@ -1,7 +1,7 @@
<template lang="pug">
menu-dropdown.item-user(:right="true")
div(slot="dropdown-toggle")
div(v-b-tooltip.hover.bottom="$t('user')")
div(:aria-label="$t('user')", v-b-tooltip.hover.bottom="$t('user')")
message-count(v-if='user.inbox.newMessages > 0', :count="user.inbox.newMessages", :top="true")
.top-menu-icon.svg-icon.user(v-html="icons.user")
.user-dropdown(slot="dropdown-content")

17
website/client/components/ui/customMenuDropdown.vue
View File

@@ -3,7 +3,7 @@ A simplified dropdown component that doesn't rely on buttons as toggles like bo
-->
<template lang="pug">
.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", :class="{open: isOpen}")
.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", @keypress.enter.space.stop.prevent="toggleDropdown()", role="button", tabindex="0", :class="{open: isOpen}", :aria-pressed="isPressed")
.habitica-menu-dropdown-toggle
slot(name="dropdown-toggle")
.dropdown-menu(:class="{'dropdown-menu-right': right}")
@@ -12,10 +12,16 @@ A simplified dropdown component that doesn't rely on buttons as toggles like bo
<style lang="scss">
@import '~client/assets/scss/colors.scss';
.habitica-menu-dropdown {
&:hover,
&:focus { // NB focus styles match the hover styles for .svg-icon
outline: none;
}
.habitica-menu-dropdown.open {
.habitica-menu-dropdown-toggle .svg-icon {
color: $white !important;
&.open {
.habitica-menu-dropdown-toggle .svg-icon {
color: $white !important;
}
}
}
</style>
@@ -66,6 +72,9 @@ export default {
if (this.openStatus !== undefined) return this.openStatus === 1 ? true : false;
return this.isDropdownOpen;
},
isPressed () {
return this.isOpen ? 'true' : 'false';
},
},
mounted () {
document.documentElement.addEventListener('click', this._clickOutListener);