generalize dropdowns / drop role="menu" #16571
Conversation
as role="menu" is a very specific (and strict) ARIA pattern for desktop-like application menus, and our dropdowns are often used as pure navigation dropdowns, this change abandons ARIA menus for a more open-ended and light-weight approach (see http://heydonworks.com/practical_aria_examples/#submenus and http://www.w3.org/WAI/tutorials/menus/flyout/#improve-screen-reader-support-using-wai-aria) note that in dropdown.js, switched to now target ``.dropdown-menu`` instead of ``role["menu"]`` - this also prevents bootstrap scripts from "bleeding" into non-bootstrap components on the same page. also removed the ``role=["listbox"]`` part, which appears to be vestigial/unused (only place in bootstrap that uses that role are carousels, and their key handling is done separately)
|
Tests passed. Automated cross-browser testing via Sauce Labs and Travis CI shows that the JavaScript changes in this pull request are: CONFIRMED Commit: 5fd7bc1 (Please note that this is a fully automated comment.) |
generalize dropdowns / drop role="menu"
|
to be clear, the dropdown.js script will still work if a dev manually wants to add all the |
|
BTW: Some description on the challenges of using application menus are described on this W3C Menus tutorial page. |
|
Nice! Love the simpler markup without all those attributes. Also, don't forget to at this to the ship list @patrickhlauke <3. |
|
@mdo already added to shiplist after i merged it :) |
|
Oh shit what, totally missed that reference <3. Sorry! |
|
👍 |
as
role="menu"is a very specific (and strict) ARIA pattern fordesktop-like application menus, and our dropdowns are often used
as pure navigation dropdowns, this change abandons ARIA menus for
a more open-ended and light-weight approach
(see http://heydonworks.com/practical_aria_examples/#submenus and
http://www.w3.org/WAI/tutorials/menus/flyout/#improve-screen-reader-support-using-wai-aria)
note that in dropdown.js, switched to now target
.dropdown-menuinstead of
role["menu"]- this also prevents bootstrap scriptsfrom "bleeding" into non-bootstrap components on the same page.
also removed the
role=["listbox"]part, which appears to bevestigial/unused (only place in bootstrap that uses that
role are carousels, and their key handling is done separately)
for further context, see also discussion on #16179