Skip to content

B
bootstrap
Commit a809daf2 authored by Patrick H. Lauke's avatar Patrick H. Lauke
Browse files
Options

Keyboard accessibility in documentation 

Removed unnecessary (?) and harmful (from a keyboard access point of
view) tabindex=-1 in the documentation examples.
parent 77c68e4b
Hide whitespace changes
Inline Side-by-side
Showing with 64 additions and 64 deletions
docs/components.html
View file @ a809daf2
...@@ -118,21 +118,21 @@ ...@@ -118,21 +118,21 @@
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="dropdown clearfix"> <div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
...@@ -143,11 +143,11 @@ ...@@ -143,11 +143,11 @@
&lt;div class="dropdown"&gt; &lt;div class="dropdown"&gt;
&lt;!-- Link or button to toggle dropdown --&gt; &lt;!-- Link or button to toggle dropdown --&gt;
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
...@@ -171,18 +171,18 @@ ...@@ -171,18 +171,18 @@
<p class="muted">Default</p> <p class="muted">Default</p>
<div class="dropdown clearfix"> <div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
<li class="divider"></li> <li class="divider"></li>
<li class="dropdown-submenu"> <li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a> <a href="#">More options</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
...@@ -193,18 +193,18 @@ ...@@ -193,18 +193,18 @@
<p class="muted">Dropup</p> <p class="muted">Dropup</p>
<div class="dropup"> <div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
<li class="divider"></li> <li class="divider"></li>
<li class="dropdown-submenu"> <li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a> <a href="#">More options</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
...@@ -215,18 +215,18 @@ ...@@ -215,18 +215,18 @@
<p class="muted">Left submenu</p> <p class="muted">Left submenu</p>
<div class="dropdown"> <div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
<li class="divider"></li> <li class="divider"></li>
<li class="dropdown-submenu pull-left"> <li class="dropdown-submenu pull-left">
<a tabindex="-1" href="#">More options</a> <a href="#">More options</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li> <li><a href="#">Second level link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
...@@ -238,7 +238,7 @@ ...@@ -238,7 +238,7 @@
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt; &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
... ...
&lt;li class="dropdown-submenu"&gt; &lt;li class="dropdown-submenu"&gt;
&lt;a tabindex="-1" href="#"&gt;More options&lt;/a&gt; &lt;a href="#"&gt;More options&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt; &lt;ul class="dropdown-menu"&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
......
docs/javascript.html
View file @ a809daf2
...@@ -405,21 +405,21 @@ $('#myModal').on('hidden', function () { ...@@ -405,21 +405,21 @@ $('#myModal').on('hidden', function () {
<li class="dropdown"> <li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <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"> <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" 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" 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="#">Something else here</a></li>
<li role="presentation" class="divider"></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> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> <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"> <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" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" 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="#">Something else here</a></li>
<li role="presentation" class="divider"></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> </ul>
</li> </li>
</ul> </ul>
...@@ -427,11 +427,11 @@ $('#myModal').on('hidden', function () { ...@@ -427,11 +427,11 @@ $('#myModal').on('hidden', function () {
<li id="fat-menu" class="dropdown"> <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> <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"> <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" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" 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="#">Something else here</a></li>
<li role="presentation" class="divider"></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> </ul>
</li> </li>
</ul> </ul>
...@@ -447,31 +447,31 @@ $('#myModal').on('hidden', function () { ...@@ -447,31 +447,31 @@ $('#myModal').on('hidden', function () {
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <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"> <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" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" 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="#">Something else here</a></li>
<li role="presentation" class="divider"></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> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> <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"> <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" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" 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="#">Something else here</a></li>
<li role="presentation" class="divider"></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> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a> <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"> <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" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" 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="#">Something else here</a></li>
<li role="presentation" class="divider"></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> </ul>
</li> </li>
</ul> <!-- /tabs --> </ul> <!-- /tabs -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment