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]

diff --git a/docs/_includes/components/badges.html b/docs/_includes/components/badges.html
index daa0636cb86a7b27e4f2ef0e687ddd3d5b753bbf..95aea2e407d38cf32f1da97e319c5e49e9290829 100644 (file)
--- 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 26cae463de2916ad589e0a96cb3b6c88710b33dd..5fcb1490c1232e1173f95d75fb0c27be201f729b 100644 (file)
--- 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 b42aa20424bddb6ded3367f517291cc8f935ed2e..9313419ac04d15cf8914813b3d1a8e767ce9eec0 100644 (file)
--- 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 56398c96e2244ba94e0dbaf2bfef9b89a1381160..304c8fc9329175d198548c25aa0008fcfaa4f1dd 100644 (file)
--- 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 627abc380b22f4386221c742b256bd36e6434a1a..0f686c32e0724c8cfc6b6badd5aebf5d1448b52b 100644 (file)
--- 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>