From 9b21fb388b708ca41e80db109d053806254ba00a Mon Sep 17 00:00:00 2001 From: Isabel Del Castillo Date: Fri, 10 Jun 2022 16:04:54 -0500 Subject: [PATCH 1/3] Update APG example to the latest version --- .../data/references.csv | 4 +- .../reference/2022-6-10_16318/css/tabs.css | 71 ++++ .../2022-6-10_16318/js/tabs-automatic.js | 136 +++++++ .../2022-6-10_16318/js/tabs-manual.js | 136 +++++++ .../2022-6-10_16318/tabs-manual.html | 384 ++++++++++++++++++ 5 files changed, 729 insertions(+), 2 deletions(-) create mode 100644 tests/tabs-manual-activation/reference/2022-6-10_16318/css/tabs.css create mode 100644 tests/tabs-manual-activation/reference/2022-6-10_16318/js/tabs-automatic.js create mode 100644 tests/tabs-manual-activation/reference/2022-6-10_16318/js/tabs-manual.js create mode 100644 tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.html diff --git a/tests/tabs-manual-activation/data/references.csv b/tests/tabs-manual-activation/data/references.csv index f67b5082c..9e42e6084 100644 --- a/tests/tabs-manual-activation/data/references.csv +++ b/tests/tabs-manual-activation/data/references.csv @@ -2,9 +2,9 @@ refId,value author,Isabel Del Castillo authorEmail,isa.delcastillo5@gmail.com title,Tabs with Manual Activation -reference,reference/2021-2-15_124757/tabs.html +reference,reference/2022-6-10_16318/tabs-manual.html designPattern,https://w3c.github.io/aria-practices/#tabpanel -example,https://w3c.github.io/aria-practices/examples/tabs/tabs-2/tabs.html +example,https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html tablist,https://w3c.github.io/aria/#tablist tab,https://w3c.github.io/aria/#tab tabpanel,https://w3c.github.io/aria/#tabpanel diff --git a/tests/tabs-manual-activation/reference/2022-6-10_16318/css/tabs.css b/tests/tabs-manual-activation/reference/2022-6-10_16318/css/tabs.css new file mode 100644 index 000000000..bbb1fc794 --- /dev/null +++ b/tests/tabs-manual-activation/reference/2022-6-10_16318/css/tabs.css @@ -0,0 +1,71 @@ +.tabs { + font-family: "lucida grande", sans-serif; +} + +[role="tablist"] { + min-width: 550px; +} + +[role="tab"], +[role="tab"]:focus, +[role="tab"]:hover { + position: relative; + 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%); + border-radius: 5px 5px 0 0; + overflow: visible; + background: hsl(220deg 20% 94%); + outline: none; + font-weight: bold; +} + +[role="tab"][aria-selected="true"] { + padding: 2px 2px 4px; + 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%); +} + +[role="tab"][aria-selected="false"] { + border-bottom: 1px solid hsl(219deg 1% 72%); +} + +[role="tab"] span.focus { + display: inline-block; + margin: 2px; + padding: 4px 6px; +} + +[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"] { + 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"] p { + margin: 0; +} diff --git a/tests/tabs-manual-activation/reference/2022-6-10_16318/js/tabs-automatic.js b/tests/tabs-manual-activation/reference/2022-6-10_16318/js/tabs-automatic.js new file mode 100644 index 000000000..0c8286690 --- /dev/null +++ b/tests/tabs-manual-activation/reference/2022-6-10_16318/js/tabs-automatic.js @@ -0,0 +1,136 @@ +/* + * 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.onKeydown.bind(this)); + tab.addEventListener('click', this.onClick.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 */ + + onKeydown(event) { + var tgt = event.currentTarget, + flag = false; + + switch (event.key) { + case 'ArrowLeft': + this.setSelectedToPreviousTab(tgt); + flag = true; + break; + + 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(); + } + } + + onClick(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/tests/tabs-manual-activation/reference/2022-6-10_16318/js/tabs-manual.js b/tests/tabs-manual-activation/reference/2022-6-10_16318/js/tabs-manual.js new file mode 100644 index 000000000..0b8102f0b --- /dev/null +++ b/tests/tabs-manual-activation/reference/2022-6-10_16318/js/tabs-manual.js @@ -0,0 +1,136 @@ +/* + * 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 TabsManual { + 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.onKeydown.bind(this)); + tab.addEventListener('click', this.onClick.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 */ + + onKeydown(event) { + var tgt = event.currentTarget, + flag = false; + + switch (event.key) { + case 'ArrowLeft': + this.moveFocusToPreviousTab(tgt); + flag = true; + break; + + 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 onr also is activated + // with the space and enter keys + onClick(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 TabsManual(tablists[i]); + } +}); diff --git a/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.html b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.html new file mode 100644 index 000000000..a56072f59 --- /dev/null +++ b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.html @@ -0,0 +1,384 @@ + + + + + Example of Tabs with Manual Activation | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + + + + + +
+

Example of Tabs with Manual Activation

+

+ The below example section demonstrates a tabs widget that implements the tabs design pattern. + 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:

+ + +
+
+

Example

+
+ +
+
+

Danish Composers

+
+ + + + +
+ +
+

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').

+
+ + + +
+
+ +
+ +
+

Accessibility Features

+
    +
  • 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. +
    • +
    +
  • +
  • + 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. +
  • +
+
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
Tab +
    +
  • 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 a element in tabpanel.
  • +
+
Enter
Space
+ When a tab has focus, activates the tab, causing its associated panel to be displayed. +
Right Arrow + When a tab has focus: +
    +
  • Moves focus to the next tab.
  • +
  • If focus is on the last tab, moves focus to the first tab.
  • +
+
Left Arrow + When a tab has focus: +
    +
  • Moves focus to the previous tab.
  • +
  • If focus is on the first tab, moves focus to the last tab.
  • +
+
HomeWhen a tab has focus, moves focus to the first tab.
EndWhen a tab has focus, moves focus to the last tab.
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
+ tablist + + div + Indicates that the element serves as a container for a set of tabs.
+ aria-labelledby="ID_REFERENCE" + + div + Provides a label that describes the purpose of the set of tabs.
+ tab + + button + +
    +
  • Indicates the element serves as a tab control.
  • +
  • + Provides a title for its associated tabpanel. +
  • +
+
+ aria-selected="true" + + button + +
    +
  • Indicates the tab control is activated and its associated panel is displayed.
  • +
  • Set when a user activates a tab.
  • +
  • Does not change when focus moves in the tablist.
  • +
+
+ aria-selected="false" + + button + +
    +
  • + Indicates the tab control is not active and its associated panel is NOT + displayed. +
  • +
  • Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel.
  • +
+
+ tabindex="-1" + + button + +
    +
  • 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.
  • +
+
+ aria-controls="ID_REFERENCE" + + button + + Refers to the tabpanel element associated with the tab. +
+ tabpanel + + div + +
    +
  • Indicates the element serves as a container for tab panel content.
  • +
  • + Is hidden unless its associated tab control is activated. +
  • +
+
+ aria-labelledby="ID_REFERENCE" + + div + +
    +
  • + Refers to the tab element that controls the panel. +
  • +
  • Provides an accessible name for the tab panel.
  • +
+
+
+ +
+

Javascript and CSS Source Code

+ +
+ +
+

HTML Source Code

