Skip to content

Commit a217ed7

Browse files
cvrebertcvrebert
committed
Merge pull request twbs#13558 from twbs/nav-tabs-role-tablist
add some ARIA roles to tabs for improved accessibility
2 parents 9013839 + 0a808fc commit a217ed7

File tree

5 files changed

+24
-24
lines changed

5 files changed

+24
-24
lines changed

‎docs/_includes/components/navs.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ <h1 id="nav" class="page-header">Navs</h1>
66
<h2 id="nav-tabs">Tabs</h2>
77
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
88
<div class="bs-example">
9-
<ul class="nav nav-tabs">
9+
<ul class="nav nav-tabs" role="tablist">
1010
<li class="active"><a href="#">Home</a></li>
1111
<li><a href="#">Profile</a></li>
1212
<li><a href="#">Messages</a></li>
1313
</ul>
1414
</div>
1515
{% highlight html %}
16-
<ul class="nav nav-tabs">
16+
<ul class="nav nav-tabs" role="tablist">
1717
<li class="active"><a href="#">Home</a></li>
1818
<li><a href="#">Profile</a></li>
1919
<li><a href="#">Messages</a></li>
@@ -62,7 +62,7 @@ <h4>Safari and responsive justified navs</h4>
6262
<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>
6363
</div>
6464
<div class="bs-example">
65-
<ul class="nav nav-tabs nav-justified">
65+
<ul class="nav nav-tabs nav-justified" role="tablist">
6666
<li class="active"><a href="#">Home</a></li>
6767
<li><a href="#">Profile</a></li>
6868
<li><a href="#">Messages</a></li>
@@ -75,7 +75,7 @@ <h4>Safari and responsive justified navs</h4>
7575
</ul>
7676
</div>
7777
{% highlight html %}
78-
<ul class="nav nav-tabs nav-justified">
78+
<ul class="nav nav-tabs nav-justified" role="tablist">
7979
...
8080
</ul>
8181
<ul class="nav nav-pills nav-justified">
@@ -113,7 +113,7 @@ <h2 id="nav-dropdowns">Using dropdowns</h2>
113113

114114
<h3>Tabs with dropdowns</h3>
115115
<div class="bs-example">
116-
<ul class="nav nav-tabs">
116+
<ul class="nav nav-tabs" role="tablist">
117117
<li class="active"><a href="#">Home</a></li>
118118
<li><a href="#">Help</a></li>
119119
<li class="dropdown">
@@ -131,7 +131,7 @@ <h3>Tabs with dropdowns</h3>
131131
</ul>
132132
</div>
133133
{% highlight html %}
134-
<ul class="nav nav-tabs">
134+
<ul class="nav nav-tabs" role="tablist">
135135
...
136136
<li class="dropdown">
137137
<a class="dropdown-toggle" data-toggle="dropdown" href="#">

‎docs/_includes/js/scrollspy.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ <h3>Via data attributes</h3>
6565
<body data-spy="scroll" data-target=".navbar-example">
6666
...
6767
<div class="navbar-example">
68-
<ul class="nav nav-tabs">
68+
<ul class="nav nav-tabs" role="tablist">
6969
...
7070
</ul>
7171
</div>

‎docs/_includes/js/tabs.html

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ <h1 id="tabs" class="page-header">Togglable tabs <small>tab.js</small></h1>
44
<h2 id="tabs-examples">Example tabs</h2>
55
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
66
<div class="bs-example bs-example-tabs">
7-
<ul id="myTab" class="nav nav-tabs">
8-
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
9-
<li><a href="#profile" data-toggle="tab">Profile</a></li>
7+
<ul id="myTab" class="nav nav-tabs" role="tablist">
8+
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
9+
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
1010
<li class="dropdown">
1111
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
1212
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
13-
<li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
14-
<li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
13+
<li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
14+
<li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
1515
</ul>
1616
</li>
1717
</ul>
@@ -60,11 +60,11 @@ <h3>Markup</h3>
6060
<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>
6161
{% highlight html %}
6262
<!-- Nav tabs -->
63-
<ul class="nav nav-tabs">
64-
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
65-
<li><a href="#profile" data-toggle="tab">Profile</a></li>
66-
<li><a href="#messages" data-toggle="tab">Messages</a></li>
67-
<li><a href="#settings" data-toggle="tab">Settings</a></li>
63+
<ul class="nav nav-tabs" role="tablist">
64+
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
65+
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
66+
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
67+
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
6868
</ul>
6969

7070
<!-- Tab panes -->
@@ -93,11 +93,11 @@ <h4>$().tab</h4>
9393
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.
9494
</p>
9595
{% highlight html %}
96-
<ul class="nav nav-tabs" id="myTab">
97-
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
98-
<li><a href="#profile" data-toggle="tab">Profile</a></li>
99-
<li><a href="#messages" data-toggle="tab">Messages</a></li>
100-
<li><a href="#settings" data-toggle="tab">Settings</a></li>
96+
<ul class="nav nav-tabs" role="tablist" id="myTab">
97+
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
98+
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
99+
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
100+
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
101101
</ul>
102102

103103
<div class="tab-content">

‎docs/examples/rtl/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,7 @@ <h1>Dropdown menus</h1>
362362
<div class="page-header">
363363
<h1>Navs</h1>
364364
</div>
365-
<ul class="nav nav-tabs">
365+
<ul class="nav nav-tabs" role="tablist">
366366
<li class="active"><a href="#">Home</a></li>
367367
<li><a href="#">Profile</a></li>
368368
<li><a href="#">Messages</a></li>

‎docs/examples/theme/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -364,7 +364,7 @@ <h1>Dropdown menus</h1>
364364
<div class="page-header">
365365
<h1>Navs</h1>
366366
</div>
367-
<ul class="nav nav-tabs">
367+
<ul class="nav nav-tabs" role="tablist">
368368
<li class="active"><a href="#">Home</a></li>
369369
<li><a href="#">Profile</a></li>
370370
<li><a href="#">Messages</a></li>

0 commit comments

Comments
 (0)