diff options
author | Laussel Loïc <loic.laussel@orange.com> | 2020-03-28 10:51:24 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-03-28 10:51:24 +0300 |
commit | 7ce29d75f38f2c81f57e8a6cf14c510655e2e316 (patch) | |
tree | d597a02ade1bcb15be50a658402394e3b37e8317 /js/tests/visual/tab.html | |
parent | 860b511e0339df6c5baffa9671c84ef5f0c26abd (diff) |
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 cc7fa68212..323b65c296 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> |