mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-01 15:56:45 +02:00
Code Issues Releases Wiki Activity

Leave tabindex=-1 alone

Browse Source 
It seems that, as misguided as I personally think it is, ARIA does
indeed want dropdown menus not to behave as regular keyboard users
expect them, killing TAB/SHIFT+TAB in favor of cursor keys. Fair
enough, the issue I have is then with ARIA, not with bootstrap. I would
sugges thought that if you really do want to follow ARIA consistently,
*any* navigation bar should also become an ARIA menu, further making it
impossible for keyboard users to use TAB/SHIFT+TAB to navigate through
it, and that these changes should be reflected in the bootstrap
examples as well...
This commit is contained in:
Patrick H. Lauke
2013-01-15 07:16:33 +00:00
parent 4503ad7808
commit 370fa45fbe
2 changed files with 64 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/javascript.html
View File

@@ -405,21 +405,21 @@ $('#myModal').on('hidden', function () {
<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="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" href="#anotherAction">Another action</a></li>
<li role="presentation"><a role="menuitem" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
<li role="presentation"><a role="menuitem" 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="#">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" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
<li role="presentation"><a role="menuitem" href="#">Separated link</a></li>
</ul>
</li>
</ul>
@@ -427,11 +427,11 @@ $('#myModal').on('hidden', function () {
<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="#">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" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
<li role="presentation"><a role="menuitem" href="#">Separated link</a></li>
</ul>
</li>
</ul>
@@ -447,31 +447,31 @@ $('#myModal').on('hidden', function () {
<li class="dropdown">
<a class="dropdown-toggle" 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="#">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" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
<li role="presentation"><a role="menuitem" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" 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="#">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" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
<li role="presentation"><a role="menuitem" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<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" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
<li role="presentation"><a role="menuitem" href="#">Separated link</a></li>
</ul>
</li>
</ul> <!-- /tabs -->