diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2017-09-24 13:00:54 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-09-24 13:00:54 +0300 |
commit | fd56ea370c371345cd9a34e65a615853ad882577 (patch) | |
tree | 00b1785f0186f04172aa3a33978f9693a291bf2d /js/tests/unit/tab.js | |
parent | d33b26d8c7629e290b4ceca734a860793fd4c2b7 (diff) |
Accessibility fixes to dynamic tabs (`aria-selected`, remove dynamic tabs with dropdowns)
* Use `aria-selected` instead of `aria-expanded`
* Change tab.js to use `aria-selected` rather than `aria-expanded`
* Add `aria-orientation=vertical` to vertical tab list
* Remove dynamic tabs with dropdowns
* Fix non-interactive code examples
* Only set `aria-selected` on the `role="tab"` trigger - this stops `aria-selected` being incorrectly added to the `role="tabpanel"` itself (probably harmless, but nonetheless incorrect)
Diffstat (limited to 'js/tests/unit/tab.js')
-rw-r--r-- | js/tests/unit/tab.js | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js index 3093299b01..73ebbd6605 100644 --- a/js/tests/unit/tab.js +++ b/js/tests/unit/tab.js @@ -287,29 +287,29 @@ $(function () { .bootstrapTab('show') }) - QUnit.test('selected tab should have aria-expanded', function (assert) { + 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-expanded="true">Home</a></li>' - + '<li><a class="nav-item" href="#profile" toggle="tab" aria-expanded="false">Profile</a></li>' + + '<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>' + '</ul>' var $tabs = $(tabsHTML).appendTo('#qunit-fixture') $tabs.find('li:first a').bootstrapTab('show') - assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true') - assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false') + 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') $tabs.find('li:last a').trigger('click') - assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'after click, shown tab has aria-expanded = true') - assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'after click, hidden tab has aria-expanded = false') + 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') $tabs.find('li:first a').bootstrapTab('show') - assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true') - assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false') + 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') $tabs.find('li:first a').trigger('click') - assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'after second show event, shown tab still has aria-expanded = true') - assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'after second show event, hidden tab has aria-expanded = false') + 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') }) QUnit.test('selected tab should deactivate previous selected tab', function (assert) { @@ -351,13 +351,13 @@ $(function () { var tabsHTML = '<nav class="nav nav-tabs" role="tablist">' + ' <a id="tab1" href="#x-tab1" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>' - + ' <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-expanded="true">Tab 2</a>' + + ' <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>' + ' <a href="#x-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>' + '</nav>' + '<div class="tab-content">' + ' <div class="tab-pane" id="x-tab1" role="tabpanel">' + ' <nav class="nav nav-tabs" role="tablist">' - + ' <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-expanded="true">Nested Tab 1</a>' + + ' <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>' + ' <a id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>' + ' </nav>' + ' <div class="tab-content">' |