+ +
+ + +
+ +
+ + + + From 0695e36cba17dcc4c7f3d7f224a503f5b9eac260 Mon Sep 17 00:00:00 2001 From: Isabel Del Castillo Date: Fri, 10 Jun 2022 16:10:20 -0500 Subject: [PATCH 2/3] Add updated test plan and commands --- .../tabs-manual-activation/data/commands.csv | 91 +++++++++---------- tests/tabs-manual-activation/data/tests.csv | 55 ++++++----- 2 files changed, 69 insertions(+), 77 deletions(-) diff --git a/tests/tabs-manual-activation/data/commands.csv b/tests/tabs-manual-activation/data/commands.csv index 3400d3d74..985f35338 100644 --- a/tests/tabs-manual-activation/data/commands.csv +++ b/tests/tabs-manual-activation/data/commands.csv @@ -1,48 +1,43 @@ -testId,task,mode,at,commandA,commandB,commandC,commandD,commandE,commandF -1,navigate forwards to tab list,reading,JAWS,TAB,DOWN,,,, -1,navigate forwards to tab list,reading,NVDA,TAB,DOWN,,,, -2,navigate backwards to tab list,reading,JAWS,SHIFT_TAB,UP,,,, -2,navigate backwards to tab list,reading,NVDA,SHIFT_TAB,UP,,,, -3,navigate forwards to tab list,interaction,JAWS,TAB,,,,, -3,navigate forwards to tab list,interaction,NVDA,TAB,,,,, -4,navigate backwards to tab list,interaction,JAWS,SHIFT_TAB,,,,, -4,navigate backwards to tab list,interaction,NVDA,SHIFT_TAB,,,,, -5,navigate forwards to tab list,interaction,voiceover_macos,TAB,CTRL_OPT_RIGHT,CTRL_OPT_CMD_J,,, -6,navigate backwards to tab list,interaction,voiceover_macos,SHIFT_TAB,CTRL_OPT_LEFT,SHIFT_CTRL_OPT_CMD_J,,, -7,read information about tab in tab list,reading,JAWS,INS_TAB,INS_UP,,,, -7,read information about tab in tab list,reading,NVDA,INS_TAB,INS_UP,,,, -8,read information about tab in tab list,interaction,JAWS,INS_TAB,INS_UP,,,, -8,read information about tab in tab list,interaction,NVDA,INS_TAB,INS_UP,,,, -9,read information about tab in tab list,interaction,voiceover_macos,CTRL_OPT_F3,CTRL_OPT_F4,,,, -10,navigate to next tab in tab list,reading,JAWS,DOWN,,,,, -10,navigate to next tab in tab list,reading,NVDA,DOWN,,,,, -11,navigate to next tab in tab list,interaction,JAWS,RIGHT,,,,, -11,navigate to next tab in tab list,interaction,NVDA,RIGHT,,,,, -12,navigate to next tab in tab list,interaction,voiceover_macos,CTRL_OPT_RIGHT,,,,, -13,navigate to previous tab in tab list,reading,JAWS,UP,,,,, -13,navigate to previous tab in tab list,reading,NVDA,UP,,,,, -14,navigate to previous tab in tab list ,interaction,JAWS,LEFT,,,,, -14,navigate to previous tab in tab list ,interaction,NVDA,LEFT,,,,, -15,navigate to previous tab in tab list,interaction,voiceover_macos,CTRL_OPT_LEFT,,,,, -16,navigate to first tab in tab list,interaction,JAWS,HOME,,,,, -16,navigate to first tab in tab list,interaction,NVDA,HOME,,,,, -17,navigate to first tab in tab list,interaction,voiceover_macos,HOME,,,,, -18,navigate to last tab in tab list,interaction,JAWS,END,,,,, -18,navigate to last tab in tab list,interaction,NVDA,END,,,,, -19,navigate to last tab in tab list,interaction,voiceover_macos,END,,,,, -20,navigate forwards to tab panel,interaction,JAWS,TAB,,,,, -20,navigate forwards to tab panel,interaction,NVDA,TAB,,,,, -21,navigate backwards to tab panel,interaction,JAWS,SHIFT_TAB,,,,, -21,navigate backwards to tab panel,interaction,NVDA,SHIFT_TAB,,,,, -22,navigate forwards to tab panel,interaction,voiceover_macos,TAB,CTRL_OPT_RIGHT,,,, -23,navigate backwards to tab panel,interaction,voiceover_macos,SHIFT_TAB,CTRL_OPT_LEFT,,,, -24,activate tab in tab list,reading,JAWS,SPACE,ENTER,,,, -24,activate tab in tab list,reading,NVDA,SPACE,ENTER,,,, -25,activate tab in tab list,interaction,JAWS,SPACE,ENTER,,,, -25,activate tab in tab list,interaction,NVDA,SPACE,ENTER,,,, -26,activate tab in tab list,interaction,voiceover_macos,CTRL_OPT_SPACE,SPACE,ENTER,,, -27,delete tab from tab list ,reading,JAWS,DELETE,,,,, -27,delete tab from tab list ,reading,NVDA,DELETE,,,,, -28,delete tab from tab list ,interaction,JAWS,DELETE,,,,, -28,delete tab from tab list ,interaction,NVDA,DELETE,,,,, -29,delete tab from tab list,interaction,voiceover_macos,DELETE,,,,, +testId,task,mode,at,commandA,commandB,commandC +1,Navigate forwards to a tab list,READING,JAWS,TAB,"DOWN,DOWN", +1,Navigate forwards to a tab list,READING,NVDA,TAB,DOWN, +2,Navigate forwards to a tab list,INTERACTION,JAWS,TAB,, +2,Navigate forwards to a tab list,INTERACTION,NVDA,TAB,, +3,Navigate forwards to a tab list,INTERACTION,VOICEOVER_MACOS,TAB,"CTRL_OPT_RIGHT,CTRL_OPT_RIGHT",CTRL_OPT_CMD_J +4,Navigate backwards to a tab list,READING,JAWS,SHIFT_TAB,"UP,UP", +4,Navigate backwards to a tab list,READING,NVDA,SHIFT_TAB,UP, +5,Navigate backwards to a tab list,INTERACTION,JAWS,SHIFT_TAB,, +5,Navigate backwards to a tab list,INTERACTION,NVDA,SHIFT_TAB,, +6,Navigate backwards to a tab list,INTERACTION,VOICEOVER_MACOS,SHIFT_TAB,"CTRL_OPT_LEFT,CTRL_OPT_LEFT",SHIFT_CTRL_OPT_CMD_J +7,Read information about a tab in a tab list ,READING,JAWS,INS_TAB,INS_UP, +7,Read information about a tab in a tab list ,READING,NVDA,INS_TAB,INS_UP, +8,Read information about a tab in a tab list ,INTERACTION,JAWS,INS_TAB,INS_UP, +8,Read information about a tab in a tab list ,INTERACTION,NVDA,INS_TAB,INS_UP, +9,Read information about a tab in a tab list ,INTERACTION,VOICEOVER_MACOS,CTRL_OPT_F4,CTRL_OPT_F4, +10,Navigate to the next tab in a tab list,READING,JAWS,DOWN,, +10,Navigate to the next tab in a tab list,READING,NVDA,DOWN,, +11,Navigate to the next tab in a tab list,INTERACTION,JAWS,RIGHT,, +11,Navigate to the next tab in a tab list,INTERACTION,NVDA,RIGHT,, +12,Navigate to the next tab in a tab list,INTERACTION,VOICEOVER_MACOS,CTRL_OPT_RIGHT,, +13,Navigate to the previous tab in a tab list,READING,JAWS,UP,, +13,Navigate to the previous tab in a tab list,READING,NVDA,UP,, +14,Navigate to the previous tab in a tab list,INTERACTION,JAWS,LEFT,, +14,Navigate to the previous tab in a tab list,INTERACTION,NVDA,LEFT,, +15,Navigate to the previous tab in a tab list,INTERACTION,VOICEOVER_MACOS,CTRL_OPT_LEFT,, +16,Navigate to the first tab in a tab list,INTERACTION,JAWS,HOME,, +16,Navigate to the first tab in a tab list,INTERACTION,NVDA,HOME,, +17,Navigate to the first tab in a tab list,INTERACTION,VOICEOVER_MACOS,HOME,, +18,Navigate to the last tab in a tab list,INTERACTION,JAWS,END,, +18,Navigate to the last tab in a tab list,INTERACTION,NVDA,END,, +19,Navigate to the last tab in a tab list,INTERACTION,VOICEOVER_MACOS,END,, +20,Navigate forwards to a tab panel,INTERACTION,JAWS,TAB,, +20,Navigate forwards to a tab panel,INTERACTION,NVDA,TAB,, +21,Navigate forwards to a tab panel,INTERACTION,VOICEOVER_MACOS,TAB,"CTRL_OPT_RIGHT,CTRL_OPT_RIGHT,CTRL_OPT_RIGHT,CTRL_OPT_RIGHT,CTRL_OPT_RIGHT,CTRL_OPT_RIGHT", +22,Navigate backwards to a tab panel,INTERACTION,JAWS,SHIFT_TAB,, +22,Navigate backwards to a tab panel,INTERACTION,NVDA,SHIFT_TAB,, +23,Navigate backwards to a tab panel,INTERACTION,VOICEOVER_MACOS,SHIFT_TAB,CTRL_OPT_LEFT, +24,Activate a tab in a tab list,READING,JAWS,SPACE,ENTER, +24,Activate a tab in a tab list,READING,NVDA,SPACE,ENTER, +25,Activate a tab in a tab list,INTERACTION,JAWS,SPACE,ENTER, +25,Activate a tab in a tab list,INTERACTION,NVDA,SPACE,ENTER, +26,Activate a tab in a tab list,INTERACTION,VOICEOVER_MACOS,CTRL_OPT_SPACE,SPACE,ENTER diff --git a/tests/tabs-manual-activation/data/tests.csv b/tests/tabs-manual-activation/data/tests.csv index 8ec08fda4..723721f6c 100644 --- a/tests/tabs-manual-activation/data/tests.csv +++ b/tests/tabs-manual-activation/data/tests.csv @@ -1,30 +1,27 @@ testId,title,appliesTo,mode,task,setupScript,setupScriptDescription,refs,instructions,assertion1,assertion2,assertion3,assertion4,assertion5,assertion6,assertion7 -1,Navigate forwards to a tab list in reading mode,"JAWS,NVDA",reading,navigate forwards to tab list,setFocusBeforeTablist,sets focus on a link before the tab list,tablist aria-label tab aria-labelledby aria-selected,Navigate to the tab list. Note: You may need to press certain commands (such as Down Arrow) multiple times to hear all information relating to the tab list.,Role 'tab list' is conveyed,"Name of the tab list, 'Entertainment', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Nils Frahm', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab, 1, is conveyed","Number of tabs in the tab list, 3, is conveyed" -2,Navigate backwards to a tab list in reading mode,"JAWS,NVDA",reading,navigate backwards to tab list,activateThirdTabAndSetFocusOnTabpanel,"activates the third tab in the tab list, and sets focus on the tab panel",tablist aria-label tab aria-labelledby aria-selected,Navigate to the tab list. Note: You may need to press certain commands (such as Up Arrow) multiple times to hear all information relating to the tab list.,Role 'tab list' is conveyed,"Name of the tab list, 'Entertainment', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Joke', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab in the tab list, 3, is conveyed","Number of tabs in the tab list, 3, is conveyed" -3,Navigate forwards to a tab list in interaction mode,"JAWS,NVDA",interaction,navigate forwards to tab list,setFocusBeforeTablist,sets focus on a link before the tab list,tablist aria-label tab aria-labelledby aria-selected,Navigate to the tab list.,Role 'tab list' is conveyed,"Name of the tab list, 'Entertainment', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Nils Frahm', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab, 1, is conveyed","Number of tabs in the tab list, 3, is conveyed" -4,Navigate backwards to a tab list in interaction mode,"JAWS,NVDA",interaction,navigate backwards to tab list,activateThirdTabAndSetFocusOnTabpanel,"activates the third tab in the tab list, and sets focus on the tab panel",tablist aria-label tab aria-labelledby aria-selected,Navigate to the tab list.,Role 'tab list' is conveyed,"Name of the tab list, 'Entertainment', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Joke', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab in the tab list, 3, is conveyed","Number of tabs in the tab list, 3, is conveyed" -5,Navigate forwards to a tab list,voiceover_macos,interaction,navigate forwards to tab list,setFocusBeforeTablist,sets focus on a link before the tab list,tablist aria-label tab aria-labelledby aria-selected,Navigate to the tab list. Note: You may need to press certain commands (such as Control+Option+Right Arrow) multiple times to hear all information relating to the tab list.,Role 'tab list' is conveyed,"Name of the tab list, 'Entertainment', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Nils Frahm', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab, 1, is conveyed","Number of tabs in the tab list, 3, is conveyed" -6,Navigate backwards to a tab list,voiceover_macos,interaction,navigate backwards to tab list,activateThirdTabAndSetFocusOnTabpanel,"activates the third tab in the tab list, and sets focus on the tab panel",tablist aria-label tab aria-labelledby aria-selected,Navigate to the tab list. Note: You may need to press certain commands (such as Control+Option+Left Arrow) multiple times to hear all information relating to the tab list.,Role 'tab list' is conveyed,"Name of the tab list, 'Entertainment', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Joke', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab in the tab list, 3, is conveyed","Number of tabs in the tab list, 3, is conveyed" -7,Read information about a tab in a tab list in reading mode,"JAWS,NVDA",reading,read information about tab in tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby aria-selected,"With the reading cursor on the 'Nils Frahm' tab, read information about the tab.",Role 'tab' is conveyed,Name 'Nils Frahm' is conveyed,"State of the tab, 'selected', is conveyed","Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 3, is conveyed",, -8,Read information about a tab in a tab list in interaction mode,"JAWS,NVDA",interaction,read information about tab in tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby aria-selected,"With focus on the 'Nils Frahm' tab, read information about the tab.",Role 'tab' is conveyed,Name 'Nils Frahm' is conveyed,"State of the tab, 'selected', is conveyed","Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 3, is conveyed",, -9,Read information about a tab in a tab list,voiceover_macos,interaction,read information about tab in tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby aria-selected,"With focus on the 'Nils Frahm' tab, read information about the tab.",Role 'tab' is conveyed,Name 'Nils Frahm' is conveyed,"State of the tab, 'selected', is conveyed","Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 3, is conveyed",, -10,Navigate to the next tab in a tab list in reading mode,"JAWS,NVDA",reading,navigate to next tab in tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby,"With the reading cursor on the 'Nils Frahm' tab, navigate to the next tab.",Role 'tab' is conveyed,Name 'Agnes Obel' is conveyed,"2:Position of tab in the tab list, 2, is conveyed","2:Number of tabs in the tab list, 3, is conveyed",,, -11,Navigate to the next tab in a tab list in interaction mode,"JAWS,NVDA",interaction,navigate to next tab in tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby,"With focus on the 'Nils Frahm' tab, navigate to the next tab.",Role 'tab' is conveyed,Name 'Agnes Obel' is conveyed,"Position of tab in the tab list, 2, is conveyed","Number of tabs in the tab list, 3, is conveyed",,, -12,Navigate to the next tab in a tab list,voiceover_macos,interaction,navigate to next tab in tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby,"With focus on the 'Nils Frahm' tab, navigate to the next tab.",Role 'tab' is conveyed,Name 'Agnes Obel' is conveyed,"Position of tab in the tab list, 2, is conveyed","Number of tabs in the tab list, 3, is conveyed",,, -13,Navigate to the previous tab in a tab list in reading mode,"JAWS,NVDA",reading,navigate to previous tab in tab list,setFocusOnSecondTab,sets focus on the second tab,tab aria-labelledby aria-selected,"With the reading cursor on the 'Agnes Obel' tab, navigate to the previous tab.",Role 'tab' is conveyed,Name 'Nils Frahm' is conveyed,"State of the tab, 'selected', is conveyed","2:Position of tab in the tab list, 1, is conveyed","2:Number of tabs in the tab list, 3, is conveyed",, -14,Navigate to the previous tab in a tab list in interaction mode,"JAWS,NVDA",interaction,navigate to previous tab in tab list ,setFocusOnSecondTab,sets focus on the second tab,tab aria-labelledby aria-selected,"With focus on the 'Agnes Obel' tab, navigate to the previous tab.",Role 'tab' is conveyed,Name 'Nils Frahm' is conveyed,"State of the tab, 'selected', is conveyed","Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 3, is conveyed",, -15,Navigate to the previous tab in a tab list,voiceover_macos,interaction,navigate to previous tab in tab list,setFocusOnSecondTab,sets focus on the second tab,tab aria-labelledby aria-selected,"With focus on the 'Agnes Obel' tab, navigate to the previous tab.",Role 'tab' is conveyed,Name 'Nils Frahm' is conveyed,"State of the tab, 'selected', is conveyed","Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 3, is conveyed",, -16,Navigate to the first tab in a tab list in interaction mode,"JAWS,NVDA",interaction,navigate to first tab in tab list,setFocusOnThirdTab,sets focus on the third tab,tab aria-labelledby aria-selected,"With focus on the 'Joke' tab, navigate to the first tab.",Role 'tab' is conveyed,Name 'Nils Frahm' is conveyed,"State of the tab, 'selected', is conveyed","Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 3, is conveyed",, -17,Navigate to the first tab in a tab list,voiceover_macos,interaction,navigate to first tab in tab list,setFocusOnThirdTab,sets focus on the third tab,tab aria-labelledby aria-selected,"With focus on the 'Joke' tab, navigate to the first tab.",Role 'tab' is conveyed,Name 'Nils Frahm' is conveyed,"State of the tab, 'selected', is conveyed","Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 3, is conveyed",, -18,Navigate to the last tab in a tab list in interaction mode,"JAWS,NVDA",interaction,navigate to last tab in tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby,"With focus on the 'Nils Frahm' tab, navigate to the last tab.",Role 'tab' is conveyed,Name 'Joke' is conveyed,"Position of tab in the tab list, 3, is conveyed","Number of tabs in the tab list, 3, is conveyed",,, -19,Navigate to the last tab in a tab list,voiceover_macos,interaction,navigate to last tab in tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby,"With focus on the 'Nils Frahm' tab, navigate to the last tab.",Role 'tab' is conveyed,Name 'Joke' is conveyed,"Position of tab in the tab list, 3, is conveyed","Number of tabs in the tab list, 3, is conveyed",,, -20,Navigate forwards to a tab panel in interaction mode,"JAWS,NVDA",interaction,navigate forwards to tab panel,setFocusOnFirstTab,sets focus on the first tab,tabpanel aria-labelledby,Navigate to the tab panel.,Role 'tab panel' is conveyed,Name 'Nils Frahm' is conveyed,"Textual content of the tab panel is conveyed as '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.'",,,, -21,Navigate backwards to a tab panel in interaction mode,"JAWS,NVDA",interaction,navigate backwards to tab panel,setFocusAfterTabpanel,sets focus on a link after the tab panel,tabpanel aria-labelledby,Navigate to the tab panel.,Role 'tab panel' is conveyed,Name 'Nils Frahm' is conveyed,"Textual content of the tab panel is conveyed as '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.'",,,, -22,Navigate forwards to a tab panel,voiceover_macos,interaction,navigate forwards to tab panel,setFocusOnFirstTab,sets focus on the first tab,tabpanel aria-labelledby,Navigate to the tab panel. Note: You may need to press certain commands (such as Control+Option+Right Arrow) multiple times to hear all information relating to the tab panel.,Role 'tab panel' is conveyed,Name 'Nils Frahm' is conveyed,"Textual content of the tab panel is conveyed as '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.'",,,, -23,Navigate backwards to a tab panel,voiceover_macos,interaction,navigate backwards to tab panel,setFocusAfterTabpanel,sets focus on a link after the tab panel,tabpanel aria-labelledby,Navigate to the tab panel. Note: You may need to press certain commands (such as Control+Option+Left Arrow) multiple times to hear all information relating to the tab panel.,Role 'tab panel' is conveyed,Name 'Nils Frahm' is conveyed,"Textual content of the tab panel is conveyed as '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.'",,,, -24,Activate a tab in a tab list in reading mode,"JAWS,NVDA",reading,activate tab in tab list,setFocusOnSecondTab,sets focus on the second tab,aria-selected,"With the reading cursor on the 'Agnes Obel' tab, activate the tab.","State of the tab, 'selected', is conveyed",,,,,, -25,Activate a tab in a tab list in interaction mode,"JAWS,NVDA",interaction,activate tab in tab list,setFocusOnSecondTab,sets focus on the second tab,aria-selected,"With focus on the 'Agnes Obel' tab, activate the tab.","State of the tab, 'selected', is conveyed",,,,,, -26,Activate a tab in a tab list,voiceover_macos,interaction,activate tab in tab list,setFocusOnSecondTab,sets focus on the second tab,aria-selected,"With focus on the 'Agnes Obel' tab, activate the tab.","State of the tab, 'selected', is conveyed",,,,,, -27,Delete a tab from a tab list in reading mode,"JAWS,NVDA",reading,delete tab from tab list ,setFocusOnThirdTab,sets focus on the third tab,tab aria-labelledby aria-selected,"With the reading cursor on the 'Joke' tab, delete the tab.",Role 'tab' is conveyed,Name 'Agnes Obel' is conveyed,"State of the tab, 'selected', is conveyed","Position of tab in the tab list, 2, is conveyed","Number of tabs in the tab list, 2, is conveyed",, -28,Delete a tab from a tab list in interaction mode,"JAWS,NVDA",interaction,delete tab from tab list ,setFocusOnThirdTab,sets focus on the third tab,tab aria-labelledby aria-selected,"With focus on the 'Joke' tab, delete the tab.",Role 'tab' is conveyed,Name 'Agnes Obel' is conveyed,"State of the tab, 'selected', is conveyed","Position of tab in the tab list, 2, is conveyed","Number of tabs in the tab list, 2, is conveyed",, -29,Delete a tab from a tab list,voiceover_macos,interaction,delete tab from tab list,setFocusOnThirdTab,sets focus on the third tab,tab aria-labelledby aria-selected,"With focus on the 'Joke' tab, delete the tab.",Role 'tab' is conveyed,Name 'Agnes Obel' is conveyed,"State of the tab, 'selected', is conveyed","Position of tab in the tab list, 2, is conveyed","Number of tabs in the tab list, 2, is conveyed",, +1,Navigate forwards to a tab list in reading mode,"JAWS,NVDA",READING,Navigate forwards to a tab list,setFocusBeforeTablist,sets focus on a link before the tab list,tablist aria-label tab aria-labelledby aria-selected,"With the reading cursor on the 'Navigate forwards from here' link, Navigate to the 'Danish Composers' tab list.",Role 'tab list' is conveyed,"Name of the tab list, 'Danish Composers', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Maria Ahlefeldt', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab, 1, is conveyed","Number of tabs in the tab list, 4, is conveyed" +2,Navigate forwards to a tab list in interaction mode,"JAWS,NVDA",INTERACTION,Navigate forwards to a tab list,setFocusBeforeTablist,sets focus on a link before the tab list,tablist aria-label tab aria-labelledby aria-selected,"With focus on the 'Navigate forwards from here' link, Navigate to the 'Danish Composers' tab list.",Role 'tab list' is conveyed,"Name of the tab list, 'Danish Composers', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Maria Ahlefeldt', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab, 1, is conveyed","Number of tabs in the tab list, 4, is conveyed" +3,Navigate forwards to a tab list,VOICEOVER_MACOS,INTERACTION,Navigate forwards to a tab list,setFocusBeforeTablist,sets focus on a link before the tab list,tablist aria-label tab aria-labelledby aria-selected,"With focus on the 'Navigate forwards from here' link, Navigate to the 'Danish Composers' tab list.",Role 'tab list' is conveyed,"Name of the tab list, 'Danish Composers', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Maria Ahlefeldt', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab, 1, is conveyed","Number of tabs in the tab list, 4, is conveyed" +4,Navigate backwards to a tab list in reading mode,"JAWS,NVDA",READING,Navigate backwards to a tab list,activateFourthTabAndSetFocusOnTabpanel,"activates the fourth tab in the tab list, and sets focus on the tab panel",tablist aria-label tab aria-labelledby aria-selected,"With the reading cursor on the 'Peter Lange-Müller' tab panel, Navigate to the 'Danish Composers' tab list.",Role 'tab list' is conveyed,"Name of the tab list, 'Danish Composers', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Peter Lange-Müller', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab, 4, is conveyed","Number of tabs in the tab list, 4, is conveyed" +5,Navigate backwards to a tab list in interaction mode,"JAWS,NVDA",INTERACTION,Navigate backwards to a tab list,activateFourthTabAndSetFocusOnTabpanel,"activates the fourth tab in the tab list, and sets focus on the tab panel",tablist aria-label tab aria-labelledby aria-selected,"With focus on the 'Peter Lange-Müller' tab panel, Navigate to the 'Danish Composers' tab list.",Role 'tab list' is conveyed,"Name of the tab list, 'Danish Composers', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Peter Lange-Müller', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab, 4, is conveyed","Number of tabs in the tab list, 4, is conveyed" +6,Navigate backwards to a tab list,VOICEOVER_MACOS,INTERACTION,Navigate backwards to a tab list,activateFourthTabAndSetFocusOnTabpanel,"activates the fourth tab in the tab list, and sets focus on the tab panel",tablist aria-label tab aria-labelledby aria-selected,"With focus on the 'Peter Lange-Müller' tab panel, Navigate to the 'Danish Composers' tab list.",Role 'tab list' is conveyed,"Name of the tab list, 'Danish Composers', is conveyed","Role of the selected item, 'tab', is conveyed","Name of the focused tab, 'Peter Lange-Müller', is conveyed","State of the focused tab, 'selected', is conveyed","Position of the focused tab, 4, is conveyed","Number of tabs in the tab list, 4, is conveyed" +7,Read information about a tab in a tab list in reading mode,"JAWS,NVDA",READING,Read information about a tab in a tab list ,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby aria-selected,"With the reading cursor on the 'Maria Ahlefeldt' tab, read information about the tab."",",Role 'tab' is conveyed,Name 'Maria Ahlefeldt' is conveyed,State 'selected' is conveyed,"Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 4, is conveyed",, +8,Read information about a tab in a tab list in interaction mode,"JAWS,NVDA",INTERACTION,Read information about a tab in a tab list ,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby aria-selected,"With focus on the 'Maria Ahlefeldt' tab, read information about the tab."",",Role 'tab' is conveyed,Name 'Maria Ahlefeldt' is conveyed,State 'selected' is conveyed,"Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 4, is conveyed",, +9,Read information about a tab in a tab list ,VOICEOVER_MACOS,INTERACTION,Read information about a tab in a tab list ,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby aria-selected,"With focus on the 'Maria Ahlefeldt' tab, read information about the tab."",",Role 'tab' is conveyed,Name 'Maria Ahlefeldt' is conveyed,State 'selected' is conveyed,"Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 4, is conveyed",, +10,Navigate to the next tab in a tab list in reading mode,"JAWS,NVDA",READING,Navigate to the next tab in a tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby aria-selected,"With the reading cursor on the 'Maria Ahlefeldt' tab, navigate to the 'Carl Andersen' tab."",",Role 'tab' is conveyed,Name 'Carl Andersen' is conveyed,State 'selected' is conveyed,"2:Position of tab in the tab list, 2, is conveyed","2:Number of tabs in the tab list, 4, is conveyed",, +11,Navigate to the next tab in a tab list in interaction mode,"JAWS,NVDA",INTERACTION,Navigate to the next tab in a tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby aria-selected,"With focus on the 'Maria Ahlefeldt' tab, navigate to the 'Carl Andersen' tab."",",Role 'tab' is conveyed,Name 'Carl Andersen' is conveyed,State 'selected' is conveyed,"Position of tab in the tab list, 2, is conveyed","Number of tabs in the tab list, 4, is conveyed",, +12,Navigate to the next tab in a tab list,VOICEOVER_MACOS,INTERACTION,Navigate to the next tab in a tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby aria-selected,"With focus on the 'Maria Ahlefeldt' tab, navigate to the 'Carl Andersen' tab."",",Role 'tab' is conveyed,Name 'Carl Andersen' is conveyed,State 'selected' is conveyed,"Position of tab in the tab list, 2, is conveyed","Number of tabs in the tab list, 4, is conveyed",, +13,Navigate to the previous tab in a tab list in reading mode,"JAWS,NVDA",READING,Navigate to the previous tab in a tab list,setFocusOnSecondTab,sets focus on the second tab,tab aria-labelledby aria-selected,"With the reading cursor on the 'Carl Andersen' tab, navigate to the 'Maria Ahlefeldt' tab."",",Role 'tab' is conveyed,Name 'Maria Ahlefeldt' is conveyed,State 'selected' is conveyed,"2:Position of tab in the tab list, 1, is conveyed","2:Number of tabs in the tab list, 4, is conveyed",, +14,Navigate to the previous tab in a tab list in interaction mode,"JAWS,NVDA",INTERACTION,Navigate to the previous tab in a tab list,setFocusOnSecondTab,sets focus on the second tab,tab aria-labelledby aria-selected,"With focus on the 'Carl Andersen' tab, navigate to the 'Maria Ahlefeldt' tab."",",Role 'tab' is conveyed,Name 'Maria Ahlefeldt' is conveyed,State 'selected' is conveyed,"Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 4, is conveyed",, +15,Navigate to the previous tab in a tab list,VOICEOVER_MACOS,INTERACTION,Navigate to the previous tab in a tab list,setFocusOnSecondTab,sets focus on the second tab,tab aria-labelledby aria-selected,"With focus on the 'Carl Andersen' tab, navigate to the 'Maria Ahlefeldt' tab."",",Role 'tab' is conveyed,Name 'Maria Ahlefeldt' is conveyed,State 'selected' is conveyed,"Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 4, is conveyed",, +16,Navigate to the first tab in a tab list in interaction mode,"JAWS,NVDA",INTERACTION,Navigate to the first tab in a tab list,setFocusOnFourthTab,sets focus on the fourth tab,tab aria-labelledby aria-selected,"With focus on the 'Peter Lange-Müller' tab, navigate to the 'Maria Ahlefeldt' tab."",",Role 'tab' is conveyed,Name 'Maria Ahlefeldt' is conveyed,State 'selected' is conveyed,"Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 4, is conveyed",, +17,Navigate to the first tab in a tab list,VOICEOVER_MACOS,INTERACTION,Navigate to the first tab in a tab list,setFocusOnFourthTab,sets focus on the fourth tab,tab aria-labelledby aria-selected,"With focus on the 'Peter Lange-Müller' tab, navigate to the 'Maria Ahlefeldt' tab."",",Role 'tab' is conveyed,Name 'Maria Ahlefeldt' is conveyed,State 'selected' is conveyed,"Position of tab in the tab list, 1, is conveyed","Number of tabs in the tab list, 4, is conveyed",, +18,Navigate to the last tab in a tab list in interaction mode,"JAWS,NVDA",INTERACTION,Navigate to the last tab in a tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby aria-selected,"With focus on the 'Maria Ahlefeldt' tab, navigate to the 'Peter Lange-Müller' tab."",",Role 'tab' is conveyed,Name 'Peter Lange-Müller' is conveyed,State 'selected' is conveyed,"Position of tab in the tab list, 4, is conveyed","Number of tabs in the tab list, 4, is conveyed",, +19,Navigate to the last tab in a tab list,VOICEOVER_MACOS,INTERACTION,Navigate to the last tab in a tab list,setFocusOnFirstTab,sets focus on the first tab,tab aria-labelledby aria-selected,"With focus on the 'Maria Ahlefeldt' tab, navigate to the 'Peter Lange-Müller' tab."",",Role 'tab' is conveyed,Name 'Peter Lange-Müller' is conveyed,State 'selected' is conveyed,"Position of tab in the tab list, 4, is conveyed","Number of tabs in the tab list, 4, is conveyed",, +20,Navigate forwards to a tab panel in interaction mode,"JAWS,NVDA",INTERACTION,Navigate forwards to a tab panel,setFocusOnFirstTab,sets focus on the first tab,tabpanel aria-labelledby,"With focus on the 'Maria Ahlefeldt' tab, navigate to the tab panel."",",Role 'tab panel' is conveyed,Name 'Maria Ahlefeldt' is conveyed,"Textual content of the tab panel is conveyed as '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').'",,,, +21,Navigate forwards to a tab panel,VOICEOVER_MACOS,INTERACTION,Navigate forwards to a tab panel,setFocusOnFirstTab,sets focus on the first tab,tabpanel aria-labelledby,"With focus on the 'Maria Ahlefeldt' tab, navigate to the tab panel."",",Role 'tab panel' is conveyed,Name 'Maria Ahlefeldt' is conveyed,"Textual content of the tab panel is conveyed as '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').'",,,, +22,Navigate backwards to a tab panel in interaction mode,"JAWS,NVDA",INTERACTION,Navigate backwards to a tab panel,setFocusAfterTabpanel,sets focus on a link after the tab panel,tabpanel aria-labelledby,"With focus on the 'Navigate backwards from here' link, navigate to the tab panel."",",Role 'tab panel' is conveyed,Name 'Maria Ahlefeldt' is conveyed,"Textual content of the tab panel is conveyed as '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').'",,,, +23,Navigate backwards to a tab panel,VOICEOVER_MACOS,INTERACTION,Navigate backwards to a tab panel,setFocusAfterTabpanel,sets focus on a link after the tab panel,tabpanel aria-labelledby,"With focus on the 'Navigate backwards from here' link, navigate to the tab panel."",",Role 'tab panel' is conveyed,Name 'Maria Ahlefeldt' is conveyed,"Textual content of the tab panel is conveyed as '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').'",,,, +24,Activate a tab in a tab list in reading mode,"JAWS,NVDA",READING,Activate a tab in a tab list,setFocusOnSecondTab,sets focus on the second tab,aria-selected,"With the reading cursor on the 'Carl Andersen' tab, activate the tab.",State 'selected' is conveyed,,,,,, +25,Activate a tab in a tab list in interaction mode,"JAWS,NVDA",INTERACTION,Activate a tab in a tab list,setFocusOnSecondTab,sets focus on the second tab,aria-selected,"With focus on the 'Carl Andersen' tab, activate the tab.",State 'selected' is conveyed,,,,,, +26,Activate a tab in a tab list,VOICEOVER_MACOS,INTERACTION,Activate a tab in a tab list,setFocusOnSecondTab,sets focus on the second tab,aria-selected,"With focus on the 'Carl Andersen' tab, activate the tab.",State 'selected' is conveyed,,,,,, From aa296cc016d1c9d64aad1534872af9b5f107e586 Mon Sep 17 00:00:00 2001 From: IsaDC Date: Fri, 10 Jun 2022 21:15:32 +0000 Subject: [PATCH 3/3] Generate .html source files with scripts automatically --- ...activateThirdTabAndSetFocusOnTabpanel.html | 422 ++++++++++++++++++ .../tabs-manual.setFocusAfterTabpanel.html | 407 +++++++++++++++++ .../tabs-manual.setFocusBeforeTablist.html | 407 +++++++++++++++++ .../tabs-manual.setFocusOnFirstTab.html | 407 +++++++++++++++++ .../tabs-manual.setFocusOnSecondTab.html | 407 +++++++++++++++++ .../tabs-manual.setFocusOnThirdTab.html | 407 +++++++++++++++++ 6 files changed, 2457 insertions(+) create mode 100644 tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.activateThirdTabAndSetFocusOnTabpanel.html create mode 100644 tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusAfterTabpanel.html create mode 100644 tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusBeforeTablist.html create mode 100644 tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnFirstTab.html create mode 100644 tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnSecondTab.html create mode 100644 tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnThirdTab.html diff --git a/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.activateThirdTabAndSetFocusOnTabpanel.html b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.activateThirdTabAndSetFocusOnTabpanel.html new file mode 100644 index 000000000..afc691794 --- /dev/null +++ b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.activateThirdTabAndSetFocusOnTabpanel.html @@ -0,0 +1,422 @@ + + + + + Example of Tabs with Manual Activation | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + + + + + + + + +
+

