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 dropdown menu

Browse Source 
Add role="button" to make the component report itself as a button.

Add tabindex so the menu toggle can receive keyboard focus.

Add keydown handlers for `<Enter>` and `<Space>` so the dropdown menu
toggle responds to keyboard input.

Set the aria-pressed attribute to true if the menu is open, or false if
it is closed.
This commit is contained in:
Ian Oxley
2018-11-23 22:20:37 +00:00
parent 4718e5e5ea
commit 5753d3e648
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
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"> <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 .habitica-menu-dropdown-toggle
slot(name="dropdown-toggle") slot(name="dropdown-toggle")
.dropdown-menu(:class="{'dropdown-menu-right': right}") .dropdown-menu(:class="{'dropdown-menu-right': right}")
@@ -66,6 +66,9 @@ export default {
if (this.openStatus !== undefined) return this.openStatus === 1 ? true : false; if (this.openStatus !== undefined) return this.openStatus === 1 ? true : false;
return this.isDropdownOpen; return this.isDropdownOpen;
}, },
isPressed () {
return (this.isOpen ? 'true' : 'false');
}
}, },
mounted () { mounted () {
document.documentElement.addEventListener('click', this._clickOutListener); document.documentElement.addEventListener('click', this._clickOutListener);