aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorChris Rebert <[email protected]>2014-05-09 15:05:20 -0700
committerChris Rebert <[email protected]>2014-05-09 15:05:20 -0700
commite9374c0609c9e63fd6033f684b18ff105e1756ae (patch)
tree927f7c5ec29a1a1f926b3ad5f64bf9c29c2a1ff6 /docs
parent48fd9e29a24ae7fd8d8061e62a099c6097c41f18 (diff)
downloadbootstrap-e9374c0609c9e63fd6033f684b18ff105e1756ae.tar.xz
bootstrap-e9374c0609c9e63fd6033f684b18ff105e1756ae.zip
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
Diffstat (limited to 'docs')
-rw-r--r--docs/_includes/components/navs.html12
-rw-r--r--docs/_includes/js/scrollspy.html2
-rw-r--r--docs/_includes/js/tabs.html6
-rw-r--r--docs/examples/rtl/index.html2
-rw-r--r--docs/examples/theme/index.html2
5 files changed, 12 insertions, 12 deletions
diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html
index 9cad335d0..d9c45fa2d 100644
--- 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 9767254e0..2ceedb0ca 100644
--- 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 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>
diff --git a/docs/examples/rtl/index.html b/docs/examples/rtl/index.html
index 070831461..5a18d048f 100644
--- 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 f312df4ee..44cc27638 100644
--- 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>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 12:46:46 +0000