paypal / bootstrap-accessibility-plugin

Accessibility Plugin for Bootstrap 3 and Bootstrap 3 as SubModule
http://paypal.github.io/bootstrap-accessibility-plugin/demo.html
BSD 3-Clause "New" or "Revised" License
789 stars 189 forks source link

Inappropriate role attributes in dropdowns #101

Closed tmcgill closed 8 years ago

tmcgill commented 8 years ago

dropdown.js, lines 9 and 12:

The addition of role="menu" to the <ul> element and role="menuitem" to the <a> element makes sense when Bootstrap dropdowns are used within a web app and the dropdown items provide functions within the app. However, when dropdowns are used in navigational structures role="menu" and role="menuitem" aren't appropriate. Also, adding role="presentation" to each <li> element isn't necessary because the native <li> role already has the correct semantics.

I recommend removing these attribute injections so that web developers using the accessibility plugin can select the correct roles for their usage needs.

mpnkhan commented 8 years ago

We think in most of the cases which we noticed, the developers simply try to copy paste the bootstrap code and hence, missing the Aria roles. The number of ARIA unaware developers are far more than the people who use it in navigational structure. But the correct way to fix would be to use different classes when used in navigation and when used it as dropdown, so the plugin code could create an exception of roles. Like tab extension .nav-pills class?

Also could you point me to the example of dropdowns are used in navigational structures with appropriate Aria roles without plugin?