From fd56ea370c371345cd9a34e65a615853ad882577 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sun, 24 Sep 2017 12:00:54 +0200 Subject: 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) --- js/src/tab.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'js/src/tab.js') diff --git a/js/src/tab.js b/js/src/tab.js index 18af4e7e2..2a554c287 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -196,11 +196,15 @@ const Tab = (() => { $(dropdownChild).removeClass(ClassName.ACTIVE) } - active.setAttribute('aria-expanded', false) + if (active.getAttribute('role') === 'tab') { + active.setAttribute('aria-selected', false) + } } $(element).addClass(ClassName.ACTIVE) - element.setAttribute('aria-expanded', true) + if (element.getAttribute('role') === 'tab') { + element.setAttribute('aria-selected', true) + } if (isTransitioning) { Util.reflow(element) -- cgit v1.2.3