Example of Tabs with Manual Activation

+

+ The below example section demonstrates a tabs widget that implements the tabs design pattern. + 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:

+ + +
+
+

Example

+
+ +
+
+

Danish Composers

+
+ + + + +
+ +
+

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').

+
+ + + +
+
+ +
+ +
+

Accessibility Features

+
    +
  • 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. +
    • +
    +
  • +
  • + 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. +
  • +
+
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
Tab +
    +
  • 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 a element in tabpanel.
  • +
+
Enter
Space
+ When a tab has focus, activates the tab, causing its associated panel to be displayed. +
Right Arrow + When a tab has focus: +
    +
  • Moves focus to the next tab.
  • +
  • If focus is on the last tab, moves focus to the first tab.
  • +
+
Left Arrow + When a tab has focus: +
    +
  • Moves focus to the previous tab.
  • +
  • If focus is on the first tab, moves focus to the last tab.
  • +
+
HomeWhen a tab has focus, moves focus to the first tab.
EndWhen a tab has focus, moves focus to the last tab.
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
+ tablist + + div + Indicates that the element serves as a container for a set of tabs.
+ aria-labelledby="ID_REFERENCE" + + div + Provides a label that describes the purpose of the set of tabs.
+ tab + + button + +
    +
  • Indicates the element serves as a tab control.
  • +
  • + Provides a title for its associated tabpanel. +
  • +
