diff options
| author | Chris Rebert <[email protected]> | 2014-05-09 15:05:20 -0700 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2014-05-09 15:05:20 -0700 |
| commit | e9374c0609c9e63fd6033f684b18ff105e1756ae (patch) | |
| tree | 927f7c5ec29a1a1f926b3ad5f64bf9c29c2a1ff6 /docs/_includes/js | |
| parent | 48fd9e29a24ae7fd8d8061e62a099c6097c41f18 (diff) | |
| download | bootstrap-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/_includes/js')
| -rw-r--r-- | docs/_includes/js/scrollspy.html | 2 | ||||
| -rw-r--r-- | docs/_includes/js/tabs.html | 6 |
2 files changed, 4 insertions, 4 deletions
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> |