Accordion Test Plan Update (#1267)

* Add v1 test plan files

* Add v2 files

* Remove v1 files

* Update reference path

* Update example and references file

* Update references.csv to v2 format

* Add trimmed example

* Editorial corrections to assertions.csv

* Editorial changes to assertions.csv

* Editorial correction to assertions.csv

* Change assertion for tab panel text in tests.csv

* Editorial changes to assertions to be consistent with the v2 format

* Remove duplicated assertions

* remove duplicated assertion from tests.csv

* Correct position assertion in assertions.csv

* Correct assertion ID in tests.csv

* Generate .html source files with scripts automatically

* Add setupScript to set focus before the tablist

* Generate .html source files with scripts automatically

* Correct code for first setupScript

* Generate .html source files with scripts automatically

* Add setupScript for test 2

* Correct code for setupScript 2

* Modify code for setupScript 2

* Generate .html source files with scripts automatically

* Correct code for setting focus on tabpanel

* Modify setupScript for test 2 with corrected code

* Generate .html source files with scripts automatically

* Add setupScript for test 3

* Generate .html source files with scripts automatically

* Add setupScript for test 5

* Generate .html source files with scripts automatically

* Add setupsCript for test 6

* Generate .html source files with scripts automatically

* Add setupsCript for test 9

* Generate .html source files with scripts automatically

* Add interaction mode assertion

* Link assertions to references

* Add an extra down arrow to JAWS commands for navigating forwards into a tab list

* Add an extra down arrow to NVDA commands for navigating into a tab list

* Add interaction mode assertion to tests 1 and 2 with 0 priority

* Add interaction mode assertion exception for tab and shift tab for JAWS and NVDA in tests 1 and 2

* Remove down and up arrow commands for navigating to next an previous tabs in browse mode for NVDA, because they don't work in screen layout

* Update VoiceOver commands

* Add right and left arrows for navigating to next and previous tabs with VoiceOver

* Remove vo+right and vo+left for navigating forwards and backwards to a tab panel

* Add assertion for tab panel boundary

* Modify the Navigate backwards to a tab panel test to use up arrow and vo+left only

* add f and shift+f to JAWS and NVDA commands for navigating forwards and backwards into a tab list

* Update Peter Müller assertion

* Update tabPanelText assertion

* Add tests 1 and 2 for navigating into a tab list where the first and last tabs  are not selected and update assertion names

* Add AT commands for navigating forwards and backwards when a tab is not selected

* Add `setupScripts` for navigating to a tab list where a tab is not selected

* add assertions to new tests

* Add missing end line to `setupScripts`

* Remove indentation from `setupScript`

* Add new indentation to `setupScript`

* Remove unexpected character from assertion ID

* Correct test IDs on VoiceOver commands

* Add updated assertion ID to tests.csv

* Correct assertion ID in test 2

* Generate .html source files with scripts automatically

* Editorial changes to test titles

* Change assertions.csv encoding to show special characters correctly

* Modify test 8. Operate a collapsed accordion header so the `setupScript` focuses on the second accordion header that is collapsed by default and modify test instructions to match that change

Author: IsaDC

tests/accordion/data/tests.csv

@@ -6,5 +6,5 @@ navBackToCollapsedAccordionHeader,Navigate backwards to a collapsed accordion he
 reqInfoAboutExpandedAccordionHeader,Request information about an expanded accordion header,15,setFocusOnFirstAccordionHeader,"Starting at the 'Personal Information' accordion header, read information about the accordion header.",roleButton namePersonalInformation stateExpanded
 reqInfoAboutCollapsedAccordionHeader,Request information about a collapsed accordion header,18,setFocusOnAndCollapseFirstAccordionHeader,"Starting at the 'Personal Information' accordion header, read information about the accordion header.",roleButton namePersonalInformation stateCollapsed
 navIntoAccordionPanel,Navigate into an accordion panel,21,setFocusOnFirstAccordionHeader,"Starting at the 'Personal Information' accordion header, navigate into the accordion panel.",roleRegion nameRegionPersonalInformation nameInputName theAbilityToEnterOrEditText stateInputRequired
-operateCollapsedAccordionHeader,Operate a collapsed accordion header,24,setFocusOnAndCollapseFirstAccordionHeader,"Starting at the 'Personal Information' accordion header, change its state to 'expanded'",stateChangeToExpanded
+operateCollapsedAccordionHeader,Operate a collapsed accordion header,24,setFocusOnSecondAccordionHeader,"Starting at the 'Billing Address' accordion header, change its state to 'expanded'",stateChangeToExpanded
 operateExpandedAccordionHeader,Operate an expanded accordion header,25,setFocusOnFirstAccordionHeader,"Starting at the 'Personal Information' accordion header, change its state to collapsed",stateChangeToCollapsed

tests/tabs-automatic-activation/data/assertions.csv

@@ -0,0 +1,18 @@
+assertionId,priority,assertionStatement,assertionPhrase,refIds
+nameTabCarlAndersen,1,"Name of the tab, 'Carl Andersen', is conveyed","convey name, 'Carl Andersen'",aria-labelledby
+nameTabMariaAhlefeldt,1,"Name of the tab, 'Maria Ahlefeldt', is conveyed","convey name of the focused tab, 'Maria Ahlefeldt'",aria-labelledby
+nameTabPeterMuller,1,"Name of the tab, 'Peter Müller', is conveyed","convey name of the focused tab, 'Peter Müller'",aria-labelledby
+nameMariaAhlefeldt,1,Name 'Maria Ahlefeldt' is conveyed,convey name 'Maria Ahlefeldt',aria-labelledby
+nameTabListDanishComposers,1,"Name of the tab list, 'Danish Composers', is conveyed","convey name of the tab list, 'Danish Composers'",aria-labelledby
+numberTabsTabList4,2,"Number of tabs in the tab list, 4, is conveyed","convey number of tabs in the tab list, 4",
+positionTab1,1,"Position of the tab, 1, is conveyed","convey position of the tab, 1",
+positionTab2,1,"Position of the tab, 2, is conveyed","convey position of the tab, 2",
+positionTab4,1,"Position of the tab, 4, is conveyed","convey position of the tab, 4",
+roleTab,1,Role 'tab' is conveyed,convey role 'tab',tab
+roleTabList,1,Role 'tab list' is conveyed,convey role 'tab list',tablist
+roleTabPanel,1,Role 'tab panel' is conveyed,convey role 'tab panel',tabpanel
+stateSelected,1,"State of the tab, 'selected', is conveyed","convey state of the tab, 'selected'",aria-selected
+stateNotSelected,3,"State of the tab, 'not selected', is conveyed","convey state of the tab, 'not selected'",
+tabPanelText,1,"Text of the tab panel, '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').', is conveyed","convey text of tab panel, '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').'",
+interactionModeEnabled,2,Screen reader switched from reading mode to interaction mode|{screenReader} switched from {readingMode} to {interactionMode},switch from reading mode to interaction mode|switch from {readingMode} to {interactionMode},
+tabPanelBoundary,3,Tab panel boundary is conveyed,convey tab panel boundry,

tests/tabs-automatic-activation/data/jaws-commands.csv

@@ -0,0 +1,25 @@
+testId,command,settings,assertionExceptions,presentationNumber
+navForwardsToTabListWhereATabIsNotSelected,down down down,virtualCursor,,1
+navForwardsToTabListWhereATabIsNotSelected,f,virtualCursor,,1.1
+navBackwardsToTabListWhereATabIsNotSelected,up up,virtualCursor,,1.2
+navBackwardsToTabListWhereATabIsNotSelected,shift+f,virtualCursor,,1.4
+navForwardsToTabList,tab,virtualCursor,2:interactionModeEnabled,1.5
+navForwardsToTabList,down down down,virtualCursor,,1.6
+navForwardsToTabList,f,virtualCursor,,1.7
+navForwardsToTabList,tab,pcCursor,,2
+navBackToTabList,shift+tab,virtualCursor,2:interactionModeEnabled,4
+navBackToTabList,up up,virtualCursor,,4.1
+navBackToTabList,shift+f,virtualCursor,,4.2
+navBackToTabList,shift+tab,pcCursor,,5
+reqInfoAboutTabTabList,ins+tab,virtualCursor,,7
+reqInfoAboutTabTabList,ins+up,virtualCursor,,7.1
+reqInfoAboutTabTabList,ins+tab,pcCursor,,8
+reqInfoAboutTabTabList,ins+up,pcCursor,,8.1
+navToNextTabTabList,down,virtualCursor,,10
+navToNextTabTabList,right,pcCursor,,11
+navToPrevTabTabList,up,virtualCursor,,13
+navToPrevTabTabList,left,pcCursor,,14
+navToFirstTabTabList,home,pcCursor,,16
+navToLastTabTabList,end,pcCursor,,18
+navForwardsToTabPanel,tab,pcCursor,,20
+navBackToTabPanel,up,virtualCursor,,22

tests/tabs-automatic-activation/data/js/activateFourthTabAndSetFocusOnTabpanel.js

@@ -0,0 +1,24 @@
+// activates the fourth tab in the tab list, and sets focus on the tab panel// 1. Deactivate all tabs by resetting their attributes
+document.querySelectorAll('[role="tab"]').forEach(t => {
+  t.setAttribute('tabindex', '-1');
+  t.setAttribute('aria-selected', 'false');
+});
+
+// 2. Hide all tab panels
+document.querySelectorAll('[role="tabpanel"]').forEach(p => {
+  p.classList.add('is-hidden');
+});
+
+// 3. Select the specific fourth tab and panel using their unique IDs
+let fourthTab = document.querySelector('#tab-4');
+let fourthPanel = document.querySelector('#tabpanel-4');
+
+// 4. Activate the fourth tab and show its panel
+if (fourthTab && fourthPanel) {
+  fourthTab.removeAttribute('tabindex');
+  fourthTab.setAttribute('aria-selected', 'true');
+  fourthPanel.classList.remove('is-hidden');
+
+  // 5. Set focus on the panel
+  fourthPanel.focus();
+}

tests/tabs-automatic-activation/data/js/deactivateFirstTabAndSetFocusBeforeTablist.js

@@ -0,0 +1,17 @@
+// deactivates the first tab in the tab list, and sets focus on the first link
+// Select the first tab and its corresponding panel
+const firstTab = document.querySelector('#tab-1');
+const firstPanel = document.querySelector('#tabpanel-1');
+
+// Deactivate the tab and hide the panel if they exist
+if (firstTab && firstPanel) {
+  firstTab.setAttribute('aria-selected', 'false');
+  firstTab.setAttribute('tabindex', '-1');
+  firstPanel.classList.add('is-hidden');
+}
+
+// Find the link before the example and set focus on it
+const linkBefore = document.querySelector('#beforelink');
+if (linkBefore) {
+  linkBefore.focus();
+}

tests/tabs-automatic-activation/data/js/setFocusAfterTabpanel.js

@@ -0,0 +1,5 @@
+// sets focus on a link after the tab panel
+const linkAfter = document.querySelector('#afterlink');
+if (linkAfter) {
+  linkAfter.focus();
+}

tests/tabs-automatic-activation/data/js/setFocusBeforeTablist.js

@@ -0,0 +1,2 @@
+// sets focus on a link before the tab list
+testPageDocument.querySelector('#beforelink').focus();

tests/tabs-automatic-activation/data/js/setFocusOnFirstTab.js

@@ -0,0 +1,5 @@
+// sets focus on the first tab
+const firstTab = document.querySelector('#tab-1');
+if (firstTab) {
+  firstTab.focus();
+}

tests/tabs-automatic-activation/data/js/setFocusOnFourthTab.js

@@ -0,0 +1,5 @@
+// sets focus on the fourth tab
+const fourthTab = document.querySelector('#tab-4');
+if (fourthTab) {
+  fourthTab.focus();
+}

tests/tabs-automatic-activation/data/js/setFocusOnSecondTab.js

@@ -0,0 +1,5 @@
+// sets focus on the second tab
+const secondTab = document.querySelector('#tab-2');
+if (secondTab) {
+  secondTab.focus();
+}