diff options
| author | Laussel Loïc <[email protected]> | 2020-03-28 08:51:24 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-03-28 09:51:24 +0200 |
| commit | 7ce29d75f38f2c81f57e8a6cf14c510655e2e316 (patch) | |
| tree | d597a02ade1bcb15be50a658402394e3b37e8317 /js/tests/visual/tab.html | |
| parent | 860b511e0339df6c5baffa9671c84ef5f0c26abd (diff) | |
| download | bootstrap-7ce29d75f38f2c81f57e8a6cf14c510655e2e316.tar.xz bootstrap-7ce29d75f38f2c81f57e8a6cf14c510655e2e316.zip | |
v5 tabs - accessibility issue when using ul/li semantic
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
Diffstat (limited to 'js/tests/visual/tab.html')
| -rw-r--r-- | js/tests/visual/tab.html | 60 |
1 files changed, 28 insertions, 32 deletions
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index cc7fa6821..323b65c29 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -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> |