From 7d57d9a68bbc2bc703fbf2c66fd2ad2546d67557 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 24 May 2022 19:16:58 +0100 Subject: [PATCH] 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
over
* 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 Co-authored-by: Mark Otto Co-authored-by: Mark Otto --- .gitignore | 3 +- 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 ++++----- 6 files changed, 181 insertions(+), 184 deletions(-) diff --git a/.gitignore b/.gitignore index 6b72413587..2215d636ad 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/js/src/tab.js b/js/src/tab.js index 85f2f2ebc1..9c2e22d088 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -58,7 +58,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 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 = '
    ' + - '
  • Home
    • ' + - '
  • Profile
    • ' + + var tabsHTML = '
      ' + + '
      • ' + + '
      • ' + '
    ' - $('
    ').appendTo('#qunit-fixture') + $('
    ').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 = '' + + $('
    ').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 = '
      ' + - '
    1. Home
      2. ' + - '
    2. Profile
      3. ' + + '
      4. ' + + '
      5. ' + '
    ' - $('
    ').appendTo('#qunit-fixture') + $('
    ').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 = '' - $('').appendTo('#qunit-fixture') + $('
    ').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 = '
    ' + - 'Home' + - 'Profile' + + var tabsHTML = '
    ' + + '' + + '' + '
    ' - $('').appendTo('#qunit-fixture') + $('
    ').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 = '
      ' + - '' + - '' + + '' + + '' + '
    ' + '
    ' + '
    ' + @@ -152,7 +168,7 @@ $(function () { '
    ' $(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 = '
      ' + - '
    • Home
      • ' + - '
    • Profile
      • ' + + '
      • ' + + '
      • ' + '
    ' + '
    ' + '
    ' + @@ -171,7 +187,7 @@ $(function () { '
    ' $(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 = - '
      ' + - '
    • 1' + - '
        ' + - '
      • 1-1
        • ' + - '
      • 1-2
        • ' + - '
      ' + - '
      • ' + - '
    ' + var tabsHTML = + '
      ' + + ' ' + + ' ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' - $(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 = '
      ' + - '
    • Home
      • ' + - '
    • Profile
      • ' + + var tabsHTML = '
        ' + + '
        • ' + + '
        • ' + '
      ' $(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 = '
        ' + - '
      • Home
        • ' + - '
      • Profile
        • ' + + var tabsHTML = '
          ' + + '
          • ' + + '
          • ' + '
        ' $(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 = '
          ' + - '
        • Home
          • ' + - '
        • Profile
          • ' + + var tabsHTML = '
            ' + + '
            • ' + + '
            • ' + '
          ' $(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 = '
            ' + - '
          • Home
            • ' + - '
          • Profile
            • ' + + var tabsHTML = '
              ' + + '
              • ' + + '
              • ' + '
            ' 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 = '
              ' + - '
            • Home
              • ' + - '
            • Profile
              • ' + + var tabsHTML = '
                ' + + '
                • ' + + '
                • ' + '
              ' 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 = '' - 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 = '' + '
              ' + '
              ' + @@ -409,8 +402,8 @@ $(function () { assert.expect(6) var done = assert.async() var tabsHTML = '
                ' + - '' + - '' + + '' + + '' + '
              ' + '
              ' + '
              ' + @@ -489,10 +482,10 @@ $(function () { var html = [ '
                ', ' ', ' ', '
              ', ' -

              Tabs with nav (with fade)

              -
            @@ -341,13 +341,13 @@ Note that the tab JavaScript plugin **does not** support tabbed interfaces that ```html
            @@ -362,9 +362,9 @@ To help fit your needs, this works with `
              `-based markup, as shown above, or
              @@ -383,9 +383,9 @@ To help fit your needs, this works with `
                `-based markup, as shown above, or ```html
                @@ -400,13 +400,13 @@ The tabs plugin also works with pills.
                @@ -425,13 +425,13 @@ The tabs plugin also works with pills. ```html
                @@ -447,10 +447,10 @@ And with vertical pills.
                @@ -476,10 +476,10 @@ And with vertical pills.
                @@ -501,16 +501,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp @@ -528,7 +528,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') }) @@ -537,10 +537,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 @@ -564,21 +564,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 @@ -591,7 +591,7 @@ Activates a tab element and content container. Tab should have either a `data-ta ``` @@ -647,7 +647,7 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events ```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 })