+
+ aria-selected="true" + + button + +
    +
  • Indicates the tab control is activated and its associated panel is displayed.
  • +
  • Set when a user activates a tab.
  • +
  • Does not change when focus moves in the tablist.
  • +
+
+ aria-selected="false" + + button + +
    +
  • + Indicates the tab control is not active and its associated panel is NOT + displayed. +
  • +
  • Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel.
  • +
+
+ tabindex="-1" + + button + +
    +
  • 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.
  • +
+
+ aria-controls="ID_REFERENCE" + + button + + Refers to the tabpanel element associated with the tab. +
+ tabpanel + + div + +
    +
  • Indicates the element serves as a container for tab panel content.
  • +
  • + Is hidden unless its associated tab control is activated. +
  • +
+
+ aria-labelledby="ID_REFERENCE" + + div + +
    +
  • + Refers to the tab element that controls the panel. +
  • +
  • Provides an accessible name for the tab panel.
  • +
+
+
+ +
+

Javascript and CSS Source Code

+ +
+ +
+

HTML Source Code

+ +
+ + +
+ + + +
+ +
+
+ + + + diff --git a/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusAfterTabpanel.html b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusAfterTabpanel.html new file mode 100644 index 000000000..311a9a265 --- /dev/null +++ b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusAfterTabpanel.html @@ -0,0 +1,407 @@ + + + + + Example of Tabs with Manual Activation | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + + + + + + + + +
+

