krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 15:17:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve a11y for the sync links

Browse Source 
Add `role="link"` so it shows up as a link in VoiceOver.

Add `tabindex="0" so it can receive keyboard focus, and a keyup handler
for the enter key so it will respond to `<Enter>` keypresses.

Add `aria-label="$t('sync')"` to add text for non-visual users.

Add aria-label to mobile sync icon link.
This commit is contained in:
Ian Oxley
2018-11-23 20:38:06 +00:00
parent 9a2dbace30
commit 4718e5e5ea
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@ div
.svg-icon.gryphon.d-xs-block.d-xl-none .svg-icon.gryphon.d-xs-block.d-xl-none
b-nav-toggle(target='menu_collapse').menu-toggle b-nav-toggle(target='menu_collapse').menu-toggle
.quick-menu.mobile-only.form-inline .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") .top-menu-icon.svg-icon(v-html="icons.sync")
notification-menu.item-with-icon notification-menu.item-with-icon
user-dropdown.item-with-icon user-dropdown.item-with-icon
@@ -68,7 +68,7 @@ div
.top-menu-icon.svg-icon(:aria-label="$t('gold')", 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}} span {{Math.floor(user.stats.gp * 100) / 100}}
.form-inline.desktop-only .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") .top-menu-icon.svg-icon(v-html="icons.sync")
notification-menu.item-with-icon notification-menu.item-with-icon
user-dropdown.item-with-icon user-dropdown.item-with-icon