Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

tabs - accessibility issue when using ul/li semantic #30381

Merged
merged 3 commits into from Apr 10, 2020
Merged

tabs - accessibility issue when using ul/li semantic #30381

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f545846
fix #30338 add aria-role presentation on li element when ul element h…
Lausselloic Mar 11, 2020
5b98d08
Merge branch 'v4-dev' into fix-aria-tablist
ffoodd Mar 27, 2020
ea02ca7
Merge branch 'v4-dev' into fix-aria-tablist
ffoodd Apr 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 12 additions & 12 deletions js/tests/unit/tab.js
View file
Open in desktop
Expand Up @@ -143,8 +143,8 @@ $(function () {
QUnit.test('should not fire shown when tab is already active', function (assert) {
assert.expect(0)
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
'<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>' +
'<li class="nav-item"><a href="#profile" class="nav-link" role="tab">Profile</a></li>' +
'<li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>' +
'<li class="nav-item" role="presentation"><a href="#profile" class="nav-link" role="tab">Profile</a></li>' +
'</ul>' +
'<div class="tab-content">' +
'<div class="tab-pane active" id="home" role="tabpanel"></div>' +
Expand Down Expand Up @@ -387,8 +387,8 @@ $(function () {
assert.expect(6)
var done = assert.async()
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
'<li class="nav-item"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>' +
'<li class="nav-item"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>' +
'<li class="nav-item" role="presentation"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>' +
'<li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>' +
'</ul>' +
'<div class="tab-content">' +
'<div class="tab-pane fade" id="home" role="tabpanel"></div>' +
Expand Down Expand Up @@ -421,17 +421,17 @@ $(function () {

var html = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item">',
' <li class="nav-item" role="presentation">',
' <a class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">',
' <button class="close"><span aria-hidden="true">&times;</span></button>',
' </a>',
' </li>',
' <li class="nav-item">',
' <li class="nav-item" role="presentation">',
' <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-toggle="tab">',
' <button class="close"><span aria-hidden="true">&times;</span></button>',
' </a>',
' </li>',
' <li class="nav-item">',
' <li class="nav-item" role="presentation">',
' <a class="nav-link nav-tab" href="#references" role="tab" data-toggle="tab">',
' <button id="btnClose" class="close"><span aria-hidden="true">&times;</span></button>',
' </a>',
Expand Down Expand Up @@ -466,14 +466,14 @@ $(function () {

var html = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item">',
' <li class="nav-item" role="presentation">',
' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
' </li>',
' <li class="nav-item">',
' <li class="nav-item" role="presentation">',
' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
' </li>',
'</ul>',
'<div class="tab-content">',
'<div class="tab-content" role="presentation">',
' <div role="tabpanel" class="tab-pane" id="home">test 1</div>',
' <div role="tabpanel" class="tab-pane" id="profile">test 2</div>',
'</div>'
Expand All @@ -494,10 +494,10 @@ $(function () {

var html = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item">',
' <li class="nav-item" role="presentation">',
' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
' </li>',
' <li class="nav-item">',
' <li class="nav-item" role="presentation">',
' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
' </li>',
'</ul>',
Expand Down
8 changes: 4 additions & 4 deletions js/tests/visual/collapse.html
View file
Open in desktop
Expand Up @@ -11,7 +11,7 @@
<h1>Collapse <small>Bootstrap Visual Test</small></h1>

<div id="accordion" role="tablist">
<div class="card">
<div class="card" role="presentation">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Expand All @@ -26,7 +26,7 @@ <h5 class="mb-0">
</div>
</div>
</div>
<div class="card">
<div class="card" role="presentation">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Expand All @@ -40,7 +40,7 @@ <h5 class="mb-0">
</div>
</div>
</div>
<div class="card">
<div class="card" role="presentation">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Expand All @@ -54,7 +54,7 @@ <h5 class="mb-0">
</div>
</div>
</div>
<div class="card">
<div class="card" role="presentation">
<div class="card-header" role="tab" id="headingFour">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Expand Down
6 changes: 3 additions & 3 deletions js/tests/visual/modal.html
View file
Open in desktop
Expand Up @@ -55,7 +55,7 @@ <h4>Tooltips in a modal</h4>
<p><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p>

<div id="accordion" role="tablist">
<div class="card">
<div class="card" role="presentation">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Expand All @@ -70,7 +70,7 @@ <h5 class="mb-0">
</div>
</div>
</div>
<div class="card">
<div class="card" role="presentation">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Expand All @@ -84,7 +84,7 @@ <h5 class="mb-0">
</div>
</div>
</div>
<div class="card">
<div class="card" role="presentation">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Expand Down
60 changes: 28 additions & 32 deletions js/tests/visual/tab.html
View file
Open in desktop
Expand Up @@ -18,18 +18,17 @@ <h1>Tab <small>Bootstrap Visual Test</small></h1>
<h4>Tabs without fade</h4>

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a class="dropdown-item" data-toggle="tab" href="#fat" role="tab">@fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
</div>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#fat" role="tab">@fat</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
</li>
</ul>

Expand All @@ -55,18 +54,17 @@ <h4>Tabs without fade</h4>
<h4>Tabs with fade</h4>

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-toggle="tab" href="#home2" role="tab">Home</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown2">
<a class="dropdown-item" data-toggle="tab" href="#fat2" role="tab">@fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
</div>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#fat2" role="tab">@fat</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
</li>
</ul>

Expand All @@ -92,18 +90,17 @@ <h4>Tabs with fade</h4>
<h4>Tabs without fade (no initially active pane)</h4>

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#home3" role="tab">Home</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown3">
<a class="dropdown-item" data-toggle="tab" href="#fat3" role="tab">@fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
</div>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#fat3" role="tab">@fat</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
</li>
</ul>

Expand All @@ -129,18 +126,17 @@ <h4>Tabs without fade (no initially active pane)</h4>
<h4>Tabs with fade (no initially active pane)</h4>

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#home4" role="tab">Home</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#profile4" role="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown4">
<a class="dropdown-item" data-toggle="tab" href="#fat4" role="tab">@fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo4" role="tab">@mdo</a>
</div>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#fat4" role="tab">@fat</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#mdo4" role="tab">@mdo</a>
</li>
</ul>

Expand Down
40 changes: 20 additions & 20 deletions site/docs/4.4/components/navs.md
View file
Open in desktop
Expand Up @@ -329,13 +329,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,

<div class="bd-example bd-example-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
Expand All @@ -354,13 +354,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,

{% highlight html %}
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
Expand Down Expand Up @@ -413,13 +413,13 @@ The tabs plugin also works with pills.

<div class="bd-example bd-example-tabs">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
Expand All @@ -438,13 +438,13 @@ The tabs plugin also works with pills.

{% highlight html %}
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
Expand Down Expand Up @@ -514,16 +514,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
{% highlight html %}
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
Expand Down Expand Up @@ -580,16 +580,16 @@ Activates a tab element and content container. Tab should have either a `data-ta

{% highlight html %}
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<li class="nav-item" role="presentation">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
Expand Down