Example of Tabs with Manual Activation

+

+ The below example section demonstrates a tabs widget that implements the tabs design pattern. + 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:

+ + +
+
+

Example

+
+ +
+
+

Danish Composers

+
+ + + + +
+ +
+

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').

+
+ + + +
+
+ +
+ +
+

Accessibility Features

+
    +
  • 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. +
    • +
    +
  • +
  • + 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. +
  • +
+
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
Tab +
    +
  • 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 a element in tabpanel.
  • +
+
Enter
Space
+ When a tab has focus, activates the tab, causing its associated panel to be displayed. +
Right Arrow + When a tab has focus: +
    +
  • Moves focus to the next tab.
  • +
  • If focus is on the last tab, moves focus to the first tab.
  • +
+
Left Arrow + When a tab has focus: +
    +
  • Moves focus to the previous tab.
  • +
  • If focus is on the first tab, moves focus to the last tab.
  • +
+
HomeWhen a tab has focus, moves focus to the first tab.
EndWhen a tab has focus, moves focus to the last tab.
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
+ tablist + + div + Indicates that the element serves as a container for a set of tabs.
+ aria-labelledby="ID_REFERENCE" + + div + Provides a label that describes the purpose of the set of tabs.
+ tab + + button + +
    +
  • Indicates the element serves as a tab control.
  • +
  • + Provides a title for its associated tabpanel. +
  • +
