From e9374c0609c9e63fd6033f684b18ff105e1756ae Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Fri, 9 May 2014 15:05:20 -0700
Subject: add role="tablist" to .nav-tabs in examples to improve accessibility

Per https://github.com/paypal/bootstrap-accessibility-plugin#tab-panel
Credit: https://github.com/paypal/bootstrap-accessibility-plugin
---
 docs/_includes/js/tabs.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'docs/_includes/js/tabs.html')

diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html
index c6c3e0df6..6f0229003 100644
--- a/docs/_includes/js/tabs.html
+++ b/docs/_includes/js/tabs.html
@@ -4,7 +4,7 @@
   <h2 id="tabs-examples">Example tabs</h2>
   <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">
+    <ul id="myTab" class="nav nav-tabs" role="tablist">
       <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
       <li><a href="#profile" data-toggle="tab">Profile</a></li>
       <li class="dropdown">
@@ -60,7 +60,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
   <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
 {% highlight html %}
 <!-- Nav tabs -->
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs" role="tablist">
   <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
   <li><a href="#profile" data-toggle="tab">Profile</a></li>
   <li><a href="#messages" data-toggle="tab">Messages</a></li>
@@ -93,7 +93,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
     Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
   </p>
 {% highlight html %}
-<ul class="nav nav-tabs" id="myTab">
+<ul class="nav nav-tabs" role="tablist" id="myTab">
   <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
   <li><a href="#profile" data-toggle="tab">Profile</a></li>
   <li><a href="#messages" data-toggle="tab">Messages</a></li>
-- 
cgit v1.2.3


From 0a808fc56ca0983d45556fa9ccd5da80445b23c2 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Fri, 9 May 2014 15:12:57 -0700
Subject: add role="tab" to .nav-tabs [data-toggle="tab"]

Per https://github.com/paypal/bootstrap-accessibility-plugin#tab-panel
Credit: https://github.com/paypal/bootstrap-accessibility-plugin
---
 docs/_includes/js/tabs.html | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

(limited to 'docs/_includes/js/tabs.html')

diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html
index 6f0229003..38518f0b1 100644
--- a/docs/_includes/js/tabs.html
+++ b/docs/_includes/js/tabs.html
@@ -5,13 +5,13 @@
   <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" data-toggle="tab">Home</a></li>
-      <li><a href="#profile" data-toggle="tab">Profile</a></li>
+      <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">
         <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" data-toggle="tab">@fat</a></li>
-          <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
+          <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
+          <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
         </ul>
       </li>
     </ul>
@@ -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" data-toggle="tab">Home</a></li>
-  <li><a href="#profile" data-toggle="tab">Profile</a></li>
-  <li><a href="#messages" data-toggle="tab">Messages</a></li>
-  <li><a href="#settings" data-toggle="tab">Settings</a></li>
+  <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>
 </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" data-toggle="tab">Home</a></li>
-  <li><a href="#profile" data-toggle="tab">Profile</a></li>
-  <li><a href="#messages" data-toggle="tab">Messages</a></li>
-  <li><a href="#settings" data-toggle="tab">Settings</a></li>
+  <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>
 </ul>
 
 <div class="tab-content">
-- 
cgit v1.2.3