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

v5 tabs - accessibility issue when using ul/li semantic #30382

Merged
merged 2 commits into from Mar 28, 2020
Merged

v5 tabs - accessibility issue when using ul/li semantic #30382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d416b9
v5 fix #30338 add aria-role presentation on li element when ul elemen…
Lausselloic Mar 11, 2020
de6a230
Merge branch 'master' into v5-fix-aria-tab
ffoodd Mar 27, 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
34 changes: 17 additions & 17 deletions js/tests/unit/tab.spec.js
View file
Open in desktop
Expand Up @@ -129,8 +129,8 @@ describe('Tab', () => {
it('should not fire shown when tab is already active', done => {
fixtureEl.innerHTML = [
'<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 All @@ -155,8 +155,8 @@ describe('Tab', () => {
it('should not fire shown when tab is disabled', done => {
fixtureEl.innerHTML = [
'<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 disabled" 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 disabled" role="tab">Profile</a></li>',
'</ul>',
'<div class="tab-content">',
' <div class="tab-pane active" id="home" role="tabpanel"></div>',
Expand All @@ -181,8 +181,8 @@ describe('Tab', () => {
it('show and shown events should reference correct relatedTarget', done => {
fixtureEl.innerHTML = [
'<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 id="triggerProfile" 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 id="triggerProfile" 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 @@ -275,17 +275,17 @@ describe('Tab', () => {
it('should handle removed tabs', done => {
fixtureEl.innerHTML = [
'<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 @@ -418,8 +418,8 @@ describe('Tab', () => {
it('should create dynamically a tab', done => {
fixtureEl.innerHTML = [
'<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 id="triggerProfile" data-toggle="tab" 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 id="triggerProfile" data-toggle="tab" 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 @@ -504,8 +504,8 @@ describe('Tab', () => {
it('should not remove fade class if no active pane is present', done => {
fixtureEl.innerHTML = [
'<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 @@ -541,10 +541,10 @@ describe('Tab', () => {
it('should not add show class to tab panes if there is no `.fade` class', done => {
fixtureEl.innerHTML = [
'<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 All @@ -567,10 +567,10 @@ describe('Tab', () => {
it('should add show class to tab panes if there is a `.fade` class', done => {
fixtureEl.innerHTML = [
'<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-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-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-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-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