From: Laussel Loïc <loic.laussel@orange.com>
Date: Sat, 28 Mar 2020 07:51:24 +0000 (+0100)
Subject: v5 tabs - accessibility issue when using ul/li semantic
X-Git-Tag: v5.0.0-alpha1~298
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7ce29d75f38f2c81f57e8a6cf14c510655e2e316;p=thirdparty%2Fbootstrap.git

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
---

diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 3e45f4d03e..70aa8eb336 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -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>',
@@ -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>',
@@ -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>',
@@ -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>',
@@ -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>',
@@ -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>',
@@ -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>',
@@ -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>',
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index 1e1f7f967b..0bc82923ec 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -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">
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index e08f591ef1..0d88046789 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -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">
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>
 
diff --git a/site/content/docs/4.3/components/navs.md b/site/content/docs/4.3/components/navs.md
index adbb7749ba..0c7f549814 100644
--- a/site/content/docs/4.3/components/navs.md
+++ b/site/content/docs/4.3/components/navs.md
@@ -313,13 +313,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
 
 <div class="bd-example">
   <ul class="nav nav-tabs mb-3" 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>
@@ -338,13 +338,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>
@@ -397,13 +397,13 @@ The tabs plugin also works with pills.
 
 <div class="bd-example">
   <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>
@@ -422,13 +422,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>
@@ -498,16 +498,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>
@@ -572,16 +572,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>