From 96be06e32bf68de22d8d14362909dd688070ca40 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Tue, 9 Feb 2021 05:23:45 +0000
Subject: Dynamic tabs: use buttons rather than links (#32630)

* Dynamic tabs: use buttons rather than links

- change docs
- add mention that tabs should be <button> elements
- tweak styles to neutralise border and background

* Update js unit and visual test accordingly

- replace links with buttons
- make one specific test that uses links instead of buttons, as we still want to support it despite it being non-semantically appropriate
- Leaving a couple of tests for now. The test for removed tabs should be redone so that tabs are removed programmatically (as the approach of having that close button inside the link is invalid and broken markup). The test for dropdowns should be removed together we actually ripping out the handling for dropdowns in the tab.js code (arguably a breaking change, though we discouraged this for a few versions and effectively "deprecated" it)

* Add isolation:isolate to prevent focus being overlapped

https://github.com/twbs/bootstrap/pull/32630#issuecomment-756015766
---
 js/tests/visual/tab.html | 67 +++++++++++++++++++++++-------------------------
 1 file changed, 32 insertions(+), 35 deletions(-)

(limited to 'js/tests/visual/tab.html')

diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index 0f7b734e7..eeace6bbb 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -19,16 +19,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab">Home</a>
+          <button type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#home" role="tab" aria-selected="true">Home</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab">Profile</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#profile" role="tab">Profile</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#fat" role="tab">@fat</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#fat" role="tab">@fat</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#mdo" role="tab">@mdo</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#mdo" role="tab">@mdo</button>
         </li>
       </ul>
 
@@ -55,16 +55,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link active" data-bs-toggle="tab" href="#home2" role="tab">Home</a>
+          <button type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#home2" role="tab" aria-selected="true">Home</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#profile2" role="tab">Profile</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#profile2" role="tab">Profile</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#fat2" role="tab">@fat</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#fat2" role="tab">@fat</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#mdo2" role="tab">@mdo</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#mdo2" role="tab">@mdo</button>
         </li>
       </ul>
 
@@ -91,16 +91,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#home3" role="tab">Home</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#home3" role="tab">Home</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#profile3" role="tab">Profile</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#profile3" role="tab">Profile</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#fat3" role="tab">@fat</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#fat3" role="tab">@fat</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#mdo3" role="tab">@mdo</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#mdo3" role="tab">@mdo</button>
         </li>
       </ul>
 
@@ -127,16 +127,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#home4" role="tab">Home</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#home4" role="tab">Home</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#profile4" role="tab">Profile</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#profile4" role="tab">Profile</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#fat4" role="tab">@fat</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#fat4" role="tab">@fat</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-bs-toggle="tab" href="#mdo4" role="tab">@mdo</a>
+          <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#mdo4" role="tab">@mdo</button>
         </li>
       </ul>
 
@@ -159,26 +159,23 @@
         </div>
       </div>
 
-      <h4>Tabs with nav (with fade)</h4>
-      <nav class="nav nav-pills">
-        <a class="nav-link nav-item active" data-bs-toggle="tab" href="#home5">Home</a>
-        <a class="nav-link nav-item" data-bs-toggle="tab" href="#profile5">Profile</a>
-        <div class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-          <ul class="dropdown-menu" aria-labelledby="dropdown5">
-            <li><a class="dropdown-item" data-bs-toggle="tab" href="#fat5">@fat</a></li>
-            <li><a class="dropdown-item" data-bs-toggle="tab" href="#mdo5">@mdo</a></li>
-          </ul>
-        </div>
-        <a class="nav-link nav-item disabled" href="#">Disabled</a>
+      <h4>Tabs with nav and using links (with fade)</h4>
+      <nav>
+          <div class="nav nav-pills" id="nav-tab" role="tablist">
+          <a class="nav-link nav-item active" role="tab" data-bs-toggle="tab" href="#home5">Home</a>
+          <a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#profile5">Profile</a>
+          <a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#fat5">@fat</a>
+          <a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#mdo5">@mdo</a>
+          <a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a>
+        </div>
       </nav>
 
-      <div class="tab-content" role="tabpanel">
-        <div role="tabpanel" class="tab-pane fade show active" id="home5">
+      <div class="tab-content">
+        <div class="tab-pane fade show active" id="home5" role="tabpanel">
           <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
           <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
         </div>
-        <div role="tabpanel" class="tab-pane fade" id="profile5">
+        <div class="tab-pane fade" id="profile5" role="tabpanel">
           <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
           <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
         </div>
@@ -196,10 +193,10 @@
       <div class="row">
         <div class="col-4">
           <div class="list-group" id="list-tab" role="tablist">
-            <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a>
-            <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
-            <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
-            <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
+            <button type="button" class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="tab" data-bs-target="#list-home" role="tab" aria-controls="list-home" aria-selected="true">Home</button>
+            <button type="button"  class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab" data-bs-target="#list-profile" role="tab" aria-controls="list-profile">Profile</button>
+            <button type="button"  class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="tab" data-bs-target="#list-messages" role="tab" aria-controls="list-messages">Messages</button>
+            <button type="button"  class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="tab" data-bs-target="#list-settings" role="tab" aria-controls="list-settings">Settings</button>
           </div>
         </div>
         <div class="col-8">
-- 
cgit v1.2.3