From 5fd7bc1554d492bdd5794d35fce515fe951439a6 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" <redux@splintered.co.uk> Date: Tue, 2 Jun 2015 09:41:40 +0100 Subject: [PATCH] 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) --- .../components/button-dropdowns.html | 92 ++++++++--------- docs/_includes/components/button-groups.html | 28 +++--- docs/_includes/components/dropdowns.html | 98 +++++++++---------- docs/_includes/components/input-groups.html | 24 ++--- docs/_includes/components/navbar.html | 16 +-- docs/_includes/components/navs.html | 16 +-- docs/_includes/js/dropdowns.html | 78 +++++++-------- docs/_includes/js/scrollspy.html | 10 +- docs/_includes/js/tabs.html | 6 +- docs/examples/carousel/index.html | 4 +- docs/examples/navbar-fixed-top/index.html | 4 +- docs/examples/navbar-static-top/index.html | 4 +- docs/examples/navbar/index.html | 4 +- docs/examples/non-responsive/index.html | 4 +- docs/examples/sticky-footer-navbar/index.html | 4 +- docs/examples/theme/index.html | 24 ++--- js/dropdown.js | 2 +- js/tests/unit/dropdown.js | 10 +- js/tests/visual/dropdown.html | 70 ++++++------- js/tests/visual/scrollspy.html | 12 +-- js/tests/visual/tab.html | 32 +++--- 21 files changed, 271 insertions(+), 271 deletions(-) diff --git a/docs/_includes/components/button-dropdowns.html b/docs/_includes/components/button-dropdowns.html index 5f7b7d94f0..6f621086ea 100644 --- a/docs/_includes/components/button-dropdowns.html +++ b/docs/_includes/components/button-dropdowns.html @@ -12,8 +12,8 @@ <p>Turn a button into a dropdown toggle with some basic markup changes.</p> <div class="bs-example" data-example-id="single-button-dropdown"> <div class="btn-group"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default <span class="caret"></span></button> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -22,8 +22,8 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> + <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary <span class="caret"></span></button> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -32,8 +32,8 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> + <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success <span class="caret"></span></button> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -42,8 +42,8 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> + <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info <span class="caret"></span></button> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -52,8 +52,8 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> + <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning <span class="caret"></span></button> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -62,8 +62,8 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> + <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger <span class="caret"></span></button> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -75,10 +75,10 @@ {% highlight html %} <!-- Single button --> <div class="btn-group"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -93,11 +93,11 @@ <div class="bs-example" data-example-id="split-button-dropdown"> <div class="btn-group"> <button type="button" class="btn btn-default">Default</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -107,11 +107,11 @@ </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-primary">Primary</button> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -121,11 +121,11 @@ </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-success">Success</button> - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -135,11 +135,11 @@ </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-info">Info</button> - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -149,11 +149,11 @@ </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-warning">Warning</button> - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -163,11 +163,11 @@ </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-danger">Danger</button> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -180,11 +180,11 @@ <!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -199,10 +199,10 @@ <div class="bs-example" data-example-id="button-dropdown-sizing"> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> - <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Large button <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -213,10 +213,10 @@ </div><!-- /btn-toolbar --> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> - <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Small button <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -227,10 +227,10 @@ </div><!-- /btn-toolbar --> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> - <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Extra small button <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -243,30 +243,30 @@ {% highlight html %} <!-- Large button group --> <div class="btn-group"> - <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Large button <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> ... </ul> </div> <!-- Small button group --> <div class="btn-group"> - <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Small button <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> ... </ul> </div> <!-- Extra small button group --> <div class="btn-group"> - <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Extra small button <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> ... </ul> </div> @@ -278,11 +278,11 @@ <div class="btn-toolbar" role="toolbar"> <div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -292,11 +292,11 @@ </div><!-- /btn-group --> <div class="btn-group dropup"> <button type="button" class="btn btn-primary">Right dropup</button> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu dropdown-menu-right" role="menu"> + <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -309,11 +309,11 @@ {% highlight html %} <div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <!-- Dropdown menu links --> </ul> </div> diff --git a/docs/_includes/components/button-groups.html b/docs/_includes/components/button-groups.html index 8a52e5e659..fc8d652697 100644 --- a/docs/_includes/components/button-groups.html +++ b/docs/_includes/components/button-groups.html @@ -102,11 +102,11 @@ <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> - <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1"> + <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> @@ -119,11 +119,11 @@ <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> @@ -138,11 +138,11 @@ <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1"> + <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> @@ -150,31 +150,31 @@ <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2"> + <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3"> + <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4"> + <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> @@ -213,10 +213,10 @@ <a href="#" class="btn btn-default" role="button">Left</a> <a href="#" class="btn btn-default" role="button">Middle</a> <div class="btn-group" role="group"> - <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> + <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html index c2bfeb3d5f..c5554b8039 100644 --- a/docs/_includes/components/dropdowns.html +++ b/docs/_includes/components/dropdowns.html @@ -7,28 +7,28 @@ <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p> <div class="bs-example" data-example-id="static-dropdown"> <div class="dropdown clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> </ul> </div> </div><!-- /example --> {% highlight html %} <div class="dropdown"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> + <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li><a href="#">Separated link</a></li> </ul> </div> {% endhighlight %} @@ -36,28 +36,28 @@ <p>Dropdown menus can be changed to expand upwards (instead of downwards) by adding <code>.dropup</code> to the parent.</p> <div class="bs-example" data-example-id="static-dropup"> <div class="dropup clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> </ul> </div> </div><!-- /example --> {% highlight html %} <div class="dropup"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> + <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li><a href="#">Separated link</a></li> </ul> </div> {% endhighlight %} @@ -73,7 +73,7 @@ <p>As of v3.1.0, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p> </div> {% highlight html %} -<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel"> +<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel"> ... </ul> {% endhighlight %} @@ -82,24 +82,24 @@ <p>Add a header to label sections of actions in any dropdown menu.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> - <li role="presentation" class="dropdown-header">Dropdown header</li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> - <li role="presentation" class="dropdown-header">Dropdown header</li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> + <ul class="dropdown-menu" aria-labelledby="dropdownMenu3"> + <li class="dropdown-header">Dropdown header</li> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="dropdown-header">Dropdown header</li> + <li><a href="#">Separated link</a></li> </ul> </div> </div><!-- /example --> {% highlight html %} -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> +<ul class="dropdown-menu" aria-labelledby="dropdownMenu3"> ... - <li role="presentation" class="dropdown-header">Dropdown header</li> + <li class="dropdown-header">Dropdown header</li> ... </ul> {% endhighlight %} @@ -108,21 +108,21 @@ <p>Add a divider to separate series of links in a dropdown menu.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider"> + <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 role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> + <li><a href="#">Separated link</a></li> </ul> </div> </div><!-- /example --> {% highlight html %} -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider"> +<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider"> ... <li role="separator" class="divider"></li> ... @@ -133,22 +133,22 @@ <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-expanded="true"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> - <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li> + <ul class="dropdown-menu" aria-labelledby="dropdownMenu4"> + <li><a href="#">Regular link</a></li> + <li class="disabled"><a href="#">Disabled link</a></li> + <li><a href="#">Another link</a></li> </ul> </div> </div><!-- /example --> {% highlight html %} -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> - <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li> +<ul class="dropdown-menu" aria-labelledby="dropdownMenu4"> + <li><a href="#">Regular link</a></li> + <li class="disabled"><a href="#">Disabled link</a></li> + <li><a href="#">Another link</a></li> </ul> {% endhighlight %} </div> diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index a42370e720..8d42b27cec 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -191,8 +191,8 @@ <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -207,8 +207,8 @@ <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-btn"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> - <ul class="dropdown-menu dropdown-menu-right" role="menu"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> + <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -225,8 +225,8 @@ <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -241,8 +241,8 @@ <div class="input-group"> <input type="text" class="form-control" aria-label="..."> <div class="input-group-btn"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> - <ul class="dropdown-menu dropdown-menu-right" role="menu"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> + <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -262,11 +262,11 @@ <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default">Action</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -282,11 +282,11 @@ <input type="text" class="form-control" aria-label="Text input with segmented button dropdown"> <div class="input-group-btn"> <button type="button" class="btn btn-default">Action</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu dropdown-menu-right" role="menu"> + <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html index 1306f43e09..418da7915a 100644 --- a/docs/_includes/components/navbar.html +++ b/docs/_includes/components/navbar.html @@ -48,8 +48,8 @@ <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -69,8 +69,8 @@ <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -103,8 +103,8 @@ <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -124,8 +124,8 @@ <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html index 025e2b60b8..cb1bc01bfd 100644 --- a/docs/_includes/components/navs.html +++ b/docs/_includes/components/navs.html @@ -125,10 +125,10 @@ <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Help</a></li> <li role="presentation" class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -142,10 +142,10 @@ <ul class="nav nav-tabs"> ... <li role="presentation" class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> ... </ul> </li> @@ -159,10 +159,10 @@ <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Help</a></li> <li role="presentation" class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -176,10 +176,10 @@ <ul class="nav nav-pills"> ... <li role="presentation" class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> ... </ul> </li> diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html index 192d9a106f..7d8c50bdca 100644 --- a/docs/_includes/js/dropdowns.html +++ b/docs/_includes/js/dropdowns.html @@ -20,44 +20,44 @@ <div class="collapse navbar-collapse bs-example-js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> - <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> + <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </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> + <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 role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li> + <li><a href="#">Separated link</a></li> </ul> </li> <li class="dropdown"> - <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> + <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </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> + <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 role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></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 id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> + <a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </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> + <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 role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li> + <li><a href="#">Separated link</a></li> </ul> </li> </ul> @@ -71,42 +71,42 @@ <ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#">Regular link</a></li> <li role="presentation" class="dropdown"> - <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> + <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </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> + <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 role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li> + <li><a href="#">Separated link</a></li> </ul> </li> <li role="presentation" class="dropdown"> - <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> + <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </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> + <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 role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li> + <li><a href="#">Separated link</a></li> </ul> </li> <li role="presentation" class="dropdown"> - <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> + <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> - <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6"> - <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> + <ul id="menu3" class="dropdown-menu" aria-labelledby="drop6"> + <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 role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li> + <li><a href="#">Separated link</a></li> </ul> </li> </ul> <!-- /pills --> @@ -126,7 +126,7 @@ Dropdown trigger <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> + <ul class="dropdown-menu" aria-labelledby="dLabel"> ... </ul> </div> @@ -134,12 +134,12 @@ <p>To keep URLs intact with link buttons, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p> {% highlight html %} <div class="dropdown"> - <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> + <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown trigger <span class="caret"></span> </a> - <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> + <ul class="dropdown-menu" aria-labelledby="dLabel"> ... </ul> </div> diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html index adcce1f29e..8fa6215a56 100644 --- a/docs/_includes/js/scrollspy.html +++ b/docs/_includes/js/scrollspy.html @@ -20,12 +20,12 @@ <li><a href="#fat">@fat</a></li> <li><a href="#mdo">@mdo</a></li> <li class="dropdown"> - <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> - <li><a href="#one" tabindex="-1">one</a></li> - <li><a href="#two" tabindex="-1">two</a></li> + <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu" aria-labelledby="navbarDrop1"> + <li><a href="#one">one</a></li> + <li><a href="#two">two</a></li> <li role="separator" class="divider"></li> - <li><a href="#three" tabindex="-1">three</a></li> + <li><a href="#three">three</a></li> </ul> </li> </ul> diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html index c78f9936dd..5ce8a766eb 100644 --- a/docs/_includes/js/tabs.html +++ b/docs/_includes/js/tabs.html @@ -9,9 +9,9 @@ <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li> <li role="presentation" class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents"> - <li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li> - <li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li> + <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents"> + <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li> + <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li> </ul> </li> </ul> diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index 28d1aafced..921c93b52f 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -50,8 +50,8 @@ <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> diff --git a/docs/examples/navbar-fixed-top/index.html b/docs/examples/navbar-fixed-top/index.html index 472272407e..2f331c7b9e 100644 --- a/docs/examples/navbar-fixed-top/index.html +++ b/docs/examples/navbar-fixed-top/index.html @@ -48,8 +48,8 @@ <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> diff --git a/docs/examples/navbar-static-top/index.html b/docs/examples/navbar-static-top/index.html index 62e70d7dc6..641c683366 100644 --- a/docs/examples/navbar-static-top/index.html +++ b/docs/examples/navbar-static-top/index.html @@ -48,8 +48,8 @@ <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html index 32161ce2f0..39a43d137b 100644 --- a/docs/examples/navbar/index.html +++ b/docs/examples/navbar/index.html @@ -50,8 +50,8 @@ <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> diff --git a/docs/examples/non-responsive/index.html b/docs/examples/non-responsive/index.html index e134b394d3..e27e6a4966 100644 --- a/docs/examples/non-responsive/index.html +++ b/docs/examples/non-responsive/index.html @@ -46,8 +46,8 @@ <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html index b62ee74c54..58dafbb1f9 100644 --- a/docs/examples/sticky-footer-navbar/index.html +++ b/docs/examples/sticky-footer-navbar/index.html @@ -48,8 +48,8 @@ <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> diff --git a/docs/examples/theme/index.html b/docs/examples/theme/index.html index dc12aac525..9a79554669 100644 --- a/docs/examples/theme/index.html +++ b/docs/examples/theme/index.html @@ -50,8 +50,8 @@ <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -341,13 +341,13 @@ <h1>Dropdown menus</h1> </div> <div class="dropdown theme-dropdown clearfix"> - <a id="dropdownMenu1" href="#" class="sr-only dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> - <li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <a id="dropdownMenu1" href="#" class="sr-only dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> + <li class="active"><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 role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> + <li><a href="#">Separated link</a></li> </ul> </div> @@ -388,8 +388,8 @@ <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -421,8 +421,8 @@ <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> diff --git a/js/dropdown.js b/js/dropdown.js index 8fd86a0254..3a89fa61d2 100644 --- a/js/dropdown.js +++ b/js/dropdown.js @@ -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 diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index e0d1df9700..a55684d520 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -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>' diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index 02090b6cc9..f723a0e572 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -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> diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index 5952b7e593..580faeccfd 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -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> diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index a3fed1e9fa..a6d44b3b0c 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -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> -- GitLab