From 4372458bd85fe4b0450de0e14f146438c79a0940 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 21 Sep 2021 13:00:46 -0500 Subject: [PATCH 01/37] updated reference table --- examples/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/index.html b/examples/index.html index c3a4039ea7..3dfb3547d8 100644 --- a/examples/index.html +++ b/examples/index.html @@ -184,7 +184,7 @@

Examples by Role

  • Editable Combobox With List Autocomplete
  • Editable Combobox without Autocomplete
  • Select-Only Combobox
    • -
  • Collapsible Dropdown Listbox
    • +
  • (Deprecated) Collapsible Dropdown Listbox
  • Listbox with Grouped Options
  • Listboxes with Rearrangeable Options
  • Scrollable Listbox
    • @@ -276,7 +276,7 @@

    Examples by Role

  • Editable Combobox With List Autocomplete
  • Editable Combobox without Autocomplete
  • Select-Only Combobox
    • -
  • Collapsible Dropdown Listbox
    • +
  • (Deprecated) Collapsible Dropdown Listbox
  • Listbox with Grouped Options
  • Listboxes with Rearrangeable Options
  • Scrollable Listbox
    • @@ -443,7 +443,7 @@

    Examples By Properties and States

  • Editable Combobox without Autocomplete
  • Select-Only Combobox
  • Editable Combobox with Grid Popup
    • -
  • Collapsible Dropdown Listbox
    • +
  • (Deprecated) Collapsible Dropdown Listbox
  • Listbox with Grouped Options
  • Listboxes with Rearrangeable Options
  • Scrollable Listbox
    • @@ -569,7 +569,7 @@

    Examples By Properties and States

  • Disclosure (Show/Hide) for Image Description (HC)
  • Disclosure Navigation Menu with Top-Level Links
  • Disclosure Navigation Menu (HC)
    • -
  • Collapsible Dropdown Listbox
    • +
  • (Deprecated) Collapsible Dropdown Listbox
  • Actions Menu Button Using aria-activedescendant (HC)
  • Actions Menu Button Using element.focus() (HC)
  • Navigation Menu Button (HC)
    • @@ -589,7 +589,7 @@

    Examples By Properties and States

    @@ -655,8 +651,6 @@

    Examples By Properties and States

  • Horizontal Multi-Thumb Slider (HC)
  • Date Picker Spin Button
  • Table
    • -
  • Tabs with Automatic Activation
    • -
  • Tabs with Manual Activation
  • Toolbar
  • Treegrid Email Inbox
  • Navigation Treeview (HC)
    • @@ -695,8 +689,7 @@

    Examples By Properties and States

  • Vertical Temperature Slider (HC)
  • Date Picker Spin Button
  • Switch Using HTML Button (HC)
    • -
  • Tabs with Automatic Activation
    • -
  • Tabs with Manual Activation
    • +
  • Tabs with Automatic Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
  • Navigation Treeview (HC)
    • @@ -816,8 +809,7 @@

    Examples By Properties and States

  • Listbox with Grouped Options
  • Listboxes with Rearrangeable Options
  • Scrollable Listbox
    • -
  • Tabs with Automatic Activation
    • -
  • Tabs with Manual Activation
    • +
  • Tabs with Automatic Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css index dfbfb8fe2d..c3215dedb9 100644 --- a/examples/tabs/css/tabs.css +++ b/examples/tabs/css/tabs.css @@ -1,107 +1,63 @@ .tabs { - width: 20em; font-family: "lucida grande", sans-serif; } [role="tablist"] { - margin: 0 0 -0.1em; - overflow: visible; + min-width: 550px; } -[role="tab"] { +[role="tab"], +[role="tab"]:focus, +[role="tab"]:hover { position: relative; + z-index: 2; + top: 2px; margin: 0; - padding: 0.3em 0.5em 0.4em; + padding: 3px 3px 4px; border: 1px solid hsl(219deg 1% 72%); - border-radius: 0.2em 0.2em 0 0; - box-shadow: 0 0 0.2em hsl(219deg 1% 72%); + border-bottom: 2px solid hsl(219deg 1% 72%); + border-radius: 5px 5px 0 0; overflow: visible; - font-family: inherit; - font-size: inherit; background: hsl(220deg 20% 94%); -} - -[role="tab"]:hover::before, -[role="tab"]:focus::before, -[role="tab"][aria-selected="true"]::before { - position: absolute; - bottom: 100%; - right: -1px; - left: -1px; - border-radius: 0.2em 0.2em 0 0; - border-top: 3px solid hsl(20deg 96% 48%); - content: ""; + outline: none; + font-weight: bold; } [role="tab"][aria-selected="true"] { - border-radius: 0; - background: hsl(220deg 43% 99%); - outline: 0; -} - -[role="tab"][aria-selected="true"]:not(:focus):not(:hover)::before { - border-top: 5px solid hsl(218deg 96% 48%); -} - -[role="tab"][aria-selected="true"]::after { - position: absolute; - z-index: 3; - bottom: -1px; - right: 0; - left: 0; - height: 0.3em; + padding: 2px 2px 4px; + border-width: 2px; + border-bottom-color: hsl(220deg 43% 99%); background: hsl(220deg 43% 99%); - box-shadow: none; - content: ""; } -[role="tab"]:hover, -[role="tab"]:focus, -[role="tab"]:active { - outline: 0; - border-radius: 0; - color: inherit; +[role="tab"] span.focus { + display: inline-block; + margin: 2px; + padding: 4px 6px; } -[role="tab"]:hover::before, -[role="tab"]:focus::before { - border-color: hsl(20deg 96% 48%); +[role="tab"]:hover span.focus, +[role="tab"]:focus span.focus, +[role="tab"]:active span.focus { + padding: 2px 4px; + border: 2px solid rgb(36 116 214); + border-radius: 3px; } [role="tabpanel"] { - position: relative; - z-index: 2; - padding: 0.5em 0.5em 0.7em; - border: 1px solid hsl(219deg 1% 72%); - border-radius: 0 0.2em 0.2em; - box-shadow: 0 0 0.2em hsl(219deg 1% 72%); + padding: 5px; + border: 2px solid hsl(219deg 1% 72%); + border-radius: 0 5px 5px; background: hsl(220deg 43% 99%); + min-height: 10em; + min-width: 550px; + overflow: auto; } [role="tabpanel"].is-hidden { display: none; } -[role="tabpanel"]:focus { - border-color: hsl(20deg 96% 48%); - box-shadow: 0 0 0.2em hsl(20deg 96% 48%); - outline: 0; -} - -[role="tabpanel"]:focus::after { - position: absolute; - bottom: 0; - right: -1px; - left: -1px; - border-bottom: 3px solid hsl(20deg 96% 48%); - border-radius: 0 0 0.2em 0.2em; - content: ""; -} - [role="tabpanel"] p { margin: 0; } - -[role="tabpanel"] * + p { - margin-top: 1em; -} diff --git a/examples/tabs/js/tabs-automatic.js b/examples/tabs/js/tabs-automatic.js new file mode 100644 index 0000000000..fe1ad21430 --- /dev/null +++ b/examples/tabs/js/tabs-automatic.js @@ -0,0 +1,138 @@ +/* + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: tabs-automatic.js + * + * Desc: Tablist widget that implements ARIA Authoring Practices + */ + +'use strict'; + +class TabsAutomatic { + constructor(groupNode) { + this.tablistNode = groupNode; + + this.tabs = []; + + this.firstTab = null; + this.lastTab = null; + + this.tabs = Array.from(this.tablistNode.querySelectorAll('[role=tab]')); + this.tabpanels = []; + + for (var i = 0; i < this.tabs.length; i += 1) { + var tab = this.tabs[i]; + var tabpanel = document.getElementById(tab.getAttribute('aria-controls')); + + tab.tabIndex = -1; + tab.setAttribute('aria-selected', 'false'); + this.tabpanels.push(tabpanel); + + tab.addEventListener('keydown', this.handleKeydown.bind(this)); + tab.addEventListener('click', this.handleClick.bind(this)); + + if (!this.firstTab) { + this.firstTab = tab; + } + this.lastTab = tab; + } + + this.setSelectedTab(this.firstTab, false); + } + + setSelectedTab(currentTab, setFocus) { + if (typeof setFocus !== 'boolean') { + setFocus = true; + } + for (var i = 0; i < this.tabs.length; i += 1) { + var tab = this.tabs[i]; + if (currentTab === tab) { + tab.setAttribute('aria-selected', 'true'); + tab.removeAttribute('tabindex'); + this.tabpanels[i].classList.remove('is-hidden'); + if (setFocus) { + tab.focus(); + } + } else { + tab.setAttribute('aria-selected', 'false'); + tab.tabIndex = -1; + this.tabpanels[i].classList.add('is-hidden'); + } + } + } + + setSelectedToPreviousTab(currentTab) { + var index; + + if (currentTab === this.firstTab) { + this.setSelectedTab(this.lastTab); + } else { + index = this.tabs.indexOf(currentTab); + this.setSelectedTab(this.tabs[index - 1]); + } + } + + setSelectedToNextTab(currentTab) { + var index; + + if (currentTab === this.lastTab) { + this.setSelectedTab(this.firstTab); + } else { + index = this.tabs.indexOf(currentTab); + this.setSelectedTab(this.tabs[index + 1]); + } + } + + /* EVENT HANDLERS */ + + handleKeydown(event) { + var tgt = event.currentTarget, + flag = false; + + switch (event.key) { + case 'ArrowUp': + case 'ArrowLeft': + this.setSelectedToPreviousTab(tgt); + flag = true; + break; + + case 'ArrowDown': + case 'ArrowRight': + this.setSelectedToNextTab(tgt); + flag = true; + break; + + case 'Home': + this.setSelectedTab(this.firstTab); + flag = true; + break; + + case 'End': + this.setSelectedTab(this.lastTab); + flag = true; + break; + + default: + break; + } + + if (flag) { + event.stopPropagation(); + event.preventDefault(); + } + } + + handleClick(event) { + this.setSelectedTab(event.currentTarget); + } +} + +// Initialize tablist + +window.addEventListener('load', function () { + var tablists = document.querySelectorAll('[role=tablist].automatic'); + for (var i = 0; i < tablists.length; i++) { + new TabsAutomatic(tablists[i]); + } +}); diff --git a/examples/tabs/js/tabs-manual.js b/examples/tabs/js/tabs-manual.js new file mode 100644 index 0000000000..c6e682b9fd --- /dev/null +++ b/examples/tabs/js/tabs-manual.js @@ -0,0 +1,138 @@ +/* + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: tabs-manual.js + * + * Desc: Tablist widget that implements ARIA Authoring Practices + */ + +'use strict'; + +class TabsAutomatic { + constructor(groupNode) { + this.tablistNode = groupNode; + + this.tabs = []; + + this.firstTab = null; + this.lastTab = null; + + this.tabs = Array.from(this.tablistNode.querySelectorAll('[role=tab]')); + this.tabpanels = []; + + for (var i = 0; i < this.tabs.length; i += 1) { + var tab = this.tabs[i]; + var tabpanel = document.getElementById(tab.getAttribute('aria-controls')); + + tab.tabIndex = -1; + tab.setAttribute('aria-selected', 'false'); + this.tabpanels.push(tabpanel); + + tab.addEventListener('keydown', this.handleKeydown.bind(this)); + tab.addEventListener('click', this.handleClick.bind(this)); + + if (!this.firstTab) { + this.firstTab = tab; + } + this.lastTab = tab; + } + + this.setSelectedTab(this.firstTab); + } + + setSelectedTab(currentTab) { + for (var i = 0; i < this.tabs.length; i += 1) { + var tab = this.tabs[i]; + if (currentTab === tab) { + tab.setAttribute('aria-selected', 'true'); + tab.removeAttribute('tabindex'); + this.tabpanels[i].classList.remove('is-hidden'); + } else { + tab.setAttribute('aria-selected', 'false'); + tab.tabIndex = -1; + this.tabpanels[i].classList.add('is-hidden'); + } + } + } + + moveFocusToTab(currentTab) { + currentTab.focus(); + } + + moveFocusToPreviousTab(currentTab) { + var index; + + if (currentTab === this.firstTab) { + this.moveFocusToTab(this.lastTab); + } else { + index = this.tabs.indexOf(currentTab); + this.moveFocusToTab(this.tabs[index - 1]); + } + } + + moveFocusToNextTab(currentTab) { + var index; + + if (currentTab === this.lastTab) { + this.moveFocusToTab(this.firstTab); + } else { + index = this.tabs.indexOf(currentTab); + this.moveFocusToTab(this.tabs[index + 1]); + } + } + + /* EVENT HANDLERS */ + + handleKeydown(event) { + var tgt = event.currentTarget, + flag = false; + + switch (event.key) { + case 'ArrowUp': + case 'ArrowLeft': + this.moveFocusToPreviousTab(tgt); + flag = true; + break; + + case 'ArrowDown': + case 'ArrowRight': + this.moveFocusToNextTab(tgt); + flag = true; + break; + + case 'Home': + this.moveFocusToTab(this.firstTab); + flag = true; + break; + + case 'End': + this.moveFocusToTab(this.lastTab); + flag = true; + break; + + default: + break; + } + + if (flag) { + event.stopPropagation(); + event.preventDefault(); + } + } + + // Since this example uses buttons for the tabs, the click handler also is activated + // with the space and enter keys + handleClick(event) { + this.setSelectedTab(event.currentTarget); + } +} + +// Initialize tablist + +window.addEventListener('load', function () { + var tablists = document.querySelectorAll('[role=tablist].manual'); + for (var i = 0; i < tablists.length; i++) { + new TabsAutomatic(tablists[i]); + } +}); diff --git a/examples/tabs/tabs-1/js/tabs.js b/examples/tabs/tabs-1/js/tabs.js deleted file mode 100644 index 9c17ba34ff..0000000000 --- a/examples/tabs/tabs-1/js/tabs.js +++ /dev/null @@ -1,257 +0,0 @@ -/* - * This content is licensed according to the W3C Software License at - * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document - */ - -'use strict'; - -(function () { - var tablist = document.querySelectorAll('[role="tablist"]')[0]; - var tabs; - var panels; - var delay = determineDelay(); - - generateArrays(); - - function generateArrays() { - tabs = document.querySelectorAll('[role="tab"]'); - panels = document.querySelectorAll('[role="tabpanel"]'); - } - - // For easy reference - var keys = { - end: 35, - home: 36, - left: 37, - up: 38, - right: 39, - down: 40, - delete: 46, - }; - - // Add or subtract depending on key pressed - var direction = { - 37: -1, - 38: -1, - 39: 1, - 40: 1, - }; - - // Bind listeners - for (var i = 0; i < tabs.length; ++i) { - addListeners(i); - } - - function addListeners(index) { - tabs[index].addEventListener('click', clickEventListener); - tabs[index].addEventListener('keydown', keydownEventListener); - tabs[index].addEventListener('keyup', keyupEventListener); - - // Build an array with all tabs ( - - +

    Selected Danish Composers

    +
    + + + +
    -
    -

    Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.

    +
    +

    Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. Maria Theresia composed music for several ballets, operas, and plays of the royal theatre. She was given good critic as a composer and described as a “virkelig Tonekunstnerinde” ('a True Artist of Music').

    - - @@ -68,10 +123,10 @@

    Example

    Accessibility Features

    -

    - To demonstrate the effects of deleting a tab, the third tab, labeled Joke, - can be deleted when it has focus by pressing Delete. -

    +
      +
    • The selected tab has a 2 pixel border when it is selected to make the selected tab discernable from the other tabs to people wiith visual impairments using operating system high contrast modes.
      • +
    • A span element is used to create a focus outline around the text to make the focus disernable to people with visual impairments using operating system high contrast modes.
      • +
    @@ -121,10 +176,6 @@

    Keyboard Support

    End Moves focus to the last tab and activates it. - - Delete - When focus is on the Joke tab, removes the tab from the tab list and places focus on the previous tab. -
    @@ -151,10 +202,10 @@

    Role, Property, State, and Tabindex Attributes

    Indicates that the element serves as a container for a set of tabs. - + - aria-label=Entertainment + aria-labelledby=IDREF div @@ -177,7 +228,7 @@

    Role, Property, State, and Tabindex Attributes

    to be displayed.
  • - Provides a title for its associated tabpanel. + Provides a label for its associated tabpanel.
    • @@ -192,7 +243,7 @@

    Role, Property, State, and Tabindex Attributes

    @@ -208,10 +259,10 @@

    Role, Property, State, and Tabindex Attributes

    @@ -241,7 +292,7 @@

    Role, Property, State, and Tabindex Attributes

    button - Refers to the tabpanel element associated with the tab. + Refers to the element with role=tabpanel associated with the tab. @@ -278,22 +329,6 @@

    Role, Property, State, and Tabindex Attributes

    - - - - tabindex=0 - - - div - - - - - @@ -301,8 +336,8 @@

    Role, Property, State, and Tabindex Attributes

    Javascript and CSS Source Code

    @@ -323,7 +358,5 @@

    HTML Source Code

    Tabs Design Pattern in WAI-ARIA Authoring Practices 1.2 - - diff --git a/examples/tabs/tabs-2/tabs.html b/examples/tabs/tabs-manual.html similarity index 69% rename from examples/tabs/tabs-2/tabs.html rename to examples/tabs/tabs-manual.html index 27eb2d07e0..06492ea0cd 100644 --- a/examples/tabs/tabs-2/tabs.html +++ b/examples/tabs/tabs-manual.html @@ -12,7 +12,10 @@ - + + + +
    @@ -122,6 +126,7 @@

    Selected Danish Composers

    Accessibility Features

      +
    • Since the tabpanels do not contain any focusable elements, tabindex="0" is used to include the tabpanel in the tab sequence of the page.
    • The selected tab has a 2 pixel border when it is selected to make the selected tab discernible from the other tabs to people with visual impairments using operating system high contrast modes.
    • A span element is used to create a focus outline around the text to make the focus discernible to people with visual impairments using operating system high contrast modes.
    @@ -327,6 +332,23 @@

    Role, Property, State, and Tabindex Attributes

    + + + + tabindex=0 + + + div + + +
      +
    • Puts the tabpanel in the page Tab sequence.
      • +
    • Facilitates movement to panel content for assistive technology users.
      • +
    • This is important for tabpanels that do not contain a focusable element or + when the first element with content is not focusable.
      • +
    + +
    diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index 33a6507b34..1dc6d5e92b 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -123,6 +123,7 @@

    Selected Danish Composers

    Accessibility Features

      +
    • Since the first focusable element in each tabpanel is a focusable element (e.g. link), the tabpanel does not need to set a tabindex value to include it in the tab sequence of the page.
    • The selected tab has a 2 pixel border when it is selected to make the selected tab discernible from the other tabs to people with visual impairments using operating system high contrast modes.
    • A span element is used to create a focus outline around the text to make the focus discernible to people with visual impairments using operating system high contrast modes.
    @@ -143,7 +144,7 @@

    Keyboard Support

    • When focus moves into the tab list, places focus on the active tab element .
      • -
    • When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the tabpanel element.
      • +
    • When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the a element in tabpanel.
    diff --git a/test/tests/tabs_tabs-automatic.js b/test/tests/tabs_tabs-automatic.js index 8d6ca5db4b..5ee032c298 100644 --- a/test/tests/tabs_tabs-automatic.js +++ b/test/tests/tabs_tabs-automatic.js @@ -1,5 +1,6 @@ const { ariaTest } = require('..'); const { Key } = require('selenium-webdriver'); +const assertAttributeValues = require('../util/assertAttributeValues'); const assertAriaControls = require('../util/assertAriaControls'); const assertAriaLabelledby = require('../util/assertAriaLabelledby'); const assertAriaRoles = require('../util/assertAriaRoles'); @@ -14,10 +15,10 @@ const ex = { tabCount: 4, tabTabOrder: [ // button id, tabpanel id - ['#tab-1', '#tabpanel-1 a'], - ['#tab-2', '#tabpanel-2 a'], - ['#tab-3', '#tabpanel-3 a'], - ['#tab-4', '#tabpanel-4 a'], + ['#tab-1', '#tabpanel-1'], + ['#tab-2', '#tabpanel-2'], + ['#tab-3', '#tabpanel-3'], + ['#tab-4', '#tabpanel-4'], ], }; @@ -202,6 +203,15 @@ ariaTest( } ); +ariaTest( + 'tabindex="0" on tabpanel elements', + exampleFile, + 'tabpanel-tabindex', + async (t) => { + await assertAttributeValues(t, ex.tabpanelSelector, 'tabindex', '0'); + } +); + // Keys ariaTest( From 24725b67ffdba2083054ab42c57a777df706068f Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 18 Jan 2022 14:05:06 -0600 Subject: [PATCH 15/37] additional editorial changes --- examples/tabs/js/tabs-automatic.js | 2 -- examples/tabs/tabs-automatic.html | 2 +- examples/tabs/tabs-manual.html | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/tabs/js/tabs-automatic.js b/examples/tabs/js/tabs-automatic.js index fe1ad21430..359239f096 100644 --- a/examples/tabs/js/tabs-automatic.js +++ b/examples/tabs/js/tabs-automatic.js @@ -91,13 +91,11 @@ class TabsAutomatic { flag = false; switch (event.key) { - case 'ArrowUp': case 'ArrowLeft': this.setSelectedToPreviousTab(tgt); flag = true; break; - case 'ArrowDown': case 'ArrowRight': this.setSelectedToNextTab(tgt); flag = true; diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index b8e9f32fcd..413f5d2dd4 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -127,7 +127,7 @@

    Selected Danish Composers

    Accessibility Features

    • Since the tabpanels do not contain any focusable elements, tabindex="0" is used to include the tabpanel in the tab sequence of the page.
      • -
    • The selected tab has a 2 pixel border when it is selected to make the selected tab discernible from the other tabs to people with visual impairments using operating system high contrast modes.
      • +
    • The selected tab has a 2 pixel border to make it discernible from other tabs, for people with visual impairments using operating system high contrast modes.
    • A span element is used to create a focus outline around the text to make the focus discernible to people with visual impairments using operating system high contrast modes.
    diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index 1dc6d5e92b..f514d81b84 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -124,7 +124,7 @@

    Selected Danish Composers

    Accessibility Features

    • Since the first focusable element in each tabpanel is a focusable element (e.g. link), the tabpanel does not need to set a tabindex value to include it in the tab sequence of the page.
      • -
    • The selected tab has a 2 pixel border when it is selected to make the selected tab discernible from the other tabs to people with visual impairments using operating system high contrast modes.
      • +
    • The selected tab has a 2 pixel border to make it discernible from other tabs, for people with visual impairments using operating system high contrast modes.
    • A span element is used to create a focus outline around the text to make the focus discernible to people with visual impairments using operating system high contrast modes.
    From dc9f1f7b480f7cc26240ab7220d8ad4fe1fdef70 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 19 Jan 2022 08:47:57 -0600 Subject: [PATCH 16/37] Update examples/tabs/tabs-manual.html @camacleod Thanks for the edits. Co-authored-by: Carolyn MacLeod --- examples/tabs/tabs-manual.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index f514d81b84..309a5a0231 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -123,7 +123,7 @@

    Selected Danish Composers

    Accessibility Features

      -
    • Since the first focusable element in each tabpanel is a focusable element (e.g. link), the tabpanel does not need to set a tabindex value to include it in the tab sequence of the page.
      • +
    • Since the first element in each tabpanel is a focusable element (e.g. link), the tabpanel does not need to set a tabindex value to include it in the tab sequence of the page.
    • The selected tab has a 2 pixel border to make it discernible from other tabs, for people with visual impairments using operating system high contrast modes.
    • A span element is used to create a focus outline around the text to make the focus discernible to people with visual impairments using operating system high contrast modes.
    From c9c750a79896b37d4460063636e65720efefb99a Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 19 Jan 2022 08:48:32 -0600 Subject: [PATCH 17/37] Update examples/tabs/css/tabs.css @carmacleod thanks for fixing this bug Co-authored-by: Carolyn MacLeod --- examples/tabs/css/tabs.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css index c3215dedb9..8e54bbfa79 100644 --- a/examples/tabs/css/tabs.css +++ b/examples/tabs/css/tabs.css @@ -29,7 +29,9 @@ border-bottom-color: hsl(220deg 43% 99%); background: hsl(220deg 43% 99%); } - +[role="tab"][aria-selected="false"] { + border-bottom: 1px solid hsl(219deg 1% 72%); +} [role="tab"] span.focus { display: inline-block; margin: 2px; From dcd2c36cc72074c2922e229a6c5d6591943cc9e5 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 19 Jan 2022 08:52:39 -0600 Subject: [PATCH 18/37] fixed css formatting issue --- examples/tabs/css/tabs.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css index 8e54bbfa79..bb42f01a7e 100644 --- a/examples/tabs/css/tabs.css +++ b/examples/tabs/css/tabs.css @@ -29,9 +29,11 @@ border-bottom-color: hsl(220deg 43% 99%); background: hsl(220deg 43% 99%); } + [role="tab"][aria-selected="false"] { - border-bottom: 1px solid hsl(219deg 1% 72%); + border-bottom: 1px solid hsl(219deg 1% 72%); } + [role="tab"] span.focus { display: inline-block; margin: 2px; From c706d098a735f61c22901fdcdee5f10d7902d95b Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 22 Feb 2022 13:36:18 -0600 Subject: [PATCH 19/37] updated tablist label to remove word selected --- examples/tabs/tabs-automatic.html | 2 +- examples/tabs/tabs-manual.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 413f5d2dd4..9ed463d399 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -45,7 +45,7 @@

    Example

    -

    Selected Danish Composers

    +

    Danish Composers

    Example
    -

    Selected Danish Composers

    +

    Danish Composers

    Date: Tue, 22 Feb 2022 14:10:51 -0600 Subject: [PATCH 20/37] updated accessibility features documentation --- examples/tabs/tabs-automatic.html | 8 ++++++-- examples/tabs/tabs-manual.html | 8 ++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 9ed463d399..35f5b3398f 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -127,8 +127,12 @@

    Danish Composers

    Accessibility Features

    • Since the tabpanels do not contain any focusable elements, tabindex="0" is used to include the tabpanel in the tab sequence of the page.
      • -
    • The selected tab has a 2 pixel border to make it discernible from other tabs, for people with visual impairments using operating system high contrast modes.
      • -
    • A span element is used to create a focus outline around the text to make the focus discernible to people with visual impairments using operating system high contrast modes.
      • +
    • To make the selected tab and the tab with focus discernable to people with visual impairments using operating system high contrast modes: +
        +
      • The selected tab has a 2 pixel border to make it twice as wide as the 1 pixel left, right and top borders of the other tabs.
        • +
      • Each element with the tab role has a child span element used for creating a focus outline around the tab label. When a tab has focus there is 2 pixels of spacing between the focus outline and the tab border.
        • +
      +
    diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index 0c0434f077..8567f8580e 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -124,8 +124,12 @@

    Danish Composers

    Accessibility Features

    • Since the first element in each tabpanel is a focusable element (e.g. link), the tabpanel does not need to set a tabindex value to include it in the tab sequence of the page.
      • -
    • The selected tab has a 2 pixel border to make it discernible from other tabs, for people with visual impairments using operating system high contrast modes.
      • -
    • A span element is used to create a focus outline around the text to make the focus discernible to people with visual impairments using operating system high contrast modes.
      • +
    • To make the selected tab and the tab with focus discernable to people with visual impairments using operating system high contrast modes: +
        +
      • The selected tab has a 2 pixel border to make it twice as wide as the 1 pixel left, right and top borders of the other tabs.
        • +
      • Each element with the tab role has a child span element used for creating a focus outline around the tab label has 2 pixels of spacing with the tab border.
        • +
      +
    From bd799d4330d4443b66a13ebe5cb85191d6856e19 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 1 Mar 2022 09:37:39 -0600 Subject: [PATCH 21/37] updated border styling information for selected tab --- examples/tabs/tabs-automatic.html | 2 +- examples/tabs/tabs-manual.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 35f5b3398f..69df7fdca6 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -129,7 +129,7 @@

    Accessibility Features

  • Since the tabpanels do not contain any focusable elements, tabindex="0" is used to include the tabpanel in the tab sequence of the page.
  • To make the selected tab and the tab with focus discernable to people with visual impairments using operating system high contrast modes:
      -
    • The selected tab has a 2 pixel border to make it twice as wide as the 1 pixel left, right and top borders of the other tabs.
      • +
    • The selected tab has a 2 pixel border to make it twice as wide as the 1 pixel left, right and top borders of the other tabs. The selected tab also does not have a visible bottom border.
    • Each element with the tab role has a child span element used for creating a focus outline around the tab label. When a tab has focus there is 2 pixels of spacing between the focus outline and the tab border.
    • diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index 8567f8580e..334f97026b 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -126,7 +126,7 @@

    Accessibility Features

  • Since the first element in each tabpanel is a focusable element (e.g. link), the tabpanel does not need to set a tabindex value to include it in the tab sequence of the page.
  • To make the selected tab and the tab with focus discernable to people with visual impairments using operating system high contrast modes:
      -
    • The selected tab has a 2 pixel border to make it twice as wide as the 1 pixel left, right and top borders of the other tabs.
      • +
    • The selected tab has a 2 pixel border to make it twice as wide as the 1 pixel left, right and top borders of the other tabs. The selected tab also does not have a visible bottom border.
    • Each element with the tab role has a child span element used for creating a focus outline around the tab label has 2 pixels of spacing with the tab border.
    • From 868c7bc93e68acb217eb5067be08c7c3550723aa Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 1 Mar 2022 12:50:46 -0600 Subject: [PATCH 22/37] updated accessibility feature information --- examples/tabs/tabs-automatic.html | 7 ++++--- examples/tabs/tabs-manual.html | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 69df7fdca6..d151daaf07 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -127,10 +127,11 @@

    Danish Composers

    Accessibility Features

    • Since the tabpanels do not contain any focusable elements, tabindex="0" is used to include the tabpanel in the tab sequence of the page.
      • -
    • To make the selected tab and the tab with focus discernable to people with visual impairments using operating system high contrast modes: +
    • To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
        -
      • The selected tab has a 2 pixel border to make it twice as wide as the 1 pixel left, right and top borders of the other tabs. The selected tab also does not have a visible bottom border.
        • -
      • Each element with the tab role has a child span element used for creating a focus outline around the tab label. When a tab has focus there is 2 pixels of spacing between the focus outline and the tab border.
        • +
      • The active tab has a 2 pixel border on its left, top, and right sides while the names of inactive tabs have a 1 pixel border. NOTE: The active tab visually appears to have no bottom border and the inactive tabs visually appear to have a 2 pixel bottom border.
        • +
      • The focus ring is drawn with a CSS border on a child span element of the tab element. This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
        • +
      • Because transparent borders are visible on some systems with high contrast enabled, only the focused span element has a visible border. When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
    diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index 334f97026b..34ec579001 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -124,10 +124,11 @@

    Danish Composers

    Accessibility Features

    • Since the first element in each tabpanel is a focusable element (e.g. link), the tabpanel does not need to set a tabindex value to include it in the tab sequence of the page.
      • -
    • To make the selected tab and the tab with focus discernable to people with visual impairments using operating system high contrast modes: +
    • To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
        -
      • The selected tab has a 2 pixel border to make it twice as wide as the 1 pixel left, right and top borders of the other tabs. The selected tab also does not have a visible bottom border.
        • -
      • Each element with the tab role has a child span element used for creating a focus outline around the tab label has 2 pixels of spacing with the tab border.
        • +
      • The active tab has a 2 pixel border on its left, top, and right sides while the names of inactive tabs have a 1 pixel border. NOTE: The active tab visually appears to have no bottom border and the inactive tabs visually appear to have a 2 pixel bottom border.
        • +
      • The focus ring is drawn with a CSS border on a child span element of the tab element. This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
        • +
      • Because transparent borders are visible on some systems with high contrast enabled, only the focused span element has a visible border. When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
    From fa2798502abb9235303a17aee0d4e76c47b5002e Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 1 Mar 2022 13:51:57 -0600 Subject: [PATCH 23/37] updated tabs to make the active 4pixels higher than the inactive tabs --- examples/tabs/css/tabs.css | 4 +++- examples/tabs/tabs-automatic.html | 2 +- examples/tabs/tabs-manual.html | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css index bb42f01a7e..7487194fc5 100644 --- a/examples/tabs/css/tabs.css +++ b/examples/tabs/css/tabs.css @@ -13,6 +13,7 @@ z-index: 2; top: 2px; margin: 0; + margin-top: 4px; padding: 3px 3px 4px; border: 1px solid hsl(219deg 1% 72%); border-bottom: 2px solid hsl(219deg 1% 72%); @@ -24,7 +25,8 @@ } [role="tab"][aria-selected="true"] { - padding: 2px 2px 4px; + padding: 6px 2px 4px; + margin-top: 0; border-width: 2px; border-bottom-color: hsl(220deg 43% 99%); background: hsl(220deg 43% 99%); diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index d151daaf07..cf9c72d312 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -129,7 +129,7 @@

    Accessibility Features

  • Since the tabpanels do not contain any focusable elements, tabindex="0" is used to include the tabpanel in the tab sequence of the page.
  • To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
      -
    • The active tab has a 2 pixel border on its left, top, and right sides while the names of inactive tabs have a 1 pixel border. NOTE: The active tab visually appears to have no bottom border and the inactive tabs visually appear to have a 2 pixel bottom border.
      • +
    • The active tab has a 2 pixel border on its left, top, and right sides while the names of inactive tabs have a 1 pixel border. The active tab is also 4 pixels higher than the inactive tabs.
    • The focus ring is drawn with a CSS border on a child span element of the tab element. This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
    • Because transparent borders are visible on some systems with high contrast enabled, only the focused span element has a visible border. When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
    diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index 34ec579001..1ad09cdf9a 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -126,7 +126,7 @@

    Accessibility Features

  • Since the first element in each tabpanel is a focusable element (e.g. link), the tabpanel does not need to set a tabindex value to include it in the tab sequence of the page.
  • To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
      -
    • The active tab has a 2 pixel border on its left, top, and right sides while the names of inactive tabs have a 1 pixel border. NOTE: The active tab visually appears to have no bottom border and the inactive tabs visually appear to have a 2 pixel bottom border.
      • +
    • The active tab has a 2 pixel border on its left, top, and right sides while the names of inactive tabs have a 1 pixel border. The active tab is also 4 pixels higher than the inactive tabs.
    • The focus ring is drawn with a CSS border on a child span element of the tab element. This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
    • Because transparent borders are visible on some systems with high contrast enabled, only the focused span element has a visible border. When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
    From 98f11436cf5f12c85b4a63dcfb3e5b7d32741218 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 1 Mar 2022 14:03:28 -0600 Subject: [PATCH 24/37] updated tabs to make the top border 4 pixels wide than the inactive tabs --- examples/tabs/css/tabs.css | 3 ++- examples/tabs/tabs-automatic.html | 2 +- examples/tabs/tabs-manual.html | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css index 7487194fc5..463a1cb4d3 100644 --- a/examples/tabs/css/tabs.css +++ b/examples/tabs/css/tabs.css @@ -25,9 +25,10 @@ } [role="tab"][aria-selected="true"] { - padding: 6px 2px 4px; + padding: 2px 2px 4px; margin-top: 0; border-width: 2px; + border-top-width: 6px; border-bottom-color: hsl(220deg 43% 99%); background: hsl(220deg 43% 99%); } diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index cf9c72d312..878c969736 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -129,7 +129,7 @@

    Accessibility Features

  • Since the tabpanels do not contain any focusable elements, tabindex="0" is used to include the tabpanel in the tab sequence of the page.
  • To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
      -
    • The active tab has a 2 pixel border on its left, top, and right sides while the names of inactive tabs have a 1 pixel border. The active tab is also 4 pixels higher than the inactive tabs.
      • +
    • The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have a 1 pixel borders. The active tab is also 4 pixels higher than the inactive tabs.
    • The focus ring is drawn with a CSS border on a child span element of the tab element. This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
    • Because transparent borders are visible on some systems with high contrast enabled, only the focused span element has a visible border. When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
    diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index 1ad09cdf9a..bde2255374 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -126,7 +126,7 @@

    Accessibility Features

  • Since the first element in each tabpanel is a focusable element (e.g. link), the tabpanel does not need to set a tabindex value to include it in the tab sequence of the page.
  • To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
      -
    • The active tab has a 2 pixel border on its left, top, and right sides while the names of inactive tabs have a 1 pixel border. The active tab is also 4 pixels higher than the inactive tabs.
      • +
    • The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have a 1 pixel borders. The active tab is also 4 pixels higher than the inactive tabs.
    • The focus ring is drawn with a CSS border on a child span element of the tab element. This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
    • Because transparent borders are visible on some systems with high contrast enabled, only the focused span element has a visible border. When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
    From a293fcf11eb8b519ae96f1fb04937a4a9f312769 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 1 Mar 2022 22:27:20 -0800 Subject: [PATCH 25/37] fix hrefs in head3er links --- examples/tabs/tabs-manual.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index bde2255374..ac18136125 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -20,10 +20,10 @@
    From 31aad89e75da54d69cde4e954beb3cd4fdd93b80 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 1 Mar 2022 22:34:58 -0800 Subject: [PATCH 26/37] Fix hrefs in links to main doc --- examples/tabs/tabs-automatic.html | 10 +++++----- examples/tabs/tabs-manual.html | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 878c969736..b7736b1e93 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -28,14 +28,14 @@

    Example of Tabs with Automatic Activation

    - This example section demonstrates a tabs widget that implements the design pattern for tabs. + This example section demonstrates a tabs widget that implements the design pattern for tabs. In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus. Tabs should only be automatically activated in circumstances where panels can be displayed instantly, i.e., all panel content is present in the DOM. - For additional guidance, see Deciding When to Make Selection Automatically Follow Focus. + For additional guidance, see Deciding When to Make Selection Automatically Follow Focus.

    Similar examples include:

    @@ -287,7 +287,7 @@

    Role, Property, State, and Tabindex Attributes

  • Removes the element from the page Tab sequence.
  • Set when a tab is not selected so that only the selected tab is in the page Tab sequence.
  • Since an HTML button element is used for the tab, it is not necessary to set tabindex=0 on the selected (active) tab element.
    • -
  • This approach to managing focus is described in the section on roving tabindex.
    • +
  • This approach to managing focus is described in the section on roving tabindex.
    • @@ -381,7 +381,7 @@

    HTML Source Code

    diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index ac18136125..6f8928c7fa 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -29,14 +29,14 @@

    Example of Tabs with Manual Activation

    - The below example section demonstrates a tabs widget that implements the tabs design pattern. + The below example section demonstrates a tabs widget that implements the tabs design pattern. In this example, a new panel is displayed only after the user activates a tab with either Space, Enter, or a mouse click. Typically, manual activation of tabs is only necessary when panels cannot be displayed instantly, i.e., not all the panel content is present in the DOM. - For additional guidance, see Deciding When to Make Selection Automatically Follow Focus. + For additional guidance, see Deciding When to Make Selection Automatically Follow Focus.

    Similar examples include:

    @@ -287,7 +287,7 @@

    Role, Property, State, and Tabindex Attributes

  • Removes the element from the page Tab sequence.
  • Set when a tab is not selected so that only the selected (active) tab is in the page Tab sequence.
  • Since an HTML button element is used for the tab, it is not necessary to set tabindex=0 on the selected (active) tab element.
    • -
  • This approach to managing focus is described in the section on roving tabindex.
    • +
  • This approach to managing focus is described in the section on roving tabindex.
    • @@ -363,7 +363,7 @@

    HTML Source Code

    From e585306597fe038b7bff5dfe858270ff18b55f1a Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 1 Mar 2022 22:52:47 -0800 Subject: [PATCH 27/37] editorial revisions to accessibility feature documentation --- examples/tabs/tabs-automatic.html | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index b7736b1e93..2568b1ba03 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -126,12 +126,15 @@

    Danish Composers

    Accessibility Features

      -
    • Since the tabpanels do not contain any focusable elements, tabindex="0" is used to include the tabpanel in the tab sequence of the page.
      • +
    • + To make it easy for screen reader users to navigate from a tab to the beginning of content in the active tabpanel, the tabpanel has tabindex="0"so it is included in the page Tab sequence. + It is advisable to make all tabpanel elements in a tab set focusable if there are any tabpenel elements in the tab set that contain content where the first element is not focusable. +
    • To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
        -
      • The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have a 1 pixel borders. The active tab is also 4 pixels higher than the inactive tabs.
        • +
      • The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have 1 pixel borders. The active tab is also 4 pixels higher than the inactive tabs.
      • The focus ring is drawn with a CSS border on a child span element of the tab element. This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
        • -
      • Because transparent borders are visible on some systems with high contrast enabled, only the focused span element has a visible border. When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
        • +
      • Because transparent borders are visible on some systems when high contrast settings are enabled, only the focused span element has a visible border. When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
    From 5c142f2e2aebbd335e7db7743fa49838c1912596 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 1 Mar 2022 23:12:57 -0800 Subject: [PATCH 28/37] editorial revisions to accessibility feature documentation --- examples/tabs/tabs-automatic.html | 20 +++++++++++++++----- examples/tabs/tabs-manual.html | 21 +++++++++++++++++---- 2 files changed, 32 insertions(+), 9 deletions(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 2568b1ba03..81e6f3eebf 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -127,14 +127,24 @@

    Danish Composers

    Accessibility Features

    • - To make it easy for screen reader users to navigate from a tab to the beginning of content in the active tabpanel, the tabpanel has tabindex="0"so it is included in the page Tab sequence. - It is advisable to make all tabpanel elements in a tab set focusable if there are any tabpenel elements in the tab set that contain content where the first element is not focusable. + To make it easy for screen reader users to navigate from a tab to the beginning of content in the active tabpanel, the tabpanel has tabindex="0"so it is included in the page Tab sequence. + It is recommended that all tabpanel elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable.
    • To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
        -
      • The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have 1 pixel borders. The active tab is also 4 pixels higher than the inactive tabs.
        • -
      • The focus ring is drawn with a CSS border on a child span element of the tab element. This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
        • -
      • Because transparent borders are visible on some systems when high contrast settings are enabled, only the focused span element has a visible border. When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
        • +
      • + The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have 1 pixel borders. + The active tab is also 4 pixels higher than the inactive tabs. +
        • +
      • + The focus ring is drawn with a CSS border on a child span element of the tab element. + This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. + Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed. +
        • +
      • + Because transparent borders are visible on some systems when high contrast settings are enabled, only the focused span element has a visible border. + When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus. +
    diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index 6f8928c7fa..81ef4c9929 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -123,14 +123,27 @@

    Danish Composers

    Accessibility Features

      -
    • Since the first element in each tabpanel is a focusable element (e.g. link), the tabpanel does not need to set a tabindex value to include it in the tab sequence of the page.
    • To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
        -
      • The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have a 1 pixel borders. The active tab is also 4 pixels higher than the inactive tabs.
        • -
      • The focus ring is drawn with a CSS border on a child span element of the tab element. This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
        • -
      • Because transparent borders are visible on some systems with high contrast enabled, only the focused span element has a visible border. When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
        • +
      • + The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have 1 pixel borders. + The active tab is also 4 pixels higher than the inactive tabs. +
        • +
      • + The focus ring is drawn with a CSS border on a child span element of the tab element. + This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. + Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed. +
        • +
      • + Because transparent borders are visible on some systems when high contrast settings are enabled, only the focused span element has a visible border. + When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus. +
      • +
    • + Note that since the first element in every tabpanel is a focusable element (i.e., a link), the tabpanel is not included in the page Tab sequence. + To make it easy for screen reader users to navigate from a tab to the beginning of content in the active tabpanel, it is recommended that all tabpanel elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable. +
    From 6a7cbbce58d7175acd30f3d4c76b83ac8d6c91ff Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 1 Mar 2022 23:26:06 -0800 Subject: [PATCH 29/37] Change IDREF to ID_REFERENCE and change q tags that are inside code tags to quote characters --- examples/tabs/tabs-automatic.html | 20 +++++++++----------- examples/tabs/tabs-manual.html | 14 +++++++------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 81e6f3eebf..952e9d1f54 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -226,7 +226,7 @@

    Role, Property, State, and Tabindex Attributes

    - aria-labelledby=IDREF + aria-labelledby="ID_REFERENCE" div @@ -257,7 +257,7 @@

    Role, Property, State, and Tabindex Attributes

    - aria-selected=true + aria-selected="true" button @@ -272,7 +272,7 @@

    Role, Property, State, and Tabindex Attributes

    - aria-selected=false + aria-selected="false" button @@ -290,7 +290,7 @@

    Role, Property, State, and Tabindex Attributes

    - tabindex=-1 + tabindex="-1" button @@ -299,7 +299,7 @@

    Role, Property, State, and Tabindex Attributes

    • Removes the element from the page Tab sequence.
    • Set when a tab is not selected so that only the selected tab is in the page Tab sequence.
      • -
    • Since an HTML button element is used for the tab, it is not necessary to set tabindex=0 on the selected (active) tab element.
      • +
    • Since an HTML button element is used for the tab, it is not necessary to set tabindex="0" on the selected (active) tab element.
    • This approach to managing focus is described in the section on roving tabindex.
    @@ -307,7 +307,7 @@

    Role, Property, State, and Tabindex Attributes

    - aria-controls=IDREF + aria-controls="ID_REFERENCE" button @@ -336,16 +336,14 @@

    Role, Property, State, and Tabindex Attributes

    - aria-labelledby=IDREF + aria-labelledby="ID_REFERENCE" div
      -
    • - Refers to the tab element that controls the panel. -
      • +
    • Refers to the tab element that controls the panel.
    • Provides an accessible name for the tab panel.
    @@ -353,7 +351,7 @@

    Role, Property, State, and Tabindex Attributes

    - tabindex=0 + tabindex="0" div diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index 81ef4c9929..648497b8b2 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -229,7 +229,7 @@

    Role, Property, State, and Tabindex Attributes

    - aria-labelledby=IDREF + aria-labelledby="ID_REFERENCE" div @@ -256,7 +256,7 @@

    Role, Property, State, and Tabindex Attributes

    - aria-selected=true + aria-selected="true" button @@ -272,7 +272,7 @@

    Role, Property, State, and Tabindex Attributes

    - aria-selected=false + aria-selected="false" button @@ -290,7 +290,7 @@

    Role, Property, State, and Tabindex Attributes

    - tabindex=-1 + tabindex="-1" button @@ -299,7 +299,7 @@

    Role, Property, State, and Tabindex Attributes

    • Removes the element from the page Tab sequence.
    • Set when a tab is not selected so that only the selected (active) tab is in the page Tab sequence.
      • -
    • Since an HTML button element is used for the tab, it is not necessary to set tabindex=0 on the selected (active) tab element.
      • +
    • Since an HTML button element is used for the tab, it is not necessary to set tabindex="0" on the selected (active) tab element.
    • This approach to managing focus is described in the section on roving tabindex.
    @@ -307,7 +307,7 @@

    Role, Property, State, and Tabindex Attributes

    - aria-controls=IDREF + aria-controls="ID_REFERENCE" button @@ -336,7 +336,7 @@

    Role, Property, State, and Tabindex Attributes

    - aria-labelledby=IDREF + aria-labelledby="ID_REFERENCE" div From e7660396a2aa3606e09c52d765b4dd78ccd2ebc7 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 1 Mar 2022 23:31:31 -0800 Subject: [PATCH 30/37] fix lint error --- examples/tabs/tabs-automatic.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 952e9d1f54..776eb5be74 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -35,7 +35,7 @@

    Example of Tabs with Automatic Activation

    Similar examples include:

    From 245e3b35870f38ea4a83d9229e2742025e3a844c Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 1 Mar 2022 23:41:29 -0800 Subject: [PATCH 31/37] editorial simplification to accessibility features documentation --- examples/tabs/tabs-automatic.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 776eb5be74..8e930ba17f 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -127,7 +127,7 @@

    Danish Composers

    Accessibility Features

    • - To make it easy for screen reader users to navigate from a tab to the beginning of content in the active tabpanel, the tabpanel has tabindex="0"so it is included in the page Tab sequence. + To make it easy for screen reader users to navigate from a tab to the beginning of content in the active tabpanel, the tabpanel element has tabindex="0" to include the panel in the page Tab sequence. It is recommended that all tabpanel elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable.
    • To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus: From dec2e59f7b678bfd06b9f66ced9262801cea7be5 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 1 Mar 2022 23:50:20 -0800 Subject: [PATCH 32/37] editorial revision to states and props documentation --- examples/tabs/tabs-automatic.html | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 8e930ba17f..0a340a72cf 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -244,13 +244,8 @@

      Role, Property, State, and Tabindex Attributes

      • Indicates the element serves as a tab control.
        • -
      • - When focused, is automatically activated, causing its associated tabpanel - to be displayed. -
        • -
      • - Provides a label for its associated tabpanel. -
        • +
      • When focused, it is automatically activated, causing its associated tabpanel to be displayed.
        • +
      • Provides a label for its associated tabpanel.
      @@ -359,9 +354,8 @@

      Role, Property, State, and Tabindex Attributes

      • Puts the tabpanel in the page Tab sequence.
        • -
      • Facilitates movement to panel content for assistive technology users.
        • -
      • This is important for tabpanels that do not contain a focusable element or - when the first element with content is not focusable.
        • +
      • Facilitates navigation to panel content for assistive technology users.
        • +
      • Focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable.
      From 480ee2a8fd78879ed2b0afbe2c88b3c391817616 Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 2 Mar 2022 00:04:48 -0800 Subject: [PATCH 33/37] Replace use of should with other phrasing in intro --- examples/tabs/tabs-automatic.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 0a340a72cf..6a1405e8cf 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -30,7 +30,7 @@

      Example of Tabs with Automatic Activation

      This example section demonstrates a tabs widget that implements the design pattern for tabs. In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus. - Tabs should only be automatically activated in circumstances where panels can be displayed instantly, i.e., all panel content is present in the DOM. + It is recommended that authors consider implementing automatic activation of tabs only in circumstances where panels can be displayed instantly, i.e., all panel content is present in the DOM. For additional guidance, see Deciding When to Make Selection Automatically Follow Focus.

      Similar examples include:

      From 4b05a5322adda8622aa92a217fe6275ba0c78ac4 Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 2 Mar 2022 00:27:24 -0800 Subject: [PATCH 34/37] Editorial revision to intro --- examples/tabs/tabs-manual.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/tabs/tabs-manual.html b/examples/tabs/tabs-manual.html index 648497b8b2..f05dc59e03 100644 --- a/examples/tabs/tabs-manual.html +++ b/examples/tabs/tabs-manual.html @@ -30,8 +30,10 @@

      Example of Tabs with Manual Activation

      The below example section demonstrates a tabs widget that implements the tabs design pattern. - In this example, a new panel is displayed only after the user activates a tab with either Space, Enter, or a mouse click. - Typically, manual activation of tabs is only necessary when panels cannot be displayed instantly, i.e., not all the panel content is present in the DOM. + In this example, a panel is displayed when users activate its tab with either Space, Enter, or a mouse click. + So, for keyboard users, activating a tab requires two steps: 1) focus the tab, and 2) activate the tab. + This two-step process is referred to as manual activation. + Manual activation of tabs is recommended unless panels can be displayed instantly, i.e., all the panel content is present in the DOM. For additional guidance, see Deciding When to Make Selection Automatically Follow Focus.

      Similar examples include:

      From 3a7c8eeb78a3ea94c3c3913c124e7814e7131c87 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 2 Mar 2022 09:35:49 -0600 Subject: [PATCH 35/37] changed h2 to h3 in example code --- examples/tabs/tabs-automatic.html | 2 +- examples/tabs/tabs-manual.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/tabs/tabs-automatic.html b/examples/tabs/tabs-automatic.html index 6a1405e8cf..43610a9cee 100644 --- a/examples/tabs/tabs-automatic.html +++ b/examples/tabs/tabs-automatic.html @@ -45,7 +45,7 @@

      Example

      -

      Danish Composers

      +

      Danish Composers

      Example
      -

      Danish Composers

      +

      Danish Composers

      Date: Wed, 2 Mar 2022 10:33:41 -0600 Subject: [PATCH 36/37] changed the prefix for event handlers from `handle` to `on` per our JS best practices --- examples/tabs/js/tabs-automatic.js | 8 ++++---- examples/tabs/js/tabs-manual.js | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/examples/tabs/js/tabs-automatic.js b/examples/tabs/js/tabs-automatic.js index 359239f096..0c8286690d 100644 --- a/examples/tabs/js/tabs-automatic.js +++ b/examples/tabs/js/tabs-automatic.js @@ -29,8 +29,8 @@ class TabsAutomatic { tab.setAttribute('aria-selected', 'false'); this.tabpanels.push(tabpanel); - tab.addEventListener('keydown', this.handleKeydown.bind(this)); - tab.addEventListener('click', this.handleClick.bind(this)); + tab.addEventListener('keydown', this.onKeydown.bind(this)); + tab.addEventListener('click', this.onClick.bind(this)); if (!this.firstTab) { this.firstTab = tab; @@ -86,7 +86,7 @@ class TabsAutomatic { /* EVENT HANDLERS */ - handleKeydown(event) { + onKeydown(event) { var tgt = event.currentTarget, flag = false; @@ -121,7 +121,7 @@ class TabsAutomatic { } } - handleClick(event) { + onClick(event) { this.setSelectedTab(event.currentTarget); } } diff --git a/examples/tabs/js/tabs-manual.js b/examples/tabs/js/tabs-manual.js index e0b79df6fa..0b8102f0b2 100644 --- a/examples/tabs/js/tabs-manual.js +++ b/examples/tabs/js/tabs-manual.js @@ -29,8 +29,8 @@ class TabsManual { tab.setAttribute('aria-selected', 'false'); this.tabpanels.push(tabpanel); - tab.addEventListener('keydown', this.handleKeydown.bind(this)); - tab.addEventListener('click', this.handleClick.bind(this)); + tab.addEventListener('keydown', this.onKeydown.bind(this)); + tab.addEventListener('click', this.onClick.bind(this)); if (!this.firstTab) { this.firstTab = tab; @@ -84,7 +84,7 @@ class TabsManual { /* EVENT HANDLERS */ - handleKeydown(event) { + onKeydown(event) { var tgt = event.currentTarget, flag = false; @@ -119,9 +119,9 @@ class TabsManual { } } - // Since this example uses buttons for the tabs, the click handler also is activated + // Since this example uses buttons for the tabs, the click onr also is activated // with the space and enter keys - handleClick(event) { + onClick(event) { this.setSelectedTab(event.currentTarget); } } From e084e056a0f08e8f234052316c10bac2a065590a Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sat, 5 Mar 2022 16:24:55 -0600 Subject: [PATCH 37/37] updated color of top border of selected tab --- examples/tabs/css/tabs.css | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css index 463a1cb4d3..bbb1fc794b 100644 --- a/examples/tabs/css/tabs.css +++ b/examples/tabs/css/tabs.css @@ -29,6 +29,7 @@ margin-top: 0; border-width: 2px; border-top-width: 6px; + border-top-color: rgb(36 116 214); border-bottom-color: hsl(220deg 43% 99%); background: hsl(220deg 43% 99%); }