mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-14 01:24:19 +02:00
generalize dropdowns / drop role="menu"
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)
This commit is contained in:
Patrick H. Lauke
@@ -110,7 +110,7 @@
|
||||
}
|
||||
|
||||
var desc = ' li:not(.disabled):visible a'
|
||||
var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
|
||||
var $items = $parent.find('.dropdown-menu' + desc)
|
||||
|
||||
if (!$items.length) return
|
||||
|
||||
|
||||
@@ -186,7 +186,7 @@ $(function () {
|
||||
+ '<li><a href="#menu1">Menu 1</a></li>'
|
||||
+ '<li class="dropdown" id="testmenu">'
|
||||
+ '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>'
|
||||
+ '<ul class="dropdown-menu" role="menu">'
|
||||
+ '<ul class="dropdown-menu">'
|
||||
+ '<li><a href="#sub1">Submenu 1</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</li>'
|
||||
@@ -293,7 +293,7 @@ $(function () {
|
||||
var dropdownHTML = '<ul class="tabs">'
|
||||
+ '<li class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<ul class="dropdown-menu" role="menu">'
|
||||
+ '<ul class="dropdown-menu">'
|
||||
+ '<li><a href="#">Secondary link</a></li>'
|
||||
+ '<li><a href="#">Something else here</a></li>'
|
||||
+ '<li class="divider"/>'
|
||||
@@ -333,7 +333,7 @@ $(function () {
|
||||
var dropdownHTML = '<ul class="tabs">'
|
||||
+ '<li class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<ul class="dropdown-menu" role="menu">'
|
||||
+ '<ul class="dropdown-menu">'
|
||||
+ '<li class="disabled"><a href="#">Disabled link</a></li>'
|
||||
+ '<li><a href="#">Another link</a></li>'
|
||||
+ '</ul>'
|
||||
@@ -355,7 +355,7 @@ $(function () {
|
||||
assert.expect(1)
|
||||
var dropdownHTML = '<div class="btn-group">'
|
||||
+ '<button type="button" data-toggle="dropdown">Dropdown</button>'
|
||||
+ '<ul class="dropdown-menu" role="menu">'
|
||||
+ '<ul class="dropdown-menu">'
|
||||
+ '<li><input id="textField" type="text" /></li>'
|
||||
+ '</ul>'
|
||||
+ '</div>'
|
||||
@@ -374,7 +374,7 @@ $(function () {
|
||||
assert.expect(1)
|
||||
var dropdownHTML = '<div class="btn-group">'
|
||||
+ '<button type="button" data-toggle="dropdown">Dropdown</button>'
|
||||
+ '<ul class="dropdown-menu" role="menu">'
|
||||
+ '<ul class="dropdown-menu">'
|
||||
+ '<li><textarea id="textArea"></textarea></li>'
|
||||
+ '</ul>'
|
||||
+ '</div>'
|
||||
|
||||
@@ -36,35 +36,35 @@
|
||||
<div class="collapse navbar-collapse bs-example-js-navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="dropdown">
|
||||
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
|
||||
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" aria-labelledby="drop1">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
|
||||
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" aria-labelledby="drop2">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li id="fat-menu" class="dropdown">
|
||||
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
|
||||
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 3 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" aria-labelledby="drop3">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -75,23 +75,23 @@
|
||||
<ul class="nav nav-pills">
|
||||
<li class="active"><a href="#">Regular link</a></li>
|
||||
<li class="dropdown">
|
||||
<a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
|
||||
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
|
||||
<a id="drop4" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
|
||||
<ul id="menu1" class="dropdown-menu" aria-labelledby="drop4">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
|
||||
<a id="drop5" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul id="menu2" class="dropdown-menu" aria-labelledby="drop5">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -38,12 +38,12 @@
|
||||
<li class=""><a href="#fat">@fat</a></li>
|
||||
<li class=""><a href="#mdo">@mdo</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li class=""><a href="#one" tabindex="-1">one</a></li>
|
||||
<li><a href="#two" tabindex="-1">two</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#three" tabindex="-1">three</a></li>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class=""><a href="#one">one</a></li>
|
||||
<li><a href="#two">two</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#three">three</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -38,10 +38,10 @@
|
||||
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
|
||||
<li><a href="#profile" data-toggle="tab">Profile</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
|
||||
<li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
|
||||
<li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
|
||||
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" aria-labelledby="myTabDrop1">
|
||||
<li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
|
||||
<li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -70,10 +70,10 @@
|
||||
<li class="active"><a href="#home1" data-toggle="tab">Home</a></li>
|
||||
<li><a href="#profile1" data-toggle="tab">Profile</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" id="myTabDrop2" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
|
||||
<li><a href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a></li>
|
||||
<li><a href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
|
||||
<a href="#" id="myTabDrop2" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" aria-labelledby="myTabDrop2">
|
||||
<li><a href="#dropdown1-1" data-toggle="tab">@fat</a></li>
|
||||
<li><a href="#dropdown1-2" data-toggle="tab">@mdo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -102,10 +102,10 @@
|
||||
<li><a href="#home2" data-toggle="tab">Home</a></li>
|
||||
<li><a href="#profile2" data-toggle="tab">Profile</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" id="myTabDrop3" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop3">
|
||||
<li><a href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a></li>
|
||||
<li><a href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
|
||||
<a href="#" id="myTabDrop3" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" aria-labelledby="myTabDrop3">
|
||||
<li><a href="#dropdown2-1" data-toggle="tab">@fat</a></li>
|
||||
<li><a href="#dropdown2-2" data-toggle="tab">@mdo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -134,10 +134,10 @@
|
||||
<li><a href="#home3" data-toggle="tab">Home</a></li>
|
||||
<li><a href="#profile3" data-toggle="tab">Profile</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" id="myTabDrop4" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop4">
|
||||
<li><a href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a></li>
|
||||
<li><a href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
|
||||
<a href="#" id="myTabDrop4" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" aria-labelledby="myTabDrop4">
|
||||
<li><a href="#dropdown3-1" data-toggle="tab">@fat</a></li>
|
||||
<li><a href="#dropdown3-2" data-toggle="tab">@mdo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user