aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChris Rebert <[email protected]>2014-07-07 19:22:00 -0700
committerChris Rebert <[email protected]>2014-07-07 19:24:32 -0700
commit7c50b9ad7a5bbcc6728dcd501e396c3bf5247b31 (patch)
tree9afa72a9f77483f8f63fedd52784cb6c684c7f87
parent4f5efb84c9e81120b26949cecc626ae866fef46a (diff)
downloadbootstrap-7c50b9ad7a5bbcc6728dcd501e396c3bf5247b31.tar.xz
bootstrap-7c50b9ad7a5bbcc6728dcd501e396c3bf5247b31.zip
Add role="tablist" to .nav-pills in examples to improve accessibility
Follow-up to e9374c0609c9e63fd6033f684b18ff105e1756ae Per https://github.com/paypal/bootstrap-accessibility-plugin/commit/f203dea4b6d17264d7b776f02feaeeaa386cc9b2 Credit: https://github.com/paypal/bootstrap-accessibility-plugin & @rohk [skip sauce]
-rw-r--r--docs/_includes/components/badges.html6
-rw-r--r--docs/_includes/components/navs.html20
-rw-r--r--docs/_includes/js/dropdowns.html2
-rw-r--r--docs/examples/jumbotron-narrow/index.html2
-rw-r--r--docs/examples/theme/index.html4
5 files changed, 17 insertions, 17 deletions
diff --git a/docs/_includes/components/badges.html b/docs/_includes/components/badges.html
index daa0636cb..95aea2e40 100644
--- a/docs/_includes/components/badges.html
+++ b/docs/_includes/components/badges.html
@@ -21,13 +21,13 @@
<h4>Adapts to active nav states</h4>
<p>Built-in styles are included for placing badges in active states in pill navigations.</p>
<div class="bs-example">
- <ul class="nav nav-pills">
+ <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br>
- <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
+ <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
@@ -48,7 +48,7 @@
</button>
</div>
{% highlight html %}
-<ul class="nav nav-pills nav-stacked">
+<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html
index 26cae463d..5fcb1490c 100644
--- a/docs/_includes/components/navs.html
+++ b/docs/_includes/components/navs.html
@@ -27,14 +27,14 @@
<h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-example">
- <ul class="nav nav-pills">
+ <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>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-pills">
+<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>
@@ -42,14 +42,14 @@
{% 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" 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><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-pills nav-stacked">
+<ul class="nav nav-pills nav-stacked" role="tablist">
...
</ul>
{% endhighlight %}
@@ -68,7 +68,7 @@
<li><a href="#">Messages</a></li>
</ul>
<br>
- <ul class="nav nav-pills nav-justified">
+ <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>
@@ -78,7 +78,7 @@
<ul class="nav nav-tabs nav-justified" role="tablist">
...
</ul>
-<ul class="nav nav-pills nav-justified">
+<ul class="nav nav-pills nav-justified" role="tablist">
...
</ul>
{% endhighlight %}
@@ -93,14 +93,14 @@
</div>
<div class="bs-example">
- <ul class="nav nav-pills">
+ <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>
</ul>
</div>
{% highlight html %}
-<ul class="nav nav-pills">
+<ul class="nav nav-pills" role="tablist">
...
<li class="disabled"><a href="#">Disabled link</a></li>
...
@@ -147,7 +147,7 @@
<h3>Pills with dropdowns</h3>
<div class="bs-example">
- <ul class="nav nav-pills">
+ <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
@@ -165,7 +165,7 @@
</ul>
</div><!-- /example -->
{% highlight html %}
-<ul class="nav nav-pills">
+<ul class="nav nav-pills" role="tablist">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html
index b42aa2042..9313419ac 100644
--- a/docs/_includes/js/dropdowns.html
+++ b/docs/_includes/js/dropdowns.html
@@ -59,7 +59,7 @@
<h3>Within pills</h3>
<div class="bs-example">
- <ul class="nav nav-pills">
+ <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
diff --git a/docs/examples/jumbotron-narrow/index.html b/docs/examples/jumbotron-narrow/index.html
index 56398c96e..304c8fc93 100644
--- a/docs/examples/jumbotron-narrow/index.html
+++ b/docs/examples/jumbotron-narrow/index.html
@@ -34,7 +34,7 @@
<div class="container">
<div class="header">
- <ul class="nav nav-pills pull-right">
+ <ul class="nav nav-pills pull-right" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
diff --git a/docs/examples/theme/index.html b/docs/examples/theme/index.html
index 627abc380..0f686c32e 100644
--- a/docs/examples/theme/index.html
+++ b/docs/examples/theme/index.html
@@ -338,7 +338,7 @@
<p>
<a href="#">Inbox <span class="badge">42</span></a>
</p>
- <ul class="nav nav-pills">
+ <ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="badge">3</span></a></li>
@@ -369,7 +369,7 @@
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
- <ul class="nav nav-pills">
+ <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>