Dynamic tabs: use buttons rather than links (backport to v4) (#33163)

* Manually backport 32630

Dynamic tabs: use buttons rather than links

* Tweak unit test

* Tweak unit tests

* More tweakage

* show() should also bail if `disabled` attribute is set

* Tweak tests

* Simplify test for relatedTarget

* Temporarily remove problematic test

(as i can't get local tests to run just noww)

* Revert previous

* test: fix broken test cases for tab.js

* test: fix role=tablist invalid on nav element

* test: prefer <div/> over <div></div>

* Manually backport 32630

Dynamic tabs: use buttons rather than links

* test: fix broken test cases for tab.js

* Fixes

* Remove and ignore lock file

Co-authored-by: alpadev <alpa.muc@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>

2 files changed, 129 insertions, 139 deletions

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 9ede231c5b..8f80a00c84 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('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" 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')
 
-    $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 fd4a7c68ae..882ea641a8 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -19,16 +19,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link active" data-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 @@
 
       <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 @@
 
       <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 @@
         </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 @@
       <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">