mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 06:44:35 +02:00
Code Issues Releases Wiki Activity

v5 tabs - accessibility issue when using ul/li semantic

Browse Source 
Add aria-role presentation on li element when ul element has role tablist and remove dropdown from visual tests as they've been removed from doc
This commit is contained in:
Laussel Loïc
2020-03-28 08:51:24 +01:00
committed by GitHub
parent 860b511e03
commit 7ce29d75f3
5 changed files with 72 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/tests/visual/collapse.html
View File

@@ -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">
@@ -26,7 +26,7 @@
</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">
@@ -40,7 +40,7 @@
</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">
@@ -54,7 +54,7 @@
</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">

6
js/tests/visual/modal.html
View File

@@ -55,7 +55,7 @@
<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">
@@ -70,7 +70,7 @@
</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">
@@ -84,7 +84,7 @@
</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">

60
js/tests/visual/tab.html
View File

@@ -18,18 +18,17 @@
<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>
@@ -55,18 +54,17 @@
<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>
@@ -92,18 +90,17 @@
<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>
@@ -129,18 +126,17 @@
<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>