From 1d9e3fb1943f44e0982678ed3db11e98fa113fd6 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 21 Feb 2021 01:43:13 +0200
Subject: [PATCH 01/16] Manually backport 32630

Dynamic tabs: use buttons rather than links
---
 js/tests/unit/tab.js                     | 208 +++++++++++------------
 js/tests/visual/tab.html                 |  57 +++----
 scss/_nav.scss                           |   5 +
 site/content/docs/4.6/components/navs.md |  86 +++++-----
 4 files changed, 177 insertions(+), 179 deletions(-)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index a0c4ddf15547..a79e3c634788 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -44,14 +44,30 @@ $(function () {
     assert.strictEqual($tab[0], $el[0], 'collection contains element')
   })
 
-  QUnit.test('should activate element by tab id', function (assert) {
+  QUnit.test('should activate element by tab id (using buttons, the preferred semantic way)', function (assert) {
     assert.expect(2)
-    var tabsHTML = '<ul class="nav">' +
-        '<li><a href="#home">Home</a></li>' +
-        '<li><a href="#profile">Profile</a></li>' +
+    var tabsHTML = '<ul class="nav" role="tablist">' +
+        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
         '</ul>'
 
-    $('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
+    $('<ul><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ul>').appendTo('#qunit-fixture')
+
+    $(tabsHTML).find('li:last-child button').bootstrapTab('show')
+    assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
+
+    $(tabsHTML).find('li:first-child button').bootstrapTab('show')
+    assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
+  })
+
+  QUnit.test('should activate element by tab id (using links for tabs - not ideal, but still supported)', function (assert) {
+    assert.expect(2)
+    var tabsHTML = '<ul class="nav" role="tablist">' +
+        '<li><a href="#home" role="tab">Home</a></li>' +
+        '<li><a href="#profile" role="tab">Profile</a></li>' +
+        '</ul>'
+
+    $('<ul><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ul>').appendTo('#qunit-fixture')
 
     $(tabsHTML).find('li:last-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
@@ -79,48 +95,48 @@ $(function () {
   QUnit.test('should activate element by tab id in ordered list', function (assert) {
     assert.expect(2)
     var pillsHTML = '<ol class="nav nav-pills">' +
-        '<li><a href="#home">Home</a></li>' +
-        '<li><a href="#profile">Profile</a></li>' +
+        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li><button type="button" href="#profile" role="tab">Profile</button></li>' +
         '</ol>'
 
-    $('<ol><li id="home"/><li id="profile"/></ol>').appendTo('#qunit-fixture')
+    $('<ol><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ol>').appendTo('#qunit-fixture')
 
-    $(pillsHTML).find('li:last-child a').bootstrapTab('show')
+    $(pillsHTML).find('li:last-child button').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
 
-    $(pillsHTML).find('li:first-child a').bootstrapTab('show')
+    $(pillsHTML).find('li:first-child button').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
   QUnit.test('should activate element by tab id in nav list', function (assert) {
     assert.expect(2)
     var tabsHTML = '<nav class="nav">' +
-                      '<a href="#home">Home</a>' +
-                      '<a href="#profile">Profile</a>' +
+                      '<button type="button" data-target="#home" role="tab">Home</button>' +
+                      '<button type="button" data-target="#profile" role="tab">Profile</a>' +
                     '</nav>'
 
-    $('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
+    $('<div><div id="home" role="tabpanel"></div><div id="profile" role="tabpanel"></div></div>').appendTo('#qunit-fixture')
 
-    $(tabsHTML).find('a:last-child').bootstrapTab('show')
+    $(tabsHTML).find('button:last-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
 
-    $(tabsHTML).find('a:first-child').bootstrapTab('show')
+    $(tabsHTML).find('button:first-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
   QUnit.test('should activate element by tab id in list group', function (assert) {
     assert.expect(2)
-    var tabsHTML = '<div class="list-group">' +
-                      '<a href="#home">Home</a>' +
-                      '<a href="#profile">Profile</a>' +
+    var tabsHTML = '<div class="list-group" role="tablist">' +
+                      '<button type="button" data-target="#home" role="tab">Home</button>' +
+                      '<button type="button" data-target="#profile" role="tab">Profile</button>' +
                     '</div>'
 
-    $('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
+    $('<div><div id="home" role="tabpanel"></div><div id="profile" role="tabpanel"></div></div>').appendTo('#qunit-fixture')
 
-    $(tabsHTML).find('a:last-child').bootstrapTab('show')
+    $(tabsHTML).find('button:last-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
 
-    $(tabsHTML).find('a:first-child').bootstrapTab('show')
+    $(tabsHTML).find('button:first-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
@@ -143,8 +159,8 @@ $(function () {
   QUnit.test('should not fire shown when tab is already active', function (assert) {
     assert.expect(0)
     var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
-      '<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>' +
+      '<li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
+      '<li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab">Profile</button></li>' +
       '</ul>' +
       '<div class="tab-content">' +
       '<div class="tab-pane active" id="home" role="tabpanel"></div>' +
@@ -152,7 +168,7 @@ $(function () {
       '</div>'
 
     $(tabsHTML)
-      .find('a.active')
+      .find('button.active')
       .on('shown.bs.tab', function () {
         assert.ok(true, 'shown event fired')
       })
@@ -162,8 +178,8 @@ $(function () {
   QUnit.test('should not fire shown when tab is disabled', function (assert) {
     assert.expect(0)
     var tabsHTML = '<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"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
+      '<li class="nav-item"><button type="button" data-target="#profile" class="nav-link disabled" role="tab">Profile</button></li>' +
       '</ul>' +
       '<div class="tab-content">' +
       '<div class="tab-pane active" id="home" role="tabpanel"></div>' +
@@ -171,7 +187,7 @@ $(function () {
       '</div>'
 
     $(tabsHTML)
-      .find('a.disabled')
+      .find('button.disabled')
       .on('shown.bs.tab', function () {
         assert.ok(true, 'shown event fired')
       })
@@ -182,26 +198,26 @@ $(function () {
     assert.expect(2)
     var done = assert.async()
 
-    var dropHTML =
-        '<ul class="drop nav">' +
-        '  <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' +
-        '    <ul class="dropdown-menu nav">' +
-        '      <li><a href="#a1-1" data-toggle="tab">1-1</a></li>' +
-        '      <li><a href="#a1-2" data-toggle="tab">1-2</a></li>' +
-        '    </ul>' +
-        '  </li>' +
-        '</ul>'
+    var tabsHTML =
+        '<ul class="nav nav-tabs" role="tablist">' +
+        '  <li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
+        '  <li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab">Profile</button></li>' +
+        '</ul>' +
+        '<div class="tab-content">' +
+        '  <div class="tab-pane active" id="home" role="tabpanel"></div>' +
+        '  <div class="tab-pane" id="profile" role="tabpanel"></div>' +
+        '</div>'
 
-    $(dropHTML)
-      .find('ul > li:first-child a')
+    $(tabsHTML)
+      .find('ul > li:first-child button')
       .bootstrapTab('show')
       .end()
-      .find('ul > li:last-child a')
+      .find('ul > li:last-child button')
       .on('show.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.hash, '#a1-1', 'references correct element as relatedTarget')
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
       })
       .on('shown.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.hash, '#a1-1', 'references correct element as relatedTarget')
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
         done()
       })
       .bootstrapTab('show')
@@ -211,30 +227,30 @@ $(function () {
     assert.expect(2)
     var done = assert.async()
 
-    var tabsHTML = '<ul class="nav">' +
-        '<li><a href="#home">Home</a></li>' +
-        '<li><a href="#profile">Profile</a></li>' +
+    var tabsHTML = '<ul class="nav" role="tablist">' +
+        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li><button type="button" data-target="#profile">Profile</button></li>' +
         '</ul>'
 
     $(tabsHTML)
-      .find('li:first-child a')
+      .find('li:first-child button')
       .on('hide.bs.tab', function () {
         assert.ok(true, 'hide event fired')
       })
       .bootstrapTab('show')
       .end()
-      .find('li:last-child a')
+      .find('li:last-child button')
       .bootstrapTab('show')
 
     $(tabsHTML)
-      .find('li:first-child a')
+      .find('li:first-child button')
       .on('hidden.bs.tab', function () {
         assert.ok(true, 'hidden event fired')
         done()
       })
       .bootstrapTab('show')
       .end()
-      .find('li:last-child a')
+      .find('li:last-child button')
       .bootstrapTab('show')
   })
 
@@ -242,13 +258,13 @@ $(function () {
     assert.expect(1)
     var done = assert.async()
 
-    var tabsHTML = '<ul class="nav">' +
-        '<li><a href="#home">Home</a></li>' +
-        '<li><a href="#profile">Profile</a></li>' +
+    var tabsHTML = '<ul class="nav" role="tablist">' +
+        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
         '</ul>'
 
     $(tabsHTML)
-      .find('li:first-child a')
+      .find('li:first-child button')
       .on('hide.bs.tab', function (e) {
         e.preventDefault()
         assert.ok(true, 'hide event fired')
@@ -259,7 +275,7 @@ $(function () {
       })
       .bootstrapTab('show')
       .end()
-      .find('li:last-child a')
+      .find('li:last-child button')
       .bootstrapTab('show')
   })
 
@@ -267,82 +283,62 @@ $(function () {
     assert.expect(2)
     var done = assert.async()
 
-    var tabsHTML = '<ul class="nav">' +
-        '<li><a href="#home">Home</a></li>' +
-        '<li><a href="#profile">Profile</a></li>' +
+    var tabsHTML = '<ul class="nav" role="tablist">' +
+        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
         '</ul>'
 
     $(tabsHTML)
-      .find('li:first-child a')
+      .find('li:first-child button')
       .on('hide.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#profile', 'references correct element as relatedTarget')
       })
       .on('hidden.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#profile', 'references correct element as relatedTarget')
         done()
       })
       .bootstrapTab('show')
       .end()
-      .find('li:last-child a')
+      .find('li:last-child button')
       .bootstrapTab('show')
   })
 
   QUnit.test('selected tab should have aria-selected', function (assert) {
     assert.expect(8)
-    var tabsHTML = '<ul class="nav nav-tabs">' +
-        '<li><a class="nav-item active" href="#home" toggle="tab" aria-selected="true">Home</a></li>' +
-        '<li><a class="nav-item" href="#profile" toggle="tab" aria-selected="false">Profile</a></li>' +
+    var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
+        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
         '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 
-    $tabs.find('li:first-child a').bootstrapTab('show')
+    $tabs.find('li:first-child button').bootstrapTab('show')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true')
-    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
+    assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
 
-    $tabs.find('li:last-child a').trigger('click')
+    $tabs.find('li:last-child button').trigger('click')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after click, shown tab has aria-selected = true')
-    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after click, hidden tab has aria-selected = false')
+    assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'after click, hidden tab has aria-selected = false')
 
-    $tabs.find('li:first-child a').bootstrapTab('show')
+    $tabs.find('li:first-child button').bootstrapTab('show')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true')
-    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
+    assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
 
-    $tabs.find('li:first-child a').trigger('click')
+    $tabs.find('li:first-child button').trigger('click')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after second show event, shown tab still has aria-selected = true')
-    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after second show event, hidden tab has aria-selected = false')
+    assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'after second show event, hidden tab has aria-selected = false')
   })
 
   QUnit.test('selected tab should deactivate previous selected tab', function (assert) {
     assert.expect(2)
-    var tabsHTML = '<ul class="nav nav-tabs">' +
-        '<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>' +
-        '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' +
-        '</ul>'
-    var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
-
-    $tabs.find('li:last-child a').trigger('click')
-    assert.notOk($tabs.find('li:first-child a').hasClass('active'))
-    assert.ok($tabs.find('li:last-child a').hasClass('active'))
-  })
-
-  QUnit.test('selected tab should deactivate previous selected link in dropdown', function (assert) {
-    assert.expect(3)
-    var tabsHTML = '<ul class="nav nav-tabs">' +
-        '<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>' +
-        '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' +
-        '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>' +
-        '<div class="dropdown-menu">' +
-        '<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>' +
-        '<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>' +
-        '</div>' +
-        '</li>' +
+    var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
+        '<li class="nav-item"><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li class="nav-item"><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
         '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 
-    $tabs.find('li:first-child a').trigger('click')
-    assert.ok($tabs.find('li:first-child a').hasClass('active'))
-    assert.notOk($tabs.find('li:last-child a').hasClass('active'))
-    assert.notOk($tabs.find('li:last-child .dropdown-menu a:first-child').hasClass('active'))
+    $tabs.find('li:last-child button').trigger('click')
+    assert.notOk($tabs.find('li:first-child button').hasClass('active'))
+    assert.ok($tabs.find('li:last-child button').hasClass('active'))
   })
 
   QUnit.test('Nested tabs', function (assert) {
@@ -350,9 +346,9 @@ $(function () {
     var done = assert.async()
     var tabsHTML =
         '<nav class="nav nav-tabs" role="tablist">' +
-        '  <a id="tab1" href="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>' +
-        '  <a href="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>' +
-        '  <a href="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>' +
+        '  <button type="button" id="tab1" data-target="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</button>' +
+        '  <button type="button" data-target="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</button>' +
+        '  <button type="button" data-target="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</button>' +
         '</nav>' +
         '<div class="tab-content">' +
         '  <div class="tab-pane" id="x-tab1" role="tabpanel">' +
@@ -387,8 +383,8 @@ $(function () {
     assert.expect(6)
     var done = assert.async()
     var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
-      '<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>' +
+      '<li class="nav-item" role="presentation"><button type="button" id="tab-home" data-target="#home" class="nav-link" data-toggle="tab" role="tab">Home</button></li>' +
+      '<li class="nav-item" role="presentation"><button type="button" id="tab-profile" data-target="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</button></li>' +
       '</ul>' +
       '<div class="tab-content">' +
       '<div class="tab-pane fade" id="home" role="tabpanel"></div>' +
@@ -467,10 +463,10 @@ $(function () {
     var html = [
       '<ul class="nav nav-tabs" role="tablist">',
       '  <li class="nav-item" role="presentation">',
-      '    <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
+      '    <button type="button" class="nav-link nav-tab" data-target="#home" role="tab" data-toggle="tab">Home</button>',
       '  </li>',
       '  <li class="nav-item" role="presentation">',
-      '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
+      '    <button type="button" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">Profile</button>',
       '  </li>',
       '</ul>',
       '<div class="tab-content" role="presentation">',
@@ -495,10 +491,10 @@ $(function () {
     var html = [
       '<ul class="nav nav-tabs" role="tablist">',
       '  <li class="nav-item" role="presentation">',
-      '    <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
+      '     <button type="button" class="nav-link nav-tab" data-target="#home" role="tab" data-toggle="tab">Home</button>',
       '  </li>',
       '  <li class="nav-item" role="presentation">',
-      '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
+      '    <button type="button" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">Profile</button>',
       '  </li>',
       '</ul>',
       '<div class="tab-content">',
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index 1ffedec95258..882ea641a88d 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -19,16 +19,16 @@ <h4>Tabs without fade</h4>
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
+          <button type="button" class="nav-link active" data-toggle="tab" data-target="#home" role="tab" aria-selected="true">Home</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#profile" role="tab">Profile</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat" role="tab">@fat</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#fat" role="tab">@fat</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#mdo" role="tab">@mdo</button>
         </li>
       </ul>
 
@@ -55,16 +55,16 @@ <h4>Tabs with fade</h4>
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link active" data-toggle="tab" href="#home2" role="tab">Home</a>
+          <button type="button" class="nav-link active" data-toggle="tab" data-target="#home2" role="tab" aria-selected="true">Home</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#profile2" role="tab">Profile</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat2" role="tab">@fat</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#fat2" role="tab">@fat</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#mdo2" role="tab">@mdo</button>
         </li>
       </ul>
 
@@ -91,16 +91,16 @@ <h4>Tabs without fade (no initially active pane)</h4>
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#home3" role="tab">Home</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#home3" role="tab">Home</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#profile3" role="tab">Profile</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat3" role="tab">@fat</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#fat3" role="tab">@fat</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#mdo3" role="tab">@mdo</button>
         </li>
       </ul>
 
@@ -159,26 +159,23 @@ <h4>Tabs with fade (no initially active pane)</h4>
         </div>
       </div>
 
-      <h4>Tabs with nav (with fade)</h4>
-      <nav class="nav nav-pills">
-        <a class="nav-link nav-item active" data-toggle="tab" href="#home5">Home</a>
-        <a class="nav-link nav-item" data-toggle="tab" href="#profile5">Profile</a>
-        <div class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-          <div class="dropdown-menu" aria-labelledby="dropdown5">
-            <a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a>
-            <a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a>
-          </div>
+      <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-toggle="tab" href="#home5">Home</a>
+          <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#profile5">Profile</a>
+          <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#fat5">@fat</a>
+          <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#mdo5">@mdo</a>
+          <a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a>
         </div>
-        <a class="nav-link nav-item disabled" href="#">Disabled</a>
       </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 @@ <h4>Tabs with list-group (with fade)</h4>
       <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-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-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-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-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-target="#list-settings" role="tab" aria-controls="list-settings">Settings</button>
           </div>
         </div>
         <div class="col-8">
diff --git a/scss/_nav.scss b/scss/_nav.scss
index fad684e57b4b..a58814f6d322 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -37,11 +37,14 @@
 
   .nav-link {
     margin-bottom: -$nav-tabs-border-width;
+    background: none;
     border: $nav-tabs-border-width solid transparent;
     @include border-top-radius($nav-tabs-border-radius);
 
     @include hover-focus() {
       border-color: $nav-tabs-link-hover-border-color;
+      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+      isolation: isolate;
     }
 
     &.disabled {
@@ -73,6 +76,8 @@
 
 .nav-pills {
   .nav-link {
+    background: none;
+    border: 0;
     @include border-radius($nav-pills-border-radius);
   }
 
diff --git a/site/content/docs/4.6/components/navs.md b/site/content/docs/4.6/components/navs.md
index 5a1cdcc812b2..6fc733161bce 100644
--- a/site/content/docs/4.6/components/navs.md
+++ b/site/content/docs/4.6/components/navs.md
@@ -307,20 +307,20 @@ Use the tab JavaScript plugin—include it individually or through the compiled
 
 If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
 
-Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
+Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
 
 Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
 
 <div class="bd-example bd-example-tabs">
   <ul class="nav nav-tabs" id="myTab" role="tablist">
     <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>
+      <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
     </li>
     <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>
+      <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
     </li>
     <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>
+      <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
     </li>
   </ul>
   <div class="tab-content" id="myTabContent">
@@ -339,13 +339,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
 ```html
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <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>
+    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
   </li>
   <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>
+    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
   </li>
   <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>
+    <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
   </li>
 </ul>
 <div class="tab-content" id="myTabContent">
@@ -360,9 +360,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
 <div class="bd-example bd-example-tabs">
   <nav>
     <div class="nav nav-tabs" id="nav-tab" role="tablist">
-      <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
-      <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
-      <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+      <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
+      <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
+      <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
     </div>
   </nav>
   <div class="tab-content" id="nav-tabContent">
@@ -381,9 +381,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
 ```html
 <nav>
   <div class="nav nav-tabs" id="nav-tab" role="tablist">
-    <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
-    <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
-    <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
+    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
+    <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
   </div>
 </nav>
 <div class="tab-content" id="nav-tabContent">
@@ -398,13 +398,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" 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>
+      <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
     </li>
     <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>
+      <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
     </li>
     <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>
+      <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
     </li>
   </ul>
   <div class="tab-content" id="pills-tabContent">
@@ -423,13 +423,13 @@ The tabs plugin also works with pills.
 ```html
 <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
   <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>
+    <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
   </li>
   <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>
+    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
   </li>
   <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>
+    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
   </li>
 </ul>
 <div class="tab-content" id="pills-tabContent">
@@ -445,10 +445,10 @@ And with vertical pills.
   <div class="row">
     <div class="col-3">
       <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-        <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
-        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
-        <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
-        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
+        <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
+        <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
+        <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
+        <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
       </div>
     </div>
     <div class="col-9">
@@ -474,10 +474,10 @@ And with vertical pills.
 <div class="row">
   <div class="col-3">
     <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
-      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
-      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
-      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
+      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
+      <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</buttona>
+      <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
+      <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
     </div>
   </div>
   <div class="col-9">
@@ -499,16 +499,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 <!-- Nav tabs -->
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <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>
+    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
   </li>
   <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>
+    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
   </li>
   <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>
+    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
   </li>
   <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>
+    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
   </li>
 </ul>
 
@@ -526,7 +526,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
 
 ```js
-$('#myTab a').on('click', function (event) {
+$('#myTab button').on('click', function (event) {
   event.preventDefault()
   $(this).tab('show')
 })
@@ -535,10 +535,10 @@ $('#myTab a').on('click', function (event) {
 You can activate individual tabs in several ways:
 
 ```js
-$('#myTab a[href="#profile"]').tab('show') // Select tab by name
-$('#myTab li:first-child a').tab('show') // Select first tab
-$('#myTab li:last-child a').tab('show') // Select last tab
-$('#myTab li:nth-child(3) a').tab('show') // Select third tab
+$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
+$('#myTab li:first-child button').tab('show') // Select first tab
+$('#myTab li:last-child button').tab('show') // Select last tab
+$('#myTab li:nth-child(3) button').tab('show') // Select third tab
 ```
 
 ### Fade effect
@@ -562,21 +562,21 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
 
 #### $().tab
 
-Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
+Activates a tab element and content container. Tab should have either a `data-target` or, if using a link, an `href` attribute targeting a container node in the DOM.
 
 ```html
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <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>
+    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
   </li>
   <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>
+    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
   </li>
   <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>
+    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
   </li>
   <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>
+    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
   </li>
 </ul>
 
@@ -589,7 +589,7 @@ Activates a tab element and content container. Tab should have either a `data-ta
 
 <script>
   $(function () {
-    $('#myTab li:last-child a').tab('show')
+    $('#myTab li:last-child button').tab('show')
   })
 </script>
 ```
@@ -645,7 +645,7 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
 </table>
 
 ```js
-$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
+$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
   event.target // newly activated tab
   event.relatedTarget // previous active tab
 })

From 72d8864585bc458ab7bc26dc390c8d74263f2253 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Tue, 2 Mar 2021 21:46:23 +0000
Subject: [PATCH 02/16] Tweak unit test

---
 js/tests/unit/tab.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index a79e3c634788..1fecb0bd923a 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -27,7 +27,7 @@ $(function () {
 
   QUnit.test('should throw explicit error on undefined method', function (assert) {
     assert.expect(1)
-    var $el = $('<div/>')
+    var $el = $('<div></div>')
     $el.bootstrapTab()
     try {
       $el.bootstrapTab('noMethod')
@@ -38,7 +38,7 @@ $(function () {
 
   QUnit.test('should return jquery collection containing the element', function (assert) {
     assert.expect(2)
-    var $el = $('<div/>')
+    var $el = $('<div></div>')
     var $tab = $el.bootstrapTab()
     assert.ok($tab instanceof $, 'returns jquery collection')
     assert.strictEqual($tab[0], $el[0], 'collection contains element')
@@ -51,7 +51,7 @@ $(function () {
         '<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
         '</ul>'
 
-    $('<ul><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ul>').appendTo('#qunit-fixture')
+    $('<ul><li id="home" role="tabpanel"></li><li id="profile" role="tabpanel"></li></ul>').appendTo('#qunit-fixture')
 
     $(tabsHTML).find('li:last-child button').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
@@ -67,7 +67,7 @@ $(function () {
         '<li><a href="#profile" role="tab">Profile</a></li>' +
         '</ul>'
 
-    $('<ul><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ul>').appendTo('#qunit-fixture')
+    $('<ul><li id="home" role="tabpanel"></li><li id="profile" role="tabpanel"></li></ul>').appendTo('#qunit-fixture')
 
     $(tabsHTML).find('li:last-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
@@ -83,7 +83,7 @@ $(function () {
         '<li><a href="#profile">Profile</a></li>' +
         '</ul>'
 
-    $('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
+    $('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture')
 
     $(pillsHTML).find('li:last-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
@@ -99,7 +99,7 @@ $(function () {
         '<li><button type="button" href="#profile" role="tab">Profile</button></li>' +
         '</ol>'
 
-    $('<ol><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ol>').appendTo('#qunit-fixture')
+    $('<ol><li id="home" role="tabpanel"></li><li id="profile" role="tabpanel"></li></ol>').appendTo('#qunit-fixture')
 
     $(pillsHTML).find('li:last-child button').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
@@ -144,7 +144,7 @@ $(function () {
     assert.expect(1)
     var done = assert.async()
 
-    $('<div class="nav"/>')
+    $('<div class="nav"></div>')
       .on('show.bs.tab', function (e) {
         e.preventDefault()
         assert.ok(true, 'show event fired')

From d476cfaa70b17c9dec7c3af19c93e83246b79a3b Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 3 Mar 2021 20:28:31 +0000
Subject: [PATCH 03/16] Tweak unit tests

---
 js/tests/unit/tab.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 1fecb0bd923a..fb4220a7913b 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -179,7 +179,7 @@ $(function () {
     assert.expect(0)
     var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
       '<li class="nav-item"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
-      '<li class="nav-item"><button type="button" data-target="#profile" class="nav-link disabled" role="tab">Profile</button></li>' +
+      '<li class="nav-item"><button type="button" data-target="#profile" class="nav-link" disabled role="tab">Profile</button></li>' +
       '</ul>' +
       '<div class="tab-content">' +
       '<div class="tab-pane active" id="home" role="tabpanel"></div>' +
@@ -187,7 +187,7 @@ $(function () {
       '</div>'
 
     $(tabsHTML)
-      .find('button.disabled')
+      .find('button[disabled]')
       .on('shown.bs.tab', function () {
         assert.ok(true, 'shown event fired')
       })

From 3b40fdf38999d4815dabd989b1e55f9d03e80f6a Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 3 Mar 2021 20:38:29 +0000
Subject: [PATCH 04/16] More tweakage

---
 js/tests/unit/tab.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index fb4220a7913b..356b54da3e53 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -303,11 +303,11 @@ $(function () {
       .bootstrapTab('show')
   })
 
-  QUnit.test('selected tab should have aria-selected', function (assert) {
+  QUnit.test('selected tab should have correct aria-selected', function (assert) {
     assert.expect(8)
     var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
-        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
-        '<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
+        '<li><button type="button" data-target="#home" role="tab" aria-selected="false">Home</button></li>' +
+        '<li><button type="button" data-target="#profile" role="tab" aria-selected="false">Profile</button></li>' +
         '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 

From 884a698d23fec3f685372d66da396510af902c12 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 3 Mar 2021 20:48:53 +0000
Subject: [PATCH 05/16] show() should also bail if `disabled` attribute is set

---
 js/src/tab.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/src/tab.js b/js/src/tab.js
index e9a6f555fe61..2902b4f181b6 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -64,7 +64,8 @@ class Tab {
     if (this._element.parentNode &&
         this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
         $(this._element).hasClass(CLASS_NAME_ACTIVE) ||
-        $(this._element).hasClass(CLASS_NAME_DISABLED)) {
+        $(this._element).hasClass(CLASS_NAME_DISABLED) ||
+        this._element.hasAttribute('disabled')) {
       return
     }
 

From df71e26a154d7399dc877dd85171bbbc750b4922 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 3 Mar 2021 21:52:40 +0000
Subject: [PATCH 06/16] Tweak tests

---
 js/tests/unit/tab.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 356b54da3e53..ede48d52e182 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -200,11 +200,11 @@ $(function () {
 
     var tabsHTML =
         '<ul class="nav nav-tabs" role="tablist">' +
-        '  <li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
+        '  <li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link" role="tab" aria-selected="true">Home</button></li>' +
         '  <li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab">Profile</button></li>' +
         '</ul>' +
         '<div class="tab-content">' +
-        '  <div class="tab-pane active" id="home" role="tabpanel"></div>' +
+        '  <div class="tab-pane" id="home" role="tabpanel"></div>' +
         '  <div class="tab-pane" id="profile" role="tabpanel"></div>' +
         '</div>'
 
@@ -217,7 +217,7 @@ $(function () {
         assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
       })
       .on('shown.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#profile', 'references correct element as relatedTarget')
         done()
       })
       .bootstrapTab('show')

From 387e2fbd67d70a0bf547c97f384c8a07cc97443c Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 3 Mar 2021 22:06:28 +0000
Subject: [PATCH 07/16] Simplify test for relatedTarget

---
 js/tests/unit/tab.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index ede48d52e182..06c3352836c6 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -200,24 +200,21 @@ $(function () {
 
     var tabsHTML =
         '<ul class="nav nav-tabs" role="tablist">' +
-        '  <li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link" role="tab" aria-selected="true">Home</button></li>' +
-        '  <li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab">Profile</button></li>' +
+        '  <li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
+        '  <li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab" aria-selected="false">Profile</button></li>' +
         '</ul>' +
         '<div class="tab-content">' +
-        '  <div class="tab-pane" id="home" role="tabpanel"></div>' +
+        '  <div class="tab-pane active" id="home" role="tabpanel"></div>' +
         '  <div class="tab-pane" id="profile" role="tabpanel"></div>' +
         '</div>'
 
     $(tabsHTML)
-      .find('ul > li:first-child button')
-      .bootstrapTab('show')
-      .end()
       .find('ul > li:last-child button')
       .on('show.bs.tab', function (e) {
         assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
       })
       .on('shown.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#profile', 'references correct element as relatedTarget')
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
         done()
       })
       .bootstrapTab('show')

From 3235353bfb80e56960b05605065b13d04c9f46fc Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 3 Mar 2021 22:34:18 +0000
Subject: [PATCH 08/16] Temporarily remove problematic test

(as i can't get local tests to run just noww)
---
 js/tests/unit/tab.js | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 06c3352836c6..0c2edd632f4f 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -194,32 +194,6 @@ $(function () {
       .bootstrapTab('show')
   })
 
-  QUnit.test('show and shown events should reference correct relatedTarget', function (assert) {
-    assert.expect(2)
-    var done = assert.async()
-
-    var tabsHTML =
-        '<ul class="nav nav-tabs" role="tablist">' +
-        '  <li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
-        '  <li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab" aria-selected="false">Profile</button></li>' +
-        '</ul>' +
-        '<div class="tab-content">' +
-        '  <div class="tab-pane active" id="home" role="tabpanel"></div>' +
-        '  <div class="tab-pane" id="profile" role="tabpanel"></div>' +
-        '</div>'
-
-    $(tabsHTML)
-      .find('ul > li:last-child button')
-      .on('show.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
-      })
-      .on('shown.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
-        done()
-      })
-      .bootstrapTab('show')
-  })
-
   QUnit.test('should fire hide and hidden events', function (assert) {
     assert.expect(2)
     var done = assert.async()

From ca76557d42806e5b7befba19ba746ed757691aac Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 3 Mar 2021 22:37:06 +0000
Subject: [PATCH 09/16] Revert previous

---
 js/tests/unit/tab.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 0c2edd632f4f..06c3352836c6 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -194,6 +194,32 @@ $(function () {
       .bootstrapTab('show')
   })
 
+  QUnit.test('show and shown events should reference correct relatedTarget', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+
+    var tabsHTML =
+        '<ul class="nav nav-tabs" role="tablist">' +
+        '  <li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
+        '  <li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab" aria-selected="false">Profile</button></li>' +
+        '</ul>' +
+        '<div class="tab-content">' +
+        '  <div class="tab-pane active" id="home" role="tabpanel"></div>' +
+        '  <div class="tab-pane" id="profile" role="tabpanel"></div>' +
+        '</div>'
+
+    $(tabsHTML)
+      .find('ul > li:last-child button')
+      .on('show.bs.tab', function (e) {
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
+      })
+      .on('shown.bs.tab', function (e) {
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
+        done()
+      })
+      .bootstrapTab('show')
+  })
+
   QUnit.test('should fire hide and hidden events', function (assert) {
     assert.expect(2)
     var done = assert.async()

From 2052f21189f642ab1bb1bc804ce3c2dd53df9c63 Mon Sep 17 00:00:00 2001
From: alpadev <alpa.muc@gmail.com>
Date: Sat, 8 May 2021 17:13:55 +0200
Subject: [PATCH 10/16] test: fix broken test cases for tab.js

---
 js/tests/unit/tab.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index f1a995d16949..3bbe40b78186 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -209,7 +209,7 @@ $(function () {
         '</div>'
 
     $(tabsHTML)
-      .find('ul > li:last-child button')
+      .find('li:last-child button')
       .on('show.bs.tab', function (e) {
         assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
       })
@@ -328,8 +328,8 @@ $(function () {
   QUnit.test('selected tab should deactivate previous selected tab', function (assert) {
     assert.expect(2)
     var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
-        '<li class="nav-item"><button type="button" data-target="#home" role="tab">Home</button></li>' +
-        '<li class="nav-item"><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
+        '<li class="nav-item"><button type="button" data-target="#home" role="tab" data-toggle="tab">Home</button></li>' +
+        '<li class="nav-item"><button type="button" data-target="#profile" role="tab" data-toggle="tab">Profile</button></li>' +
         '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 

From 0824e3e9b36bd772becb6ec3e6ae1c3ace417323 Mon Sep 17 00:00:00 2001
From: alpadev <alpa.muc@gmail.com>
Date: Sat, 8 May 2021 17:31:00 +0200
Subject: [PATCH 11/16] test: fix role=tablist invalid on nav element

---
 js/tests/visual/tab.html | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index 450ccccb0a4a..882ea641a88d 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -160,12 +160,14 @@ <h4>Tabs with fade (no initially active pane)</h4>
       </div>
 
       <h4>Tabs with nav and using links (with fade)</h4>
-      <nav class="nav nav-pills" id="nav-tab" role="tablist">
-        <a class="nav-link nav-item active" role="tab" data-toggle="tab" href="#home5">Home</a>
-        <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#profile5">Profile</a>
-        <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#fat5">@fat</a>
-        <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#mdo5">@mdo</a>
-        <a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a>
+      <nav>
+        <div class="nav nav-pills" id="nav-tab" role="tablist">
+          <a class="nav-link nav-item active" role="tab" data-toggle="tab" href="#home5">Home</a>
+          <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#profile5">Profile</a>
+          <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#fat5">@fat</a>
+          <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#mdo5">@mdo</a>
+          <a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a>
+        </div>
       </nav>
 
       <div class="tab-content">

From 0a2e1eddf9f5e42c693f9d12feed80b42e59aef1 Mon Sep 17 00:00:00 2001
From: alpadev <alpa.muc@gmail.com>
Date: Sat, 8 May 2021 18:57:35 +0200
Subject: [PATCH 12/16] test: prefer <div/> over <div></div>

---
 js/tests/unit/tab.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 3bbe40b78186..658cac05c2d0 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -27,7 +27,7 @@ $(function () {
 
   QUnit.test('should throw explicit error on undefined method', function (assert) {
     assert.expect(1)
-    var $el = $('<div></div>')
+    var $el = $('<div/>')
     $el.bootstrapTab()
     try {
       $el.bootstrapTab('noMethod')
@@ -38,7 +38,7 @@ $(function () {
 
   QUnit.test('should return jquery collection containing the element', function (assert) {
     assert.expect(2)
-    var $el = $('<div></div>')
+    var $el = $('<div/>')
     var $tab = $el.bootstrapTab()
     assert.ok($tab instanceof $, 'returns jquery collection')
     assert.strictEqual($tab[0], $el[0], 'collection contains element')
@@ -67,7 +67,7 @@ $(function () {
         '<li><a href="#profile" role="tab">Profile</a></li>' +
         '</ul>'
 
-    $('<ul><li id="home" role="tabpanel"></li><li id="profile" role="tabpanel"></li></ul>').appendTo('#qunit-fixture')
+    $('<ul><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ul>').appendTo('#qunit-fixture')
 
     $(tabsHTML).find('li:last-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
@@ -83,7 +83,7 @@ $(function () {
         '<li><a href="#profile">Profile</a></li>' +
         '</ul>'
 
-    $('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture')
+    $('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
 
     $(pillsHTML).find('li:last-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
@@ -99,7 +99,7 @@ $(function () {
         '<li><button type="button" href="#profile" role="tab">Profile</button></li>' +
         '</ol>'
 
-    $('<ol><li id="home" role="tabpanel"></li><li id="profile" role="tabpanel"></li></ol>').appendTo('#qunit-fixture')
+    $('<ol><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ol>').appendTo('#qunit-fixture')
 
     $(pillsHTML).find('li:last-child button').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
@@ -115,7 +115,7 @@ $(function () {
                       '<button type="button" data-target="#profile" role="tab">Profile</a>' +
                     '</nav>'
 
-    $('<div><div id="home" role="tabpanel"></div><div id="profile" role="tabpanel"></div></div>').appendTo('#qunit-fixture')
+    $('<div><div id="home" role="tabpanel"/><div id="profile" role="tabpanel"/></div>').appendTo('#qunit-fixture')
 
     $(tabsHTML).find('button:last-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
@@ -131,7 +131,7 @@ $(function () {
                       '<button type="button" data-target="#profile" role="tab">Profile</button>' +
                     '</div>'
 
-    $('<div><div id="home" role="tabpanel"></div><div id="profile" role="tabpanel"></div></div>').appendTo('#qunit-fixture')
+    $('<div><div id="home" role="tabpanel"/><div id="profile" role="tabpanel"/></div>').appendTo('#qunit-fixture')
 
     $(tabsHTML).find('button:last-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
@@ -144,7 +144,7 @@ $(function () {
     assert.expect(1)
     var done = assert.async()
 
-    $('<div class="nav"></div>')
+    $('<div class="nav"/>')
       .on('show.bs.tab', function (e) {
         e.preventDefault()
         assert.ok(true, 'show event fired')
@@ -204,8 +204,8 @@ $(function () {
         '  <li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab" aria-selected="false">Profile</button></li>' +
         '</ul>' +
         '<div class="tab-content">' +
-        '  <div class="tab-pane active" id="home" role="tabpanel"></div>' +
-        '  <div class="tab-pane" id="profile" role="tabpanel"></div>' +
+        '  <div class="tab-pane active" id="home" role="tabpanel"/>' +
+        '  <div class="tab-pane" id="profile" role="tabpanel"/>' +
         '</div>'
 
     $(tabsHTML)

From f9260775eeebfd74aaa0cc35b5e0866460aaa7fb Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 21 Feb 2021 01:43:13 +0200
Subject: [PATCH 13/16] Manually backport 32630

Dynamic tabs: use buttons rather than links
---
 js/src/tab.js                            |   3 +-
 js/tests/unit/tab.js                     | 211 +++++++++++------------
 js/tests/visual/tab.html                 |  57 +++---
 scss/_nav.scss                           |   5 +
 site/content/docs/4.6/components/navs.md |  86 ++++-----
 5 files changed, 179 insertions(+), 183 deletions(-)

diff --git a/js/src/tab.js b/js/src/tab.js
index bcbb5c5ea258..7d23f0561df6 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -64,7 +64,8 @@ class Tab {
     if (this._element.parentNode &&
         this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
         $(this._element).hasClass(CLASS_NAME_ACTIVE) ||
-        $(this._element).hasClass(CLASS_NAME_DISABLED)) {
+        $(this._element).hasClass(CLASS_NAME_DISABLED) ||
+        this._element.hasAttribute('disabled')) {
       return
     }
 
diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 9ede231c5b78..445a83d9c52a 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -44,14 +44,30 @@ $(function () {
     assert.strictEqual($tab[0], $el[0], 'collection contains element')
   })
 
-  QUnit.test('should activate element by tab id', function (assert) {
+  QUnit.test('should activate element by tab id (using buttons, the preferred semantic way)', function (assert) {
     assert.expect(2)
-    var tabsHTML = '<ul class="nav">' +
-        '<li><a href="#home">Home</a></li>' +
-        '<li><a href="#profile">Profile</a></li>' +
+    var tabsHTML = '<ul class="nav" role="tablist">' +
+        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
         '</ul>'
 
-    $('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
+    $('<ul><li id="home" role="tabpanel"></li><li id="profile" role="tabpanel"></li></ul>').appendTo('#qunit-fixture')
+
+    $(tabsHTML).find('li:last-child button').bootstrapTab('show')
+    assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
+
+    $(tabsHTML).find('li:first-child button').bootstrapTab('show')
+    assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
+  })
+
+  QUnit.test('should activate element by tab id (using links for tabs - not ideal, but still supported)', function (assert) {
+    assert.expect(2)
+    var tabsHTML = '<ul class="nav" role="tablist">' +
+        '<li><a href="#home" role="tab">Home</a></li>' +
+        '<li><a href="#profile" role="tab">Profile</a></li>' +
+        '</ul>'
+
+    $('<ul><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ul>').appendTo('#qunit-fixture')
 
     $(tabsHTML).find('li:last-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
@@ -79,48 +95,48 @@ $(function () {
   QUnit.test('should activate element by tab id in ordered list', function (assert) {
     assert.expect(2)
     var pillsHTML = '<ol class="nav nav-pills">' +
-        '<li><a href="#home">Home</a></li>' +
-        '<li><a href="#profile">Profile</a></li>' +
+        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li><button type="button" href="#profile" role="tab">Profile</button></li>' +
         '</ol>'
 
-    $('<ol><li id="home"/><li id="profile"/></ol>').appendTo('#qunit-fixture')
+    $('<ol><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ol>').appendTo('#qunit-fixture')
 
-    $(pillsHTML).find('li:last-child a').bootstrapTab('show')
+    $(pillsHTML).find('li:last-child button').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
 
-    $(pillsHTML).find('li:first-child a').bootstrapTab('show')
+    $(pillsHTML).find('li:first-child button').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
   QUnit.test('should activate element by tab id in nav list', function (assert) {
     assert.expect(2)
     var tabsHTML = '<nav class="nav">' +
-                      '<a href="#home">Home</a>' +
-                      '<a href="#profile">Profile</a>' +
+                      '<button type="button" data-target="#home" role="tab">Home</button>' +
+                      '<button type="button" data-target="#profile" role="tab">Profile</a>' +
                     '</nav>'
 
-    $('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
+    $('<div><div id="home" role="tabpanel"/><div id="profile" role="tabpanel"/></div>').appendTo('#qunit-fixture')
 
-    $(tabsHTML).find('a:last-child').bootstrapTab('show')
+    $(tabsHTML).find('button:last-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
 
-    $(tabsHTML).find('a:first-child').bootstrapTab('show')
+    $(tabsHTML).find('button:first-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
   QUnit.test('should activate element by tab id in list group', function (assert) {
     assert.expect(2)
-    var tabsHTML = '<div class="list-group">' +
-                      '<a href="#home">Home</a>' +
-                      '<a href="#profile">Profile</a>' +
+    var tabsHTML = '<div class="list-group" role="tablist">' +
+                      '<button type="button" data-target="#home" role="tab">Home</button>' +
+                      '<button type="button" data-target="#profile" role="tab">Profile</button>' +
                     '</div>'
 
-    $('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
+    $('<div><div id="home" role="tabpanel"/><div id="profile" role="tabpanel"/></div>').appendTo('#qunit-fixture')
 
-    $(tabsHTML).find('a:last-child').bootstrapTab('show')
+    $(tabsHTML).find('button:last-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
 
-    $(tabsHTML).find('a:first-child').bootstrapTab('show')
+    $(tabsHTML).find('button:first-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
@@ -143,8 +159,8 @@ $(function () {
   QUnit.test('should not fire shown when tab is already active', function (assert) {
     assert.expect(0)
     var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
-      '<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>' +
+      '<li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
+      '<li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab">Profile</button></li>' +
       '</ul>' +
       '<div class="tab-content">' +
       '<div class="tab-pane active" id="home" role="tabpanel"></div>' +
@@ -152,7 +168,7 @@ $(function () {
       '</div>'
 
     $(tabsHTML)
-      .find('a.active')
+      .find('button.active')
       .on('shown.bs.tab', function () {
         assert.ok(true, 'shown event fired')
       })
@@ -162,8 +178,8 @@ $(function () {
   QUnit.test('should not fire shown when tab is disabled', function (assert) {
     assert.expect(0)
     var tabsHTML = '<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"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
+      '<li class="nav-item"><button type="button" data-target="#profile" class="nav-link" disabled role="tab">Profile</button></li>' +
       '</ul>' +
       '<div class="tab-content">' +
       '<div class="tab-pane active" id="home" role="tabpanel"></div>' +
@@ -171,7 +187,7 @@ $(function () {
       '</div>'
 
     $(tabsHTML)
-      .find('a.disabled')
+      .find('button[disabled]')
       .on('shown.bs.tab', function () {
         assert.ok(true, 'shown event fired')
       })
@@ -182,26 +198,23 @@ $(function () {
     assert.expect(2)
     var done = assert.async()
 
-    var dropHTML =
-        '<ul class="drop nav">' +
-        '  <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' +
-        '    <ul class="dropdown-menu nav">' +
-        '      <li><a href="#a1-1" data-toggle="tab">1-1</a></li>' +
-        '      <li><a href="#a1-2" data-toggle="tab">1-2</a></li>' +
-        '    </ul>' +
-        '  </li>' +
-        '</ul>'
+    var tabsHTML =
+        '<ul class="nav nav-tabs" role="tablist">' +
+        '  <li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
+        '  <li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab" aria-selected="false">Profile</button></li>' +
+        '</ul>' +
+        '<div class="tab-content">' +
+        '  <div class="tab-pane active" id="home" role="tabpanel"/>' +
+        '  <div class="tab-pane" id="profile" role="tabpanel"/>' +
+        '</div>'
 
-    $(dropHTML)
-      .find('ul > li:first-child a')
-      .bootstrapTab('show')
-      .end()
-      .find('ul > li:last-child a')
+    $(tabsHTML)
+      .find('ul > li:last-child button')
       .on('show.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.hash, '#a1-1', 'references correct element as relatedTarget')
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
       })
       .on('shown.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.hash, '#a1-1', 'references correct element as relatedTarget')
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
         done()
       })
       .bootstrapTab('show')
@@ -211,30 +224,30 @@ $(function () {
     assert.expect(2)
     var done = assert.async()
 
-    var tabsHTML = '<ul class="nav">' +
-        '<li><a href="#home">Home</a></li>' +
-        '<li><a href="#profile">Profile</a></li>' +
+    var tabsHTML = '<ul class="nav" role="tablist">' +
+        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li><button type="button" data-target="#profile">Profile</button></li>' +
         '</ul>'
 
     $(tabsHTML)
-      .find('li:first-child a')
+      .find('li:first-child button')
       .on('hide.bs.tab', function () {
         assert.ok(true, 'hide event fired')
       })
       .bootstrapTab('show')
       .end()
-      .find('li:last-child a')
+      .find('li:last-child button')
       .bootstrapTab('show')
 
     $(tabsHTML)
-      .find('li:first-child a')
+      .find('li:first-child button')
       .on('hidden.bs.tab', function () {
         assert.ok(true, 'hidden event fired')
         done()
       })
       .bootstrapTab('show')
       .end()
-      .find('li:last-child a')
+      .find('li:last-child button')
       .bootstrapTab('show')
   })
 
@@ -242,13 +255,13 @@ $(function () {
     assert.expect(1)
     var done = assert.async()
 
-    var tabsHTML = '<ul class="nav">' +
-        '<li><a href="#home">Home</a></li>' +
-        '<li><a href="#profile">Profile</a></li>' +
+    var tabsHTML = '<ul class="nav" role="tablist">' +
+        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
         '</ul>'
 
     $(tabsHTML)
-      .find('li:first-child a')
+      .find('li:first-child button')
       .on('hide.bs.tab', function (e) {
         e.preventDefault()
         assert.ok(true, 'hide event fired')
@@ -259,7 +272,7 @@ $(function () {
       })
       .bootstrapTab('show')
       .end()
-      .find('li:last-child a')
+      .find('li:last-child button')
       .bootstrapTab('show')
   })
 
@@ -267,82 +280,62 @@ $(function () {
     assert.expect(2)
     var done = assert.async()
 
-    var tabsHTML = '<ul class="nav">' +
-        '<li><a href="#home">Home</a></li>' +
-        '<li><a href="#profile">Profile</a></li>' +
+    var tabsHTML = '<ul class="nav" role="tablist">' +
+        '<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
         '</ul>'
 
     $(tabsHTML)
-      .find('li:first-child a')
+      .find('li:first-child button')
       .on('hide.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#profile', 'references correct element as relatedTarget')
       })
       .on('hidden.bs.tab', function (e) {
-        assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
+        assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#profile', 'references correct element as relatedTarget')
         done()
       })
       .bootstrapTab('show')
       .end()
-      .find('li:last-child a')
+      .find('li:last-child button')
       .bootstrapTab('show')
   })
 
-  QUnit.test('selected tab should have aria-selected', function (assert) {
+  QUnit.test('selected tab should have correct aria-selected', function (assert) {
     assert.expect(8)
-    var tabsHTML = '<ul class="nav nav-tabs">' +
-        '<li><a class="nav-item active" href="#home" toggle="tab" aria-selected="true">Home</a></li>' +
-        '<li><a class="nav-item" href="#profile" toggle="tab" aria-selected="false">Profile</a></li>' +
+    var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
+        '<li><button type="button" data-target="#home" role="tab" aria-selected="false">Home</button></li>' +
+        '<li><button type="button" data-target="#profile" role="tab" aria-selected="false">Profile</button></li>' +
         '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 
-    $tabs.find('li:first-child a').bootstrapTab('show')
+    $tabs.find('li:first-child button').bootstrapTab('show')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true')
-    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
+    assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
 
-    $tabs.find('li:last-child a').trigger('click')
+    $tabs.find('li:last-child button').trigger('click')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after click, shown tab has aria-selected = true')
-    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after click, hidden tab has aria-selected = false')
+    assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'after click, hidden tab has aria-selected = false')
 
-    $tabs.find('li:first-child a').bootstrapTab('show')
+    $tabs.find('li:first-child button').bootstrapTab('show')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true')
-    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
+    assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
 
-    $tabs.find('li:first-child a').trigger('click')
+    $tabs.find('li:first-child button').trigger('click')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after second show event, shown tab still has aria-selected = true')
-    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after second show event, hidden tab has aria-selected = false')
+    assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'after second show event, hidden tab has aria-selected = false')
   })
 
   QUnit.test('selected tab should deactivate previous selected tab', function (assert) {
     assert.expect(2)
-    var tabsHTML = '<ul class="nav nav-tabs">' +
-        '<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>' +
-        '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' +
-        '</ul>'
-    var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
-
-    $tabs.find('li:last-child a').trigger('click')
-    assert.false($tabs.find('li:first-child a').hasClass('active'))
-    assert.true($tabs.find('li:last-child a').hasClass('active'))
-  })
-
-  QUnit.test('selected tab should deactivate previous selected link in dropdown', function (assert) {
-    assert.expect(3)
-    var tabsHTML = '<ul class="nav nav-tabs">' +
-        '<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>' +
-        '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' +
-        '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>' +
-        '<div class="dropdown-menu">' +
-        '<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>' +
-        '<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>' +
-        '</div>' +
-        '</li>' +
+    var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
+        '<li class="nav-item"><button type="button" data-target="#home" role="tab">Home</button></li>' +
+        '<li class="nav-item"><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
         '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 
-    $tabs.find('li:first-child a').trigger('click')
-    assert.true($tabs.find('li:first-child a').hasClass('active'))
-    assert.false($tabs.find('li:last-child a').hasClass('active'))
-    assert.false($tabs.find('li:last-child .dropdown-menu a:first-child').hasClass('active'))
+    $tabs.find('li:last-child button').trigger('click')
+    assert.false($tabs.find('li:first-child button').hasClass('active'))
+    assert.true($tabs.find('li:last-child button').hasClass('active'))
   })
 
   QUnit.test('should support li > .dropdown-item', function (assert) {
@@ -372,9 +365,9 @@ $(function () {
     var done = assert.async()
     var tabsHTML =
         '<nav class="nav nav-tabs" role="tablist">' +
-        '  <a id="tab1" href="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>' +
-        '  <a href="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>' +
-        '  <a href="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>' +
+        '  <button type="button" id="tab1" data-target="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</button>' +
+        '  <button type="button" data-target="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</button>' +
+        '  <button type="button" data-target="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</button>' +
         '</nav>' +
         '<div class="tab-content">' +
         '  <div class="tab-pane" id="x-tab1" role="tabpanel">' +
@@ -409,8 +402,8 @@ $(function () {
     assert.expect(6)
     var done = assert.async()
     var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
-      '<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>' +
+      '<li class="nav-item" role="presentation"><button type="button" id="tab-home" data-target="#home" class="nav-link" data-toggle="tab" role="tab">Home</button></li>' +
+      '<li class="nav-item" role="presentation"><button type="button" id="tab-profile" data-target="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</button></li>' +
       '</ul>' +
       '<div class="tab-content">' +
       '<div class="tab-pane fade" id="home" role="tabpanel"></div>' +
@@ -489,10 +482,10 @@ $(function () {
     var html = [
       '<ul class="nav nav-tabs" role="tablist">',
       '  <li class="nav-item" role="presentation">',
-      '    <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
+      '    <button type="button" class="nav-link nav-tab" data-target="#home" role="tab" data-toggle="tab">Home</button>',
       '  </li>',
       '  <li class="nav-item" role="presentation">',
-      '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
+      '    <button type="button" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">Profile</button>',
       '  </li>',
       '</ul>',
       '<div class="tab-content" role="presentation">',
@@ -517,10 +510,10 @@ $(function () {
     var html = [
       '<ul class="nav nav-tabs" role="tablist">',
       '  <li class="nav-item" role="presentation">',
-      '    <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
+      '     <button type="button" class="nav-link nav-tab" data-target="#home" role="tab" data-toggle="tab">Home</button>',
       '  </li>',
       '  <li class="nav-item" role="presentation">',
-      '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
+      '    <button type="button" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">Profile</button>',
       '  </li>',
       '</ul>',
       '<div class="tab-content">',
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index fd4a7c68ae43..882ea641a88d 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -19,16 +19,16 @@ <h4>Tabs without fade</h4>
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
+          <button type="button" class="nav-link active" data-toggle="tab" data-target="#home" role="tab" aria-selected="true">Home</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#profile" role="tab">Profile</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat" role="tab">@fat</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#fat" role="tab">@fat</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#mdo" role="tab">@mdo</button>
         </li>
       </ul>
 
@@ -55,16 +55,16 @@ <h4>Tabs with fade</h4>
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link active" data-toggle="tab" href="#home2" role="tab">Home</a>
+          <button type="button" class="nav-link active" data-toggle="tab" data-target="#home2" role="tab" aria-selected="true">Home</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#profile2" role="tab">Profile</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat2" role="tab">@fat</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#fat2" role="tab">@fat</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#mdo2" role="tab">@mdo</button>
         </li>
       </ul>
 
@@ -91,16 +91,16 @@ <h4>Tabs without fade (no initially active pane)</h4>
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#home3" role="tab">Home</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#home3" role="tab">Home</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#profile3" role="tab">Profile</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat3" role="tab">@fat</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#fat3" role="tab">@fat</button>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
+          <button type="button" class="nav-link" data-toggle="tab" data-target="#mdo3" role="tab">@mdo</button>
         </li>
       </ul>
 
@@ -159,26 +159,23 @@ <h4>Tabs with fade (no initially active pane)</h4>
         </div>
       </div>
 
-      <h4>Tabs with nav (with fade)</h4>
-      <nav class="nav nav-pills">
-        <a class="nav-link nav-item active" data-toggle="tab" href="#home5">Home</a>
-        <a class="nav-link nav-item" data-toggle="tab" href="#profile5">Profile</a>
-        <div class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
-          <div class="dropdown-menu" aria-labelledby="dropdown5">
-            <a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a>
-            <a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a>
-          </div>
+      <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-toggle="tab" href="#home5">Home</a>
+          <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#profile5">Profile</a>
+          <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#fat5">@fat</a>
+          <a class="nav-link nav-item" role="tab" data-toggle="tab" href="#mdo5">@mdo</a>
+          <a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a>
         </div>
-        <a class="nav-link nav-item disabled" href="#">Disabled</a>
       </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 @@ <h4>Tabs with list-group (with fade)</h4>
       <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-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-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-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-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-target="#list-settings" role="tab" aria-controls="list-settings">Settings</button>
           </div>
         </div>
         <div class="col-8">
diff --git a/scss/_nav.scss b/scss/_nav.scss
index fad684e57b4b..a58814f6d322 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -37,11 +37,14 @@
 
   .nav-link {
     margin-bottom: -$nav-tabs-border-width;
+    background: none;
     border: $nav-tabs-border-width solid transparent;
     @include border-top-radius($nav-tabs-border-radius);
 
     @include hover-focus() {
       border-color: $nav-tabs-link-hover-border-color;
+      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+      isolation: isolate;
     }
 
     &.disabled {
@@ -73,6 +76,8 @@
 
 .nav-pills {
   .nav-link {
+    background: none;
+    border: 0;
     @include border-radius($nav-pills-border-radius);
   }
 
diff --git a/site/content/docs/4.6/components/navs.md b/site/content/docs/4.6/components/navs.md
index 7d175234688d..726fb97fd9c4 100644
--- a/site/content/docs/4.6/components/navs.md
+++ b/site/content/docs/4.6/components/navs.md
@@ -307,20 +307,20 @@ Use the tab JavaScript plugin—include it individually or through the compiled
 
 If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
 
-Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
+Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
 
 Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
 
 <div class="bd-example bd-example-tabs">
   <ul class="nav nav-tabs" id="myTab" role="tablist">
     <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>
+      <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
     </li>
     <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>
+      <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
     </li>
     <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>
+      <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
     </li>
   </ul>
   <div class="tab-content" id="myTabContent">
@@ -339,13 +339,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
 ```html
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <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>
+    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
   </li>
   <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>
+    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
   </li>
   <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>
+    <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
   </li>
 </ul>
 <div class="tab-content" id="myTabContent">
@@ -360,9 +360,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
 <div class="bd-example bd-example-tabs">
   <nav>
     <div class="nav nav-tabs" id="nav-tab" role="tablist">
-      <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
-      <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
-      <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+      <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
+      <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
+      <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
     </div>
   </nav>
   <div class="tab-content" id="nav-tabContent">
@@ -381,9 +381,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
 ```html
 <nav>
   <div class="nav nav-tabs" id="nav-tab" role="tablist">
-    <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
-    <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
-    <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
+    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
+    <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
   </div>
 </nav>
 <div class="tab-content" id="nav-tabContent">
@@ -398,13 +398,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" 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>
+      <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
     </li>
     <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>
+      <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
     </li>
     <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>
+      <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
     </li>
   </ul>
   <div class="tab-content" id="pills-tabContent">
@@ -423,13 +423,13 @@ The tabs plugin also works with pills.
 ```html
 <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
   <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>
+    <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
   </li>
   <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>
+    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
   </li>
   <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>
+    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
   </li>
 </ul>
 <div class="tab-content" id="pills-tabContent">
@@ -445,10 +445,10 @@ And with vertical pills.
   <div class="row">
     <div class="col-3">
       <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-        <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
-        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
-        <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
-        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
+        <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
+        <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
+        <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
+        <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
       </div>
     </div>
     <div class="col-9">
@@ -474,10 +474,10 @@ And with vertical pills.
 <div class="row">
   <div class="col-3">
     <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
-      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
-      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
-      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
+      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
+      <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</buttona>
+      <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
+      <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
     </div>
   </div>
   <div class="col-9">
@@ -499,16 +499,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 <!-- Nav tabs -->
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <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>
+    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
   </li>
   <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>
+    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
   </li>
   <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>
+    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
   </li>
   <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>
+    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
   </li>
 </ul>
 
@@ -526,7 +526,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
 
 ```js
-$('#myTab a').on('click', function (event) {
+$('#myTab button').on('click', function (event) {
   event.preventDefault()
   $(this).tab('show')
 })
@@ -535,10 +535,10 @@ $('#myTab a').on('click', function (event) {
 You can activate individual tabs in several ways:
 
 ```js
-$('#myTab a[href="#profile"]').tab('show') // Select tab by name
-$('#myTab li:first-child a').tab('show') // Select first tab
-$('#myTab li:last-child a').tab('show') // Select last tab
-$('#myTab li:nth-child(3) a').tab('show') // Select third tab
+$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
+$('#myTab li:first-child button').tab('show') // Select first tab
+$('#myTab li:last-child button').tab('show') // Select last tab
+$('#myTab li:nth-child(3) button').tab('show') // Select third tab
 ```
 
 ### Fade effect
@@ -562,21 +562,21 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
 
 #### $().tab
 
-Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
+Activates a tab element and content container. Tab should have either a `data-target` or, if using a link, an `href` attribute targeting a container node in the DOM.
 
 ```html
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <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>
+    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
   </li>
   <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>
+    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
   </li>
   <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>
+    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
   </li>
   <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>
+    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
   </li>
 </ul>
 
@@ -589,7 +589,7 @@ Activates a tab element and content container. Tab should have either a `data-ta
 
 <script>
   $(function () {
-    $('#myTab li:last-child a').tab('show')
+    $('#myTab li:last-child button').tab('show')
   })
 </script>
 ```
@@ -645,7 +645,7 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
 </table>
 
 ```js
-$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
+$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
   event.target // newly activated tab
   event.relatedTarget // previous active tab
 })

From be6a61a158a2cef686847a61e21e85af0fcb1ffc Mon Sep 17 00:00:00 2001
From: alpadev <alpa.muc@gmail.com>
Date: Sat, 8 May 2021 17:13:55 +0200
Subject: [PATCH 14/16] test: fix broken test cases for tab.js

---
 js/tests/unit/tab.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 445a83d9c52a..8f80a00c84ba 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -209,7 +209,7 @@ $(function () {
         '</div>'
 
     $(tabsHTML)
-      .find('ul > li:last-child button')
+      .find('li:last-child button')
       .on('show.bs.tab', function (e) {
         assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
       })
@@ -328,8 +328,8 @@ $(function () {
   QUnit.test('selected tab should deactivate previous selected tab', function (assert) {
     assert.expect(2)
     var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
-        '<li class="nav-item"><button type="button" data-target="#home" role="tab">Home</button></li>' +
-        '<li class="nav-item"><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
+        '<li class="nav-item"><button type="button" data-target="#home" role="tab" data-toggle="tab">Home</button></li>' +
+        '<li class="nav-item"><button type="button" data-target="#profile" role="tab" data-toggle="tab">Profile</button></li>' +
         '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 

From 70fa54351e970b055ad767ec3853cd742ee29fa5 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 24 Mar 2022 10:06:48 +0000
Subject: [PATCH 15/16] Fixes

---
 scss/_nav.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scss/_nav.scss b/scss/_nav.scss
index a58814f6d322..7626f9306413 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -37,14 +37,14 @@
 
   .nav-link {
     margin-bottom: -$nav-tabs-border-width;
-    background: none;
+    background-color: transparent;
     border: $nav-tabs-border-width solid transparent;
     @include border-top-radius($nav-tabs-border-radius);
 
     @include hover-focus() {
-      border-color: $nav-tabs-link-hover-border-color;
       // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
       isolation: isolate;
+      border-color: $nav-tabs-link-hover-border-color;
     }
 
     &.disabled {

From 2c08560338e3b988dbf3bdd08d132292ef111de4 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 24 May 2022 11:13:47 -0700
Subject: [PATCH 16/16] Remove and ignore lock file

---
 .gitignore       | 3 ++-
 .hugo_build.lock | 0
 2 files changed, 2 insertions(+), 1 deletion(-)
 delete mode 100644 .hugo_build.lock

diff --git a/.gitignore b/.gitignore
index 6b724135872c..2215d636addf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,8 @@
 # Ignore docs files
 /_site/
-# Hugo folders
+# Hugo files
 /resources/
+/.hugo_build.lock
 
 # Numerous always-ignore extensions
 *.diff
diff --git a/.hugo_build.lock b/.hugo_build.lock
deleted file mode 100644
index e69de29bb2d1..000000000000