+
+ aria-selected="true" + + button + +
    +
  • Indicates the tab control is activated and its associated panel is displayed.
  • +
  • Set when a user activates a tab.
  • +
  • Does not change when focus moves in the tablist.
  • +
+
+ aria-selected="false" + + button + +
    +
  • + Indicates the tab control is not active and its associated panel is NOT + displayed. +
  • +
  • Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel.
  • +
+
+ tabindex="-1" + + button + +
    +
  • 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.
  • +
+
+ aria-controls="ID_REFERENCE" + + button + + Refers to the tabpanel element associated with the tab. +
+ tabpanel + + div + +
    +
  • Indicates the element serves as a container for tab panel content.
  • +
  • + Is hidden unless its associated tab control is activated. +
  • +
+
+ aria-labelledby="ID_REFERENCE" + + div + +
    +
  • + Refers to the tab element that controls the panel. +
  • +
  • Provides an accessible name for the tab panel.
  • +
+
+
+ +
+

Javascript and CSS Source Code

+ +
+ +
+

HTML Source Code

+ +
+ + +
+ + + +
+ +
+
+ + + + diff --git a/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusBeforeTablist.html b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusBeforeTablist.html new file mode 100644 index 000000000..933f4279b --- /dev/null +++ b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusBeforeTablist.html @@ -0,0 +1,407 @@ + + + + + Example of Tabs with Manual Activation | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + + + + + + + + +
+

