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

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>