Update for the Tabs with Automatic Activation Test Plan

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

@@ -14,6 +14,7 @@ roleTabPanel,1,Role 'tab panel' is conveyed,convey role 'tab panel',tabpanel
 stateChangeToSelected,1,Change in state of the tab to 'selected' is conveyed,convey change in state of the tab to 'selected',aria-selected
 stateNotSelected,3,"State of the tab, 'not selected', is conveyed","convey state of the tab, 'not selected'",aria-selected
 stateSelected,1,"State of the tab, 'selected', is conveyed","convey state of the tab, 'selected'",aria-selected
+tabListBoundary,2,Tab list boundary is conveyed,convey tab list boundry,tablist
 tabPanelBoundary,2,Tab panel boundary is conveyed,convey tab panel boundry,tabpanel
 tabPanelNamePeterMuller,1,"Name of the tab panel, 'Peter Müller', is conveyed","convey name of the tab panel, 'Peter Müller'",aria-labelledby
 tabPanelText,3,"Text of the tab panel, 'Peter Erasmus Lange-Müller (1 December 1850 – 26 February 1926) was a Danish composer and pianist. His compositional style was influenced by Danish folk music and by the work of Robert Schumann; Johannes Brahms; and his Danish countrymen, including J.P.E. Hartmann.', is conveyed","convey text of tab panel, 'Peter Erasmus Lange-Müller (1 December 1850 – 26 February 1926) was a Danish composer and pianist. His compositional style was influenced by Danish folk music and by the work of Robert Schumann; Johannes Brahms; and his Danish countrymen, including J.P.E. Hartmann.'",htmlParagraph

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

@@ -1,10 +1,10 @@
 testId,command,settings,assertionExceptions,presentationNumber
-navForwardsToTabListWhereATabIsNotSelected,down down down,virtualCursor,2:nameTabListDanishComposers 2:roleTabList,1
+navForwardsToTabListWhereATabIsNotSelected,down down,virtualCursor,2:nameTabListDanishComposers 2:roleTabList,1
 navForwardsToTabListWhereATabIsNotSelected,f,virtualCursor,,1.1
 navBackwardsToTabListWhereATabIsNotSelected,up up,virtualCursor,2:nameTabListDanishComposers 2:roleTabList,1.2
 navBackwardsToTabListWhereATabIsNotSelected,shift+f,virtualCursor,,1.4
 navForwardsToTabList,tab,virtualCursor,2:interactionModeEnabled,1.5
-navForwardsToTabList,down down down,virtualCursor,2:nameTabListDanishComposers 2:roleTabList,1.6
+navForwardsToTabList,down down,virtualCursor,2:nameTabListDanishComposers 2:roleTabList,1.6
 navForwardsToTabList,f,virtualCursor,,1.7
 navForwardsToTabList,tab,pcCursor,,2
 navBackToTabList,shift+tab,virtualCursor,2:interactionModeEnabled,4
@@ -28,8 +28,8 @@ navToNextTabTabList,f,virtualCursor,,18.2
 navToPreviousTabTablist,up,virtualCursor,,18.3
 navToPreviousTabTablist,shift+f,virtualCursor,,18.4
 navForwardsToTabPanel,down down,virtualCursor,0:tabPanelText,20
-navForwardsToTabPanel,tab,virtualCursor,,20.1
-navForwardsToTabPanel,tab,pcCursor,,20.2
+navForwardsToTabPanel,tab,virtualCursor,3:tabListBoundary,20.1
+navForwardsToTabPanel,tab,pcCursor,3:tabListBoundary,20.2
 navBackToTabPanel,up,virtualCursor,0:tabPanelText,22
 activateTabInTabList,space,virtualCursor,,25
 activateTabInTabList,enter,virtualCursor,,25.1

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

@@ -1,17 +1,23 @@
-// deactivates the first tab in the tab list, and sets focus on the first link
-// Select the first tab and its corresponding panel
+// deactivates the first tab in the tab list, sets focus on the first link, and activates the second tab
+// Select all the necessary elements from the DOM
 const firstTab = document.querySelector('#tab-1');
 const firstPanel = document.querySelector('#tabpanel-1');
-
-// Deactivate the tab and hide the panel if they exist
+const secondTab = document.querySelector('#tab-2');
+const secondPanel = document.querySelector('#tabpanel-2');
+const firstLink = document.querySelector('#beforelink');
+// Deactivate the first tab and hide its associated panel
 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();
