mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-21 13:24:08 +03:00
Code Activity

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

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