Example of Tabs with Manual Activation

+

+ The below example section demonstrates a tabs widget that implements the tabs design pattern. + 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:

+ + +
+
+

Example

+
+ +
+
+

Danish Composers

+
+ + + + +
+ +
+

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').

+
+ + + +
+
+ +
+ +
+

Accessibility Features

+
    +
  • 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. +
    • +
    +
  • +
  • + 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. +
  • +
+
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
Tab +
    +
  • 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 a element in tabpanel.
  • +
+
Enter
Space
+ When a tab has focus, activates the tab, causing its associated panel to be displayed. +
Right Arrow + When a tab has focus: +
    +
  • Moves focus to the next tab.
  • +
  • If focus is on the last tab, moves focus to the first tab.
  • +
+
Left Arrow + When a tab has focus: +
    +
  • Moves focus to the previous tab.
  • +
  • If focus is on the first tab, moves focus to the last tab.
  • +
+
HomeWhen a tab has focus, moves focus to the first tab.
EndWhen a tab has focus, moves focus to the last tab.
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
+ tablist + + div + Indicates that the element serves as a container for a set of tabs.
+ aria-labelledby="ID_REFERENCE" + + div + Provides a label that describes the purpose of the set of tabs.
+ tab + + button + +
    +
  • Indicates the element serves as a tab control.
  • +
  • + Provides a title for its associated tabpanel. +
  • +
+
+ aria-selected="true" + + button + +
    +
  • Indicates the tab control is activated and its associated panel is displayed.
  • +
  • Set when a user activates a tab.
  • +
  • Does not change when focus moves in the tablist.
  • +
+
+ aria-selected="false" + + button + +
    +
  • + Indicates the tab control is not active and its associated panel is NOT + displayed. +
  • +
  • Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel.
  • +
+
+ tabindex="-1" + + button + +
    +
  • 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.
  • +
+
+ aria-controls="ID_REFERENCE" + + button + + Refers to the tabpanel element associated with the tab. +
+ tabpanel + + div + +
    +
  • Indicates the element serves as a container for tab panel content.
  • +
  • + Is hidden unless its associated tab control is activated. +
  • +
+
+ aria-labelledby="ID_REFERENCE" + + div + +
    +
  • + Refers to the tab element that controls the panel. +
  • +
  • Provides an accessible name for the tab panel.
  • +
+
+
+ +
+

Javascript and CSS Source Code

+ +
+ +
+

HTML Source Code

+ +
+ + +
+ + + +
+ +
+
+ + + + diff --git a/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnFirstTab.html b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnFirstTab.html new file mode 100644 index 000000000..f80e817ab --- /dev/null +++ b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnFirstTab.html @@ -0,0 +1,407 @@ + + + + + Example of Tabs with Manual Activation | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + + + + + + + + +
+

Example of Tabs with Manual Activation

+

+ The below example section demonstrates a tabs widget that implements the tabs design pattern. + 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:

+ + +
+
+

Example

+
+ +
+
+

Danish Composers

+
+ + + + +
+ +
+

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').

+
+ + + +
+
+ +
+ +
+

Accessibility Features

+
    +
  • 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. +
    • +
    +
  • +
  • + 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. +
  • +
+
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
Tab +
    +
  • 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 a element in tabpanel.
  • +
