diff options
author | Laussel Loïc <loic.laussel@orange.com> | 2020-04-10 08:35:09 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-04-10 08:35:09 +0300 |
commit | 0cf29baf63a515fe41eb97fc3fab98c5f69d16d6 (patch) | |
tree | ac8dad33b85fc649972e745f696dd655036ba49b /site | |
parent | 8cc9defbc0f236beb02a923b6dd944560fbb1d2c (diff) |
v4 tabs - accessibility issue when using ul/li semantic (#30381)
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 'site')
-rw-r--r-- | site/docs/4.4/components/navs.md | 40 |
1 files changed, 20 insertions, 20 deletions
diff --git a/site/docs/4.4/components/navs.md b/site/docs/4.4/components/navs.md index 6404f03a26..0787632be4 100644 --- a/site/docs/4.4/components/navs.md +++ b/site/docs/4.4/components/navs.md @@ -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> @@ -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> @@ -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> @@ -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> @@ -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> @@ -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> |