]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 48fd9e2)
add role="tablist" to .nav-tabs in examples to improve accessibility
authorChris Rebert <code@rebertia.com>
Fri, 9 May 2014 22:05:20 +0000 (15:05 -0700)
committerChris Rebert <code@rebertia.com>
Fri, 9 May 2014 22:05:20 +0000 (15:05 -0700)
Per https://github.com/paypal/bootstrap-accessibility-plugin#tab-panel
Credit: https://github.com/paypal/bootstrap-accessibility-plugin

docs/_includes/components/navs.html patch | blob | blame | history
docs/_includes/js/scrollspy.html patch | blob | blame | history
docs/_includes/js/tabs.html patch | blob | blame | history
docs/examples/rtl/index.html patch | blob | blame | history
docs/examples/theme/index.html patch | blob | blame | history

diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html
index 9cad335d0a618fd5b362496f56b6990200a0353f..d9c45fa2dc3c4f2dae16ad7bc8e46eaa6bd1bb19 100644 (file)
--- a/docs/_includes/components/navs.html
+++ b/docs/_includes/components/navs.html
@@ -6,14 +6,14 @@
   <h2 id="nav-tabs">Tabs</h2>
   <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">
+    <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>
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-tabs">
+<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>
@@ -62,7 +62,7 @@
     <p>As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
   </div>
   <div class="bs-example">
-    <ul class="nav nav-tabs nav-justified">
+    <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>
@@ -75,7 +75,7 @@
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-tabs nav-justified">
+<ul class="nav nav-tabs nav-justified" role="tablist">
   ...
 </ul>
 <ul class="nav nav-pills nav-justified">
@@ -113,7 +113,7 @@
 
   <h3>Tabs with dropdowns</h3>
   <div class="bs-example">
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs" role="tablist">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Help</a></li>
       <li class="dropdown">
@@ -131,7 +131,7 @@
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs" role="tablist">
   ...
   <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html
index 9767254e0db554145efa553e131273997672d664..2ceedb0ca6980c2c265ee8d2cce7180aac1a17a4 100644 (file)
--- a/docs/_includes/js/scrollspy.html
+++ b/docs/_includes/js/scrollspy.html
@@ -65,7 +65,7 @@ body {
 <body data-spy="scroll" data-target=".navbar-example">
   ...
   <div class="navbar-example">
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs" role="tablist">
       ...
     </ul>
   </div>
diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html
index c6c3e0df601d35d6a70fbe9d7d47ea7a693c0099..6f0229003308201b59b62cda71d909409eace5fc 100644 (file)
--- 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>
diff --git a/docs/examples/rtl/index.html b/docs/examples/rtl/index.html
index 07083146160cf8314feaef68f1dce91adbb500de..5a18d048f18a93789770b41cf273acd024ba76ba 100644 (file)
--- a/docs/examples/rtl/index.html
+++ b/docs/examples/rtl/index.html
@@ -362,7 +362,7 @@
       <div class="page-header">
         <h1>Navs</h1>
       </div>
-      <ul class="nav nav-tabs">
+      <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>
diff --git a/docs/examples/theme/index.html b/docs/examples/theme/index.html
index f312df4eec3e6d54617ee88be2ff3d2224e008b5..44cc2763805c0462c67c1252037f57b05a23a172 100644 (file)
--- a/docs/examples/theme/index.html
+++ b/docs/examples/theme/index.html
@@ -364,7 +364,7 @@
       <div class="page-header">
         <h1>Navs</h1>
       </div>
-      <ul class="nav nav-tabs">
+      <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>
Mirror of https://github.com/twbs/bootstrap.git