From: Chris Rebert <code@rebertia.com>
Date: Tue, 8 Jul 2014 18:58:33 +0000 (-0700)
Subject: add role="presentation" to tab <li>s to improve accessibility
X-Git-Tag: v3.3.0~356^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F14085%2Fhead;p=thirdparty%2Fbootstrap.git

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]
---

diff --git a/docs/_includes/components/badges.html b/docs/_includes/components/badges.html
index 95aea2e407..7c67ba769f 100644
--- a/docs/_includes/components/badges.html
+++ b/docs/_includes/components/badges.html
@@ -22,20 +22,20 @@
   <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" 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>
+      <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
+      <li role="presentation"><a href="#">Profile</a></li>
+      <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
     </ul>
     <br>
     <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
-      <li class="active">
+      <li role="presentation" class="active">
         <a href="#">
           <span class="badge pull-right">42</span>
           Home
         </a>
       </li>
-      <li><a href="#">Profile</a></li>
-      <li>
+      <li role="presentation"><a href="#">Profile</a></li>
+      <li role="presentation">
         <a href="#">
           <span class="badge pull-right">3</span>
           Messages
@@ -49,7 +49,7 @@
   </div>
 {% highlight html %}
 <ul class="nav nav-pills nav-stacked" role="tablist">
-  <li class="active">
+  <li role="presentation" class="active">
     <a href="#">
       <span class="badge pull-right">42</span>
       Home
diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html
index 5fcb1490c1..3b15c4e16c 100644
--- a/docs/_includes/components/navs.html
+++ b/docs/_includes/components/navs.html
@@ -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>
diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html
index 9313419ac0..c8bf50f51e 100644
--- a/docs/_includes/js/dropdowns.html
+++ b/docs/_includes/js/dropdowns.html
@@ -60,8 +60,8 @@
   <h3>Within pills</h3>
   <div class="bs-example">
     <ul class="nav nav-pills" role="tablist">
-      <li class="active"><a href="#">Regular link</a></li>
-      <li class="dropdown">
+      <li role="presentation" class="active"><a href="#">Regular link</a></li>
+      <li role="presentation" class="dropdown">
         <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">
           <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>
         </ul>
       </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>
         <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>
@@ -81,7 +81,7 @@
           <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
         </ul>
       </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>
         <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>
diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html
index 38518f0b1e..bed0c05748 100644
--- a/docs/_includes/js/tabs.html
+++ b/docs/_includes/js/tabs.html
@@ -5,9 +5,9 @@
   <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">
     <ul id="myTab" class="nav nav-tabs" role="tablist">
-      <li 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 class="dropdown">
+      <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
+      <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
+      <li role="presentation" class="dropdown">
         <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">
           <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 %}
 <!-- Nav tabs -->
 <ul class="nav nav-tabs" role="tablist">
-  <li 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><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" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
+  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
+  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
+  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
 </ul>
 
 <!-- Tab panes -->
@@ -94,10 +94,10 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
   </p>
 {% highlight html %}
 <ul class="nav nav-tabs" role="tablist" id="myTab">
-  <li 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><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" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
+  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
+  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
+  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
 </ul>
 
 <div class="tab-content">
diff --git a/docs/examples/jumbotron-narrow/index.html b/docs/examples/jumbotron-narrow/index.html
index 304c8fc932..3bafd77c41 100644
--- a/docs/examples/jumbotron-narrow/index.html
+++ b/docs/examples/jumbotron-narrow/index.html
@@ -35,9 +35,9 @@
     <div class="container">
       <div class="header">
         <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>
+          <li role="presentation" class="active"><a href="#">Home</a></li>
+          <li role="presentation"><a href="#">About</a></li>
+          <li role="presentation"><a href="#">Contact</a></li>
         </ul>
         <h3 class="text-muted">Project name</h3>
       </div>
diff --git a/docs/examples/theme/index.html b/docs/examples/theme/index.html
index 2412b22067..350971c2be 100644
--- a/docs/examples/theme/index.html
+++ b/docs/examples/theme/index.html
@@ -339,9 +339,9 @@
         <a href="#">Inbox <span class="badge">42</span></a>
       </p>
       <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>
+        <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
+        <li role="presentation"><a href="#">Profile</a></li>
+        <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
       </ul>
 
 
@@ -365,14 +365,14 @@
         <h1>Navs</h1>
       </div>
       <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>
       <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>