+
Enter
Space
+ When a tab has focus, activates the tab, causing its associated panel to be displayed. +
Right Arrow + When a tab has focus: +
    +
  • Moves focus to the next tab.
  • +
  • If focus is on the last tab, moves focus to the first tab.
  • +
+
Left Arrow + When a tab has focus: +
    +
  • Moves focus to the previous tab.
  • +
  • If focus is on the first tab, moves focus to the last tab.
  • +
+
HomeWhen a tab has focus, moves focus to the first tab.
EndWhen a tab has focus, moves focus to the last tab.
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
+ tablist + + div + Indicates that the element serves as a container for a set of tabs.
+ aria-labelledby="ID_REFERENCE" + + div + Provides a label that describes the purpose of the set of tabs.
+ tab + + button + +
    +
  • Indicates the element serves as a tab control.
  • +
  • + Provides a title for its associated tabpanel. +
  • +
+
+ aria-selected="true" + + button + +
    +
  • Indicates the tab control is activated and its associated panel is displayed.
  • +
  • Set when a user activates a tab.
  • +
  • Does not change when focus moves in the tablist.
  • +
+
+ aria-selected="false" + + button + +
    +
  • + Indicates the tab control is not active and its associated panel is NOT + displayed. +
  • +
  • Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel.
  • +
+
+ tabindex="-1" + + button + +
    +
  • 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.
  • +
+
+ aria-controls="ID_REFERENCE" + + button + + Refers to the tabpanel element associated with the tab. +
+ tabpanel + + div + +
    +
  • Indicates the element serves as a container for tab panel content.
  • +
  • + Is hidden unless its associated tab control is activated. +
  • +
+
+ aria-labelledby="ID_REFERENCE" + + div + +
    +
  • + Refers to the tab element that controls the panel. +
  • +
  • Provides an accessible name for the tab panel.
  • +
+
+
+ +
+

Javascript and CSS Source Code

+ +
+ +
+

HTML Source Code

+ +
+ + +
+ + + +
+ +
+
+ + + + diff --git a/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnSecondTab.html b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnSecondTab.html new file mode 100644 index 000000000..b27d7d6d5 --- /dev/null +++ b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnSecondTab.html @@ -0,0 +1,407 @@ + + + + + Example of Tabs with Manual Activation | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + + + + + + + + +
+

Example of Tabs with Manual Activation

+

+ The below example section demonstrates a tabs widget that implements the tabs design pattern. + 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:

+ + +
+
+

Example

+
+ +
+
+

Danish Composers

+
+ + + + +
+ +
+

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').

+
+ + + +
+
+ +
+ +
+

Accessibility Features

+
    +
  • 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. +
    • +
    +
  • +
  • + 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. +
  • +
+
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
Tab +
    +
  • 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 a element in tabpanel.
  • +
+
Enter
Space
+ When a tab has focus, activates the tab, causing its associated panel to be displayed. +
Right Arrow + When a tab has focus: +
    +
  • Moves focus to the next tab.
  • +
  • If focus is on the last tab, moves focus to the first tab.
  • +
+
Left Arrow + When a tab has focus: +
    +
  • Moves focus to the previous tab.
  • +
  • If focus is on the first tab, moves focus to the last tab.
  • +
+
HomeWhen a tab has focus, moves focus to the first tab.
EndWhen a tab has focus, moves focus to the last tab.
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
+ tablist + + div + Indicates that the element serves as a container for a set of tabs.
+ aria-labelledby="ID_REFERENCE" + + div + Provides a label that describes the purpose of the set of tabs.
+ tab + + button + +
    +
  • Indicates the element serves as a tab control.
  • +
  • + Provides a title for its associated tabpanel. +
  • +
+
+ aria-selected="true" + + button + +
    +
  • Indicates the tab control is activated and its associated panel is displayed.
  • +
  • Set when a user activates a tab.
  • +
  • Does not change when focus moves in the tablist.
  • +
+
+ aria-selected="false" + + button + +
    +
  • + Indicates the tab control is not active and its associated panel is NOT + displayed. +
  • +
  • Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel.
  • +
+
+ tabindex="-1" + + button + +
    +
  • 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.
  • +
+
+ aria-controls="ID_REFERENCE" + + button + + Refers to the tabpanel element associated with the tab. +
+ tabpanel + + div + +
    +
  • Indicates the element serves as a container for tab panel content.
  • +
  • + Is hidden unless its associated tab control is activated. +
  • +
+
+ aria-labelledby="ID_REFERENCE" + + div + +
    +
  • + Refers to the tab element that controls the panel. +
  • +
  • Provides an accessible name for the tab panel.
  • +
+
+
+ +
+

Javascript and CSS Source Code

+ +
+ +
+

HTML Source Code

+ +
+ + +
+ + + +
+ +
+
+ + + + diff --git a/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnThirdTab.html b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnThirdTab.html new file mode 100644 index 000000000..e9d8abacf --- /dev/null +++ b/tests/tabs-manual-activation/reference/2022-6-10_16318/tabs-manual.setFocusOnThirdTab.html @@ -0,0 +1,407 @@ + + + + + Example of Tabs with Manual Activation | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + + + + + + + + +
+

Example of Tabs with Manual Activation

+

+ The below example section demonstrates a tabs widget that implements the tabs design pattern. + 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:

+ + +
+
+

Example

+
+ +
+
+

Danish Composers

+
+ + + + +
+ +
+

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').

+
+ + + +
+
+ +
+ +
+

Accessibility Features

+
    +
  • 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. +
    • +
    +
  • +
  • + 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. +
  • +
+
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
Tab +
    +
  • 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 a element in tabpanel.
  • +
+
Enter
Space
+ When a tab has focus, activates the tab, causing its associated panel to be displayed. +
Right Arrow + When a tab has focus: +
    +
  • Moves focus to the next tab.
  • +
  • If focus is on the last tab, moves focus to the first tab.
  • +
+
Left Arrow + When a tab has focus: +
    +
  • Moves focus to the previous tab.
  • +
  • If focus is on the first tab, moves focus to the last tab.
  • +
+
HomeWhen a tab has focus, moves focus to the first tab.
EndWhen a tab has focus, moves focus to the last tab.
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
+ tablist + + div + Indicates that the element serves as a container for a set of tabs.
+ aria-labelledby="ID_REFERENCE" + + div + Provides a label that describes the purpose of the set of tabs.
+ tab + + button + +
    +
  • Indicates the element serves as a tab control.
  • +
  • + Provides a title for its associated tabpanel. +
  • +
+
+ aria-selected="true" + + button + +
    +
  • Indicates the tab control is activated and its associated panel is displayed.
  • +
  • Set when a user activates a tab.
  • +
  • Does not change when focus moves in the tablist.
  • +
+
+ aria-selected="false" + + button + +
    +
  • + Indicates the tab control is not active and its associated panel is NOT + displayed. +
  • +
  • Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel.
  • +
+
+ tabindex="-1" + + button + +
    +
  • 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.
  • +
+
+ aria-controls="ID_REFERENCE" + + button + + Refers to the tabpanel element associated with the tab. +
+ tabpanel + + div + +
    +
  • Indicates the element serves as a container for tab panel content.
  • +
  • + Is hidden unless its associated tab control is activated. +
  • +
+
+ aria-labelledby="ID_REFERENCE" + + div + +
    +
  • + Refers to the tab element that controls the panel. +
  • +
  • Provides an accessible name for the tab panel.
  • +
+
+
+ +
+

Javascript and CSS Source Code

+ +
+ +
+

HTML Source Code

+ +
+ + +
+ + + +
+ +
+
+ + + +