Skip to content

Dropdown ARIA keyboard nav #274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 32 commits into from
Apr 24, 2017
Merged

Dropdown ARIA keyboard nav #274

merged 32 commits into from
Apr 24, 2017

Conversation

tmorehouse
Copy link
Member

Adds in keyboard navigation to dropdown menus (and navbar dropdowns), suitable for both keyboard-only users and screen reader-users.

Keyboard handling based on boostrap's V4 code for dropdown at:
https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js
and closely follows the W3 ARIA best practices standard:
https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_general_within

This works similar to native <select> elements and OS menus:

  • When the menu is opened, the first .dropdown-item or .dropdown-header is focused (.dropdown-dividers are ignored)
  • Pressing cursor up/down will navigate the enabled menu items. Disabled items will be skipped.
  • Pressing ESC while the menu is open/focused will close the menu and return focus to the menu toggle button.
  • Hitting TAB while the menu is open/focused will close the menu and go to the next (or previous, if the SHIFT-TAB is pressed) focusable item on the page.

dropdown-items now have the ARIA role="menuitem"

The .sr-only toggle text (for split dropdowns) can now be set via the prop toggleText on <b-dropdown> for better language/locale support. Defaults to "Toggle Dropdown".

Notes:

  • The original bootstrap V4 code ignores dropdown-headers for keyboard navigation, although I have added them in as otherwise they are not "visible" to screen reader users. Headers might provide more context to the items below them:
<div class="dropdown-menu" role="menu">
  <h6 class="dropdown-header">User</h6>
  <a class="dropdown-item" href="#">Delete</a>
  <a class="dropdown-item" href="#">Show</a>
  <h6 class="dropdown-header">Group</h6>
  <a class="dropdown-item" href="#">Delete</a>
  <a class="dropdown-item" href="#">Show</a>
</div>
  • The original Bootstrap V4 dropdown code didn't automatically focus the first item in the dropdown. This PR diverges from Bootstrap's code and more closely follows the W3 best practices.
  • Bug fix: Menu toggle buttons now respect the disabled attribute. If you had a disabled menu, clicking the button would still open it. This is now fixed

Please review at your leisure.

@tmorehouse
Copy link
Member Author

There is a bit of common code between dropdown.vue and nav-item-dropdown.vue that might be better moved out to a mixin maybe?

@pi0
Copy link
Member

pi0 commented Apr 24, 2017

Seems working 👍 Do you prefer to do refactors into mixin before merge?

@tmorehouse
Copy link
Member Author

I could pull out some of the repeated code into a mixin. I'll work on it this evening.

@tmorehouse
Copy link
Member Author

I've refactored the b-dropdown and b-nav-item-dropdown to use a mixin for the common code.

Take a look and see what you think.

@pi0
Copy link
Member

pi0 commented Apr 24, 2017

Seems Nice ;) Will locally test functionality tomorrow and release soon :)

@pi0 pi0 merged commit d1a676a into bootstrap-vue:master Apr 24, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants