diff options
| author | Patrick H. Lauke <[email protected]> | 2015-06-02 09:41:40 +0100 |
|---|---|---|
| committer | Patrick H. Lauke <[email protected]> | 2015-06-02 11:03:21 +0100 |
| commit | 5fd7bc1554d492bdd5794d35fce515fe951439a6 (patch) | |
| tree | 61ac7cd8243c6d6c4c6e8de4b373132b01419df7 /js/tests/visual/tab.html | |
| parent | 3b59b97c626bf2accef8217339b04712666c36d9 (diff) | |
| download | bootstrap-5fd7bc1554d492bdd5794d35fce515fe951439a6.tar.xz bootstrap-5fd7bc1554d492bdd5794d35fce515fe951439a6.zip | |
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)
Diffstat (limited to 'js/tests/visual/tab.html')
| -rw-r--r-- | js/tests/visual/tab.html | 32 |
1 files changed, 16 insertions, 16 deletions
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index a3fed1e9f..a6d44b3b0 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> |