+// Activate the second tab and make its panel visible
+if (secondTab && secondPanel) {
+  secondTab.setAttribute('aria-selected', 'true');
+  secondTab.setAttribute('tabindex', '0');
+  secondPanel.classList.remove('is-hidden');
+}
+// Set focus on the first link before the tablist
+if (firstLink) {
+  firstLink.focus();
 }

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

@@ -1,10 +1,10 @@
 testId,command,settings,assertionExceptions,presentationNumber
-navForwardsToTabListWhereATabIsNotSelected,down down,browseMode,2:nameTabListDanishComposers 2:roleTabList,1
+navForwardsToTabListWhereATabIsNotSelected,down,browseMode,2:nameTabListDanishComposers 2:roleTabList,1
 navForwardsToTabListWhereATabIsNotSelected,f,browseMode,,1.1
 navBackwardsToTabListWhereATabIsNotSelected,up,browseMode,2:nameTabListDanishComposers 2:roleTabList,1.2
 navBackwardsToTabListWhereATabIsNotSelected,shift+f,browseMode,,1.3
 navForwardsToTabList,tab,browseMode,2:interactionModeEnabled,1.4
-navForwardsToTabList,down down,browseMode,2:nameTabListDanishComposers 2:roleTabList,1.5
+navForwardsToTabList,down,browseMode,2:nameTabListDanishComposers 2:roleTabList,1.5
 navForwardsToTabList,f,browseMode,,1.6
 navForwardsToTabList,tab,focusMode,,2
 navBackToTabList,shift+tab,browseMode,2:interactionModeEnabled,4
@@ -22,14 +22,12 @@ reqInfoAboutNotSelectedTabTabList,ins+up,focusMode,0:positionTab2 0:numberTabsTa
 activateNextTabTabList,right,focusMode,,11
 activatePrevTabTabList,left,focusMode,,14
 activateFirstTabTabList,home,focusMode,,16
-activateLastTabTabList,end,focusMode,,18
-navToNextTabTabList,down,browseMode,,18
-navToNextTabTabList,f,browseMode,,18.2
-navToPreviousTabTablist,up,browseMode,,18.3
-navToPreviousTabTablist,shift+f,browseMode,,18.4
+activateLastTabTabList,end,focusMode,,17
+navToNextTabTabList,f,browseMode,,18
+navToPreviousTabTablist,shift+f,browseMode,,19
 navForwardsToTabPanel,down,browseMode,0:tabPanelText,20
-navForwardsToTabPanel,tab,browseMode,,20.1
-navForwardsToTabPanel,tab,focusMode,,20.2
+navForwardsToTabPanel,tab,browseMode,3:tabListBoundary,20.1
+navForwardsToTabPanel,tab,focusMode,3:tabListBoundary,20.2
 navBackToTabPanel,up,browseMode,0:tabPanelText,22
 activateTabInTabList,space,browseMode,,25
 activateTabInTabList,enter,browseMode,,25.1

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

@@ -1,7 +1,7 @@
 setupScript,setupScriptDescription
 activateAndSetFocusOnFourthTab,activates and sets focus on the fourth tab
 activateFourthTabAndSetFocusOnTabpanel,"activates the fourth tab in the tab list, and sets focus on the tab panel"
-deactivateFirstTabAndSetFocusBeforeTablist,"deactivates the first tab in the tab list, and sets focus on the first link"
+deactivateFirstTabAndSetFocusBeforeTablist,"deactivates the first tab in the tab list, sets focus on the first link, and activates the second tab"
 setFocusAfterTabpanel,sets focus on a link after the tab panel
 setFocusBeforeTablist,sets focus on a link before the tab list
 setFocusOnFirstTab,sets focus on the first tab

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

@@ -1,16 +1,16 @@
 testId,title,presentationNumber,setupScript,instructions,assertions
-navForwardsToTabListWhereATabIsNotSelected,Navigate forwards into a tab list where a tab is not selected,1,deactivateFirstTabAndSetFocusBeforeTablist,"Starting at the 'Navigate forwards from here' link, Navigate forwards into the 'Danish Composers' tab list.",roleTabList nameTabListDanishComposers roleTab nameTabMariaAhlefeldt stateNotSelected positionTab1 numberTabsTabList4
-navBackwardsToTabListWhereATabIsNotSelected,Navigate backwards into a tab list where a tab is not selected,2,setFocusOnTabPanel,"Starting at the 'Maria Ahlefeldt' tab panel, Navigate to the 'Danish Composers' tab list.",roleTabList nameTabListDanishComposers roleTab nameTabPeterMuller stateNotSelected positionTab4 numberTabsTabList4
-navForwardsToTabList,Navigate forwards into a tab list where a tab is selected,3,setFocusBeforeTablist,"Starting at the 'Navigate forwards from here' link, Navigate forwards into the 'Danish Composers' tab list.",roleTabList nameTabListDanishComposers roleTab nameTabMariaAhlefeldt stateSelected positionTab1 numberTabsTabList4 0:interactionModeEnabled
-navBackToTabList,Navigate backwards into a tab list where a tab is selected,6,activateFourthTabAndSetFocusOnTabpanel,"Starting at the 'Peter Müller' tab panel, Navigate to the 'Danish Composers' tab list.",roleTabList nameTabListDanishComposers roleTab nameTabPeterMuller stateSelected positionTab4 numberTabsTabList4 0:interactionModeEnabled
+navForwardsToTabListWhereATabIsNotSelected,Navigate forwards into a tab list to a tab that is not selected,1,deactivateFirstTabAndSetFocusBeforeTablist,"Starting at the 'Navigate forwards from here' link, Navigate forwards to the 'Maria Ahlefeldt' tab in the 'Danish Composers' tab list.",roleTabList nameTabListDanishComposers roleTab nameTabMariaAhlefeldt stateNotSelected positionTab1 numberTabsTabList4
+navBackwardsToTabListWhereATabIsNotSelected,Navigate backwards into a tab list to a tab that is not selected,2,setFocusOnTabPanel,"Starting at the 'Maria Ahlefeldt' tab panel, Navigate backwards to the 'Peter Müller' tab in the 'Danish Composers' tab list.",roleTabList nameTabListDanishComposers roleTab nameTabPeterMuller stateNotSelected positionTab4 numberTabsTabList4
+navForwardsToTabList,Navigate forwards into a tab list to a tab that is selected,3,setFocusBeforeTablist,"Starting at the 'Navigate forwards from here' link, Navigate forwards to the 'Maria Ahlefeldt' tab in the 'Danish Composers' tab list.",roleTabList nameTabListDanishComposers roleTab nameTabMariaAhlefeldt stateSelected positionTab1 numberTabsTabList4 0:interactionModeEnabled
+navBackToTabList,Navigate backwards into a tab list to a tab that is selected,6,activateFourthTabAndSetFocusOnTabpanel,"Starting at the 'Peter Müller' tab panel, Navigate backwards to the 'Peter Müller' tab in the 'Danish Composers' tab list.",roleTabList nameTabListDanishComposers roleTab nameTabPeterMuller stateSelected positionTab4 numberTabsTabList4 0:interactionModeEnabled
 reqInfoAboutTabTabList,Request information about a selected tab in a tab list ,9,setFocusOnFirstTab,"Starting at the 'Maria Ahlefeldt' tab, read information about the tab.",roleTab nameTabMariaAhlefeldt stateSelected positionTab1 numberTabsTabList4 nameTabListDanishComposers roleTabList
 reqInfoAboutNotSelectedTabTabList,Request information about a not selected tab in a tab list ,10,setFocusOnSecondTab,"Starting at the 'Carl Andersen' tab, read information about the tab.",roleTab nameTabCarlAndersen stateNotSelected positionTab2 numberTabsTabList4 nameTabListDanishComposers roleTabList
 activateNextTabTabList,Activate the next tab in a tab list,12,setFocusOnFirstTab,"Starting at the 'Maria Ahlefeldt' tab, activate the 'Carl Andersen' tab.",roleTab nameTabCarlAndersen stateSelected positionTab2 numberTabsTabList4
 activatePrevTabTabList,Activate the previous tab in a tab list,15,setFocusOnSecondTab,"Starting at the 'Carl Andersen' tab, activate the 'Maria Ahlefeldt' tab.",roleTab nameTabMariaAhlefeldt stateSelected positionTab1 numberTabsTabList4
 activateFirstTabTabList,Activate the first tab in a tab list,17,setFocusOnFourthTab,"Starting at the 'Peter Müller' tab, activate the 'Maria Ahlefeldt' tab.",roleTab nameTabMariaAhlefeldt stateSelected positionTab1 numberTabsTabList4
 activateLastTabTabList,Activate the last tab in a tab list,19,setFocusOnFirstTab,"Starting at the 'Maria Ahlefeldt' tab, activate the 'Peter Müller' tab.",roleTab nameTabPeterMuller stateSelected positionTab4 numberTabsTabList4
 navToNextTabTabList,Navigate to the next tab in a tab list,20,setFocusOnFirstTab,"Starting at the 'Maria Ahlefeldt' tab, navigate to the 'Carl Andersen' tab.",roleTab nameTabCarlAndersen stateNotSelected positionTab2 numberTabsTabList4
-navToPreviousTabTablist,Navigate to the previous tab in a tab list,21,setFocusOnSecondTab,"Starting at the 'Carl Andersen' tab, navigate to the 'Maria Ahlefeldt' tab.",roleTab nameTabMariaAhlefeldt stateNotSelected positionTab1 numberTabsTabList4
-navForwardsToTabPanel,Navigate forwards to a tab panel,22,activateAndSetFocusOnFourthTab,"Starting at the 'Peter Müller' tab, navigate to the tab panel.",roleTabPanel tabPanelNamePeterMuller tabPanelText
-navBackToTabPanel,Navigate backwards to a tab panel,23,setFocusAfterTabpanel,"Starting at the 'Navigate backwards from here' link, navigate to the tab panel.",tabPanelBoundary roleTabPanel tabPanelNamePeterMuller tabPanelText
+navToPreviousTabTablist,Navigate to the previous tab in a tab list,21,setFocusOnSecondTab,"Starting at the 'Carl Andersen' tab, navigate to the 'Maria Ahlefeldt' tab.",roleTab nameTabMariaAhlefeldt stateSelected positionTab1 numberTabsTabList4
+navForwardsToTabPanel,Navigate forwards to a tab panel,22,activateAndSetFocusOnFourthTab,"Starting at the 'Peter Müller' tab, navigate to its tab panel.",tabListBoundary roleTabPanel tabPanelNamePeterMuller tabPanelText
+navBackToTabPanel,Navigate backwards to a tab panel,23,setFocusAfterTabpanel,"Starting at the 'Navigate backwards from here' link, navigate to the 'Peter Müller' tab panel.",1:tabPanelBoundary 3:tabPanelNamePeterMuller tabPanelText
 activateTabInTabList,Activate a tab in a tab list,25,setFocusOnSecondTab,"Starting at the 'Carl Andersen' tab, activate the tab.",stateChangeToSelected

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

@@ -1,10 +1,10 @@
 testId,command,settings,assertionExceptions,presentationNumber
-navForwardsToTabListWhereATabIsNotSelected,ctrl+opt+right ctrl+opt+right ctrl+opt+right,,2:nameTabListDanishComposers 2:roleTabList,1
+navForwardsToTabListWhereATabIsNotSelected,ctrl+opt+right ctrl+opt+right,,2:nameTabListDanishComposers 2:roleTabList,1
 navForwardsToTabListWhereATabIsNotSelected,j,singleQuickKeyNavOn,,1.1
 navBackwardsToTabListWhereATabIsNotSelected,ctrl+opt+left ctrl+opt+left,,2:nameTabListDanishComposers 2:roleTabList,1.3
 navBackwardsToTabListWhereATabIsNotSelected,shift+j,singleQuickKeyNavOn,,1.4
 navForwardsToTabList,tab,,,3
-navForwardsToTabList,ctrl+opt+right ctrl+opt+right ctrl+opt+right,,2:nameTabListDanishComposers 2:roleTabList,3.1
+navForwardsToTabList,ctrl+opt+right ctrl+opt+right,,2:nameTabListDanishComposers 2:roleTabList,3.1
 navForwardsToTabList,j,singleQuickKeyNavOn,,3.2
 navBackToTabList,shift+tab,,,6
 navBackToTabList,ctrl+opt+left ctrl+opt+left,,2:nameTabListDanishComposers 2:roleTabList,6.1
@@ -22,9 +22,8 @@ navToNextTabTabList,j,singleQuickKeyNavOn,,19.2
 navToPreviousTabTablist,ctrl+opt+left,,,19.3
 navToPreviousTabTablist,shift+j,singleQuickKeyNavOn,,19.4
 navForwardsToTabPanel,ctrl+opt+right ctrl+opt+right,,0:tabPanelText,21
-navForwardsToTabPanel,tab,,,21.1
+navForwardsToTabPanel,tab,,3:tabListBoundary,21.1
 navBackToTabPanel,ctrl+opt+left,,0:tabPanelText,23
-navBackToTabPanel,shift+tab,,,25.7
 activateTabInTabList,ctrl+opt+space,,,25.5
 activateTabInTabList,space,,,25.6
 activateTabInTabList,enter,,,25.7

tests/tabs-automatic-activation/reference/2025-6-5_142619/tabs-automatic.activateAndSetFocusOnFourthTab.html

@@ -73,10 +73,10 @@ <h2>About This Example</h2>
           <h2 id="ex_label">Example</h2>
         </div>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
-        <p><a id="beforelink" href="#beforelink">Navigate forwards from here</a></p>
         <div id="ex1">
           <div class="tabs">
             <h3 id="tablist-1">Danish Composers</h3>
+            <p><a id="beforelink" href="#beforelink">Navigate forwards from here</a></p>
             <div role="tablist" aria-labelledby="tablist-1" class="automatic">
               <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
                 <span class="focus">Maria Ahlefeldt</span>

tests/tabs-automatic-activation/reference/2025-6-5_142619/tabs-automatic.activateFourthTabAndSetFocusOnTabpanel.html

@@ -79,10 +79,10 @@ <h2>About This Example</h2>
           <h2 id="ex_label">Example</h2>
         </div>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
-        <p><a id="beforelink" href="#beforelink">Navigate forwards from here</a></p>
         <div id="ex1">
           <div class="tabs">
             <h3 id="tablist-1">Danish Composers</h3>
+            <p><a id="beforelink" href="#beforelink">Navigate forwards from here</a></p>
             <div role="tablist" aria-labelledby="tablist-1" class="automatic">
               <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
                 <span class="focus">Maria Ahlefeldt</span>

tests/tabs-automatic-activation/reference/2025-6-5_142619/tabs-automatic.deactivateFirstTabAndSetFocusBeforeTablist.html

@@ -20,22 +20,28 @@
     (function() {
       function setupScript(testPageDocument) {
         // deactivateFirstTabAndSetFocusBeforeTablist
-        // deactivates the first tab in the tab list, and sets focus on the first link
-        // Select the first tab and its corresponding panel
+        // deactivates the first tab in the tab list, sets focus on the first link, and activates the second tab
+        // Select all the necessary elements from the DOM
         const firstTab = document.querySelector('#tab-1');
         const firstPanel = document.querySelector('#tabpanel-1');
-
-        // Deactivate the tab and hide the panel if they exist
+        const secondTab = document.querySelector('#tab-2');
+        const secondPanel = document.querySelector('#tabpanel-2');
+        const firstLink = document.querySelector('#beforelink');
+        // Deactivate the first tab and hide its associated panel
         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();
+        // Activate the second tab and make its panel visible
+        if (secondTab && secondPanel) {
+          secondTab.setAttribute('aria-selected', 'true');
+          secondTab.setAttribute('tabindex', '0');
+          secondPanel.classList.remove('is-hidden');
+        }
+        // Set focus on the first link before the tablist
+        if (firstLink) {
+          firstLink.focus();
         }
 
       };
@@ -72,10 +78,10 @@ <h2>About This Example</h2>
           <h2 id="ex_label">Example</h2>
         </div>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
-        <p><a id="beforelink" href="#beforelink">Navigate forwards from here</a></p>
         <div id="ex1">
           <div class="tabs">
             <h3 id="tablist-1">Danish Composers</h3>
+            <p><a id="beforelink" href="#beforelink">Navigate forwards from here</a></p>
             <div role="tablist" aria-labelledby="tablist-1" class="automatic">
               <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
                 <span class="focus">Maria Ahlefeldt</span>

tests/tabs-automatic-activation/reference/2025-6-5_142619/tabs-automatic.html

@@ -39,10 +39,10 @@ <h2>About This Example</h2>
           <h2 id="ex_label">Example</h2>
         </div>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
-        <p><a id="beforelink" href="#beforelink">Navigate forwards from here</a></p>
         <div id="ex1">
           <div class="tabs">
             <h3 id="tablist-1">Danish Composers</h3>
+            <p><a id="beforelink" href="#beforelink">Navigate forwards from here</a></p>
             <div role="tablist" aria-labelledby="tablist-1" class="automatic">
               <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
                 <span class="focus">Maria Ahlefeldt</span>

tests/tabs-automatic-activation/reference/2025-6-5_142619/tabs-automatic.setFocusAfterTabpanel.html

@@ -60,10 +60,10 @@ <h2>About This Example</h2>
           <h2 id="ex_label">Example</h2>
         </div>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
-        <p><a id="beforelink" href="#beforelink">Navigate forwards from here</a></p>
         <div id="ex1">
           <div class="tabs">
             <h3 id="tablist-1">Danish Composers</h3>
+            <p><a id="beforelink" href="#beforelink">Navigate forwards from here</a></p>
             <div role="tablist" aria-labelledby="tablist-1" class="automatic">
               <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
                 <span class="focus">Maria Ahlefeldt</span>