kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

add role="presentation" to tab <li>s to improve accessibility 

Refs #13554.
Per https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#tab-panel
Credit: https://github.com/paypal/bootstrap-accessibility-plugin

[skip sauce]
This commit is contained in:
Chris Rebert 2014-07-08 11:58:33 -07:00
parent c23c663c7c
commit 5c1f4e1a0c
6 changed files with 67 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/_includes/components/badges.html
View File

@ -22,20 +22,20 @@
<p>Built-in styles are included for placing badges in active states in pill navigations.</p> <p>Built-in styles are included for placing badges in active states in pill navigations.</p>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li> <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="badge">3</span></a></li> <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul> </ul>
<br> <br>
<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;"> <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
<li class="active"> <li role="presentation" class="active">
<a href="#"> <a href="#">
<span class="badge pull-right">42</span> <span class="badge pull-right">42</span>
Home Home
</a> </a>
</li> </li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li> <li role="presentation">
<a href="#"> <a href="#">
<span class="badge pull-right">3</span> <span class="badge pull-right">3</span>
Messages Messages
@ -49,7 +49,7 @@
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills nav-stacked" role="tablist"> <ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active"> <li role="presentation" class="active">
<a href="#"> <a href="#">
<span class="badge pull-right">42</span> <span class="badge pull-right">42</span>
Home Home

66
docs/_includes/components/navs.html
View File

@ -7,16 +7,16 @@
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p> <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li role="presentation"><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li role="presentation"><a href="#">Messages</a></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-info">
@ -28,24 +28,24 @@
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li role="presentation"><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li role="presentation"><a href="#">Messages</a></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p> <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;"> <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li role="presentation"><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
@ -63,15 +63,15 @@
</div> </div>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-tabs nav-justified" role="tablist"> <ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li role="presentation"><a href="#">Messages</a></li>
</ul> </ul>
<br> <br>
<ul class="nav nav-pills nav-justified" role="tablist"> <ul class="nav nav-pills nav-justified" role="tablist">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li role="presentation"><a href="#">Messages</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
@ -94,15 +94,15 @@
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist">
<li><a href="#">Clickable link</a></li> <li role="presentation"><a href="#">Clickable link</a></li>
<li><a href="#">Clickable link</a></li> <li role="presentation"><a href="#">Clickable link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li> <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist">
... ...
<li class="disabled"><a href="#">Disabled link</a></li> <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
... ...
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -114,9 +114,9 @@
<h3>Tabs with dropdowns</h3> <h3>Tabs with dropdowns</h3>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li> <li role="presentation"><a href="#">Help</a></li>
<li class="dropdown"> <li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
@ -133,7 +133,7 @@
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
... ...
<li class="dropdown"> <li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
@ -148,9 +148,9 @@
<h3>Pills with dropdowns</h3> <h3>Pills with dropdowns</h3>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li> <li role="presentation"><a href="#">Help</a></li>
<li class="dropdown"> <li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
@ -167,7 +167,7 @@
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist">
... ...
<li class="dropdown"> <li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>

8
docs/_includes/js/dropdowns.html
View File

@ -60,8 +60,8 @@
<h3>Within pills</h3> <h3>Within pills</h3>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Regular link</a></li> <li role="presentation" class="active"><a href="#">Regular link</a></li>
<li class="dropdown"> <li role="presentation" class="dropdown">
<a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a> <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></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="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
@ -71,7 +71,7 @@
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li role="presentation" class="dropdown">
<a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <span class="caret"></span></a> <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <span class="caret"></span></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="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
@ -81,7 +81,7 @@
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li role="presentation" class="dropdown">
<a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <span class="caret"></span></a> <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <span class="caret"></span></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6"> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>

22
docs/_includes/js/tabs.html
View File

@ -5,9 +5,9 @@
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p> <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
<div class="bs-example bs-example-tabs"> <div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs" role="tablist"> <ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li class="dropdown"> <li role="presentation" class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li> <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
@ -61,10 +61,10 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
{% highlight html %} {% highlight html %}
<!-- Nav tabs --> <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
@ -94,10 +94,10 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
</p> </p>
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs" role="tablist" id="myTab"> <ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">

6
docs/examples/jumbotron-narrow/index.html
View File

@ -35,9 +35,9 @@
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<ul class="nav nav-pills pull-right" role="tablist"> <ul class="nav nav-pills pull-right" role="tablist">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li> <li role="presentation"><a href="#">About</a></li>
<li><a href="#">Contact</a></li> <li role="presentation"><a href="#">Contact</a></li>
</ul> </ul>
<h3 class="text-muted">Project name</h3> <h3 class="text-muted">Project name</h3>
</div> </div>

18
docs/examples/theme/index.html
View File

@ -339,9 +339,9 @@
<a href="#">Inbox <span class="badge">42</span></a> <a href="#">Inbox <span class="badge">42</span></a>
</p> </p>
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li> <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="badge">3</span></a></li> <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul> </ul>
@ -365,14 +365,14 @@
<h1>Navs</h1> <h1>Navs</h1>
</div> </div>
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li role="presentation"><a href="#">Messages</a></li>
</ul> </ul>
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li> <li role="presentation" class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li role="presentation"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li> <li role="presentation"><a href="#">Messages</a></li>
</ul> </ul>