-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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
Conversation
Resync with master fork
Adds keyboard navigation to dropdown menu
Prevents ESC key propagation when closing dropdown, incase dropdown is inside modal
Added tabindex of -1
Makes dropdown menu behave more like a native `select` or OS menu. Based on https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js
There is a bit of common code between |
Seems working 👍 Do you prefer to do refactors into mixin before merge? |
I could pull out some of the repeated code into a mixin. I'll work on it this evening. |
Breaking change: Prop `rightAlignment` is now just `right`, aligning with `b-dropdown.`s props
I've refactored the Take a look and see what you think. |
Seems Nice ;) Will locally test functionality tomorrow and release soon :) |
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:.dropdown-item
or.dropdown-header
is focused (.dropdown-divider
s are ignored)ESC
while the menu is open/focused will close the menu and return focus to the menu toggle button.TAB
while the menu is open/focused will close the menu and go to the next (or previous, if theSHIFT-TAB
is pressed) focusable item on the page.dropdown-item
s now have the ARIArole="menuitem"
The
.sr-only
toggle text (for split dropdowns) can now be set via the proptoggleText
on<b-dropdown>
for better language/locale support. Defaults to "Toggle Dropdown".Notes:
dropdown-header
s 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:disabled
attribute. If you had a disabled menu, clicking the button would still open it. This is now fixedPlease review at your leisure.