Replace button tag with ARIA button role

Add `role`, `aria-pressed`, `tabindex`, and keypress handlers, and
remove the `<button>` tag.

Add `isPressed` computed function. Use this to set the value of
`aria-pressed`.
This commit is contained in:
Ian Oxley
2018-11-26 22:34:15 +00:00
parent 53d8d2fc6a
commit 6b5173ecbf

View File

@@ -3,8 +3,8 @@ 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}")
button.habitica-menu-dropdown-toggle
.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}")
slot(name="dropdown-content")
@@ -66,6 +66,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);