Test plan for the Switch Example Using HTML Button

tests/switch-button/data/assertions.csv

@@ -0,0 +1,7 @@
+assertionId,priority,assertionStatement,assertionPhrase,refIds
+nameLivingRoomLights,1,Name 'Living Room Lights' is conveyed,convey name 'Living Room Lights',switch
+roleSwitch,1,Role 'switch' is conveyed,convey role 'switch',switch button
+stateChangeToOff,1,"Change in state, to 'off', is conveyed","convey change in state, to 'off'",aria-checked
+stateChangeToOn,1,"Change in state, to 'on', is conveyed","convey change in state, to 'on'",aria-checked
+stateOff,1,State 'off' is conveyed,convey state 'off',aria-checked
+stateOn,1,State 'on' is conveyed,convey state 'on',aria-checked

tests/switch-button/data/jaws-commands.csv

@@ -0,0 +1,37 @@
+testId,command,settings,assertionExceptions,presentationNumber
+navForwardsToSwitchOffState,b,virtualCursor,,1
+navForwardsToSwitchOffState,f,virtualCursor,,1.1
+navForwardsToSwitchOffState,down,virtualCursor,,1.2
+navForwardsToSwitchOffState,tab,virtualCursor,,1.3
+navForwardsToSwitchOffState,tab,pcCursor,,2
+navBackToSwitchOffState,shift+b,virtualCursor,,4
+navBackToSwitchOffState,shift+f,virtualCursor,,4.1
+navBackToSwitchOffState,up,virtualCursor,,4.2
+navBackToSwitchOffState,shift+tab,virtualCursor,,4.3
+navBackToSwitchOffState,shift+tab,pcCursor,,5
+navForwardsToSwitchOnState,b,virtualCursor,,7
+navForwardsToSwitchOnState,f,virtualCursor,,7.1
+navForwardsToSwitchOnState,down,virtualCursor,,7.2
+navForwardsToSwitchOnState,tab,virtualCursor,,7.3
+navForwardsToSwitchOnState,tab,pcCursor,,8
+navBackToSwitchOnState,shift+b,virtualCursor,,10
+navBackToSwitchOnState,shift+f,virtualCursor,,10.1
+navBackToSwitchOnState,up,virtualCursor,,10.2
+navBackToSwitchOnState,shift+tab,virtualCursor,,10.3
+navBackToSwitchOnState,shift+tab,pcCursor,,11
+reqInfoAboutSwitchOffState,ins+tab,virtualCursor,,13
+reqInfoAboutSwitchOffState,ins+up,virtualCursor,,13.1
+reqInfoAboutSwitchOffState,ins+tab,pcCursor,,14
+reqInfoAboutSwitchOffState,ins+up,pcCursor,,14.1
+reqInfoAboutSwitchOnState,ins+tab,virtualCursor,,16
+reqInfoAboutSwitchOnState,ins+up,virtualCursor,,16.1
+reqInfoAboutSwitchOnState,ins+tab,pcCursor,,17
+reqInfoAboutSwitchOnState,ins+up,pcCursor,,17.1
+operateSwitchOffState,space,virtualCursor,,19
+operateSwitchOffState,enter,virtualCursor,,19.1
+operateSwitchOffState,space,pcCursor,,20
+operateSwitchOffState,enter,pcCursor,,20.1
+operateSwitchOnState,space,virtualCursor,,22
+operateSwitchOnState,enter,virtualCursor,,22.1
+operateSwitchOnState,space,pcCursor,,23
+operateSwitchOnState,enter,pcCursor,,23.1

tests/switch-button/data/js/setFocusAfterAndTurnOnSwitch.js

@@ -0,0 +1,3 @@
+// sets focus on a link after the switch, and sets the switch state to 'on'
+testPageDocument.querySelector('[role="switch"]').setAttribute('aria-checked', 'true');
+testPageDocument.getElementById('afterlink').focus();

tests/switch-button/data/js/setFocusAfterSwitch.js

@@ -0,0 +1,2 @@
+// sets focus on a link after the switch
+testPageDocument.getElementById('afterlink').focus();

tests/switch-button/data/js/setFocusBeforeAndTurnOnSwitch.js

@@ -0,0 +1,3 @@
+// sets focus on a link before the switch, and sets the state of the switch to 'on'
+testPageDocument.querySelector('[role="switch"]').setAttribute('aria-checked', 'true');
+testPageDocument.getElementById('beforelink').focus();

tests/switch-button/data/js/setFocusBeforeSwitch.js

@@ -0,0 +1,2 @@
+// sets focus on a link before the switch
+testPageDocument.getElementById('beforelink').focus();

tests/switch-button/data/js/setFocusOnAndTurnOnSwitch.js

@@ -0,0 +1,3 @@
+// sets focus on the 'Notifications' switch, and sets its state to 'on'
+testPageDocument.querySelector('[role="switch"]').setAttribute('aria-checked', 'true');
+testPageDocument.querySelector('[role="switch"]').focus();

tests/switch-button/data/js/setFocusOnSwitch.js

@@ -0,0 +1,2 @@
+// sets focus on the 'Notifications' switch
+testPageDocument.querySelector('[role="switch"]').focus();

tests/switch-button/data/nvda-commands.csv

@@ -0,0 +1,37 @@
+testId,command,settings,assertionExceptions,presentationNumber
+navForwardsToSwitchOffState,b,browseMode,,1
+navForwardsToSwitchOffState,f,browseMode,,1.1
+navForwardsToSwitchOffState,down,browseMode,,1.2
+navForwardsToSwitchOffState,tab,browseMode,,1.3
+navForwardsToSwitchOffState,tab,focusMode,,2
+navBackToSwitchOffState,shift+b,browseMode,,4
+navBackToSwitchOffState,shift+f,browseMode,,4.1
+navBackToSwitchOffState,up,browseMode,,4.2
+navBackToSwitchOffState,shift+tab,browseMode,,4.3
+navBackToSwitchOffState,shift+tab,focusMode,,5
+navForwardsToSwitchOnState,b,browseMode,,7
+navForwardsToSwitchOnState,f,browseMode,,7.1
+navForwardsToSwitchOnState,down,browseMode,,7.2
+navForwardsToSwitchOnState,tab,browseMode,,7.3
+navForwardsToSwitchOnState,tab,focusMode,,8
+navBackToSwitchOnState,shift+f,browseMode,,10.1
+navBackToSwitchOnState,shift+b,browseMode,,10
+navBackToSwitchOnState,up,browseMode,,10.2
+navBackToSwitchOnState,shift+tab,browseMode,,10.3
+navBackToSwitchOnState,shift+tab,focusMode,,11
+reqInfoAboutSwitchOffState,ins+tab,browseMode,,13
+reqInfoAboutSwitchOffState,ins+up,browseMode,,13.1
+reqInfoAboutSwitchOffState,ins+tab,focusMode,,14
+reqInfoAboutSwitchOffState,ins+up,focusMode,,14.1
+reqInfoAboutSwitchOnState,ins+tab,browseMode,,16
+reqInfoAboutSwitchOnState,ins+up,browseMode,,16.1
+reqInfoAboutSwitchOnState,ins+tab,focusMode,,17
+reqInfoAboutSwitchOnState,ins+up,focusMode,,17.1
+operateSwitchOffState,space,browseMode,,19
+operateSwitchOffState,enter,browseMode,,19.1
+operateSwitchOffState,space,focusMode,,20
+operateSwitchOffState,enter,focusMode,,20.1
+operateSwitchOnState,space,browseMode,,22
+operateSwitchOnState,enter,browseMode,,22.1
+operateSwitchOnState,space,focusMode,,23
+operateSwitchOnState,enter,focusMode,,23.1

tests/switch-button/data/references.csv

@@ -0,0 +1,10 @@
+refId,type,value,linkText
+author,metadata,Isabel Del Castillo,
+authorEmail,metadata,[email protected],
+title,metadata,Switch Example Using HTML Button,
+reference,metadata,reference/2025-8-22_17848/switch-button.html,Test Case Page for Switch Example
+designPattern,metadata,https://www.w3.org/WAI/ARIA/apg/patterns/switch/,APG Pattern: Switch
+example,metadata,https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch-button/,APG Example: Switch Using HTML Button
+aria-checked,aria,aria-checked,aria-checked
+switch,aria,switch,switch
+button,htmlAam,button,button

tests/switch-button/data/scripts.csv

@@ -0,0 +1,7 @@
+setupScript,setupScriptDescription
+setFocusAfterAndTurnOnSwitch,"sets focus on a link after the switch, and sets the switch state to 'on'"
+setFocusAfterSwitch,sets focus on a link after the switch
+setFocusBeforeAndTurnOnSwitch,"sets focus on a link before the switch, and sets the state of the switch to 'on'"
+setFocusBeforeSwitch,sets focus on a link before the switch
+setFocusOnAndTurnOnSwitch,"sets focus on the 'Notifications' switch, and sets its state to 'on'"
+setFocusOnSwitch,sets focus on the 'Notifications' switch

tests/switch-button/data/tests.csv

@@ -0,0 +1,9 @@
+testId,title,presentationNumber,setupScript,instructions,assertions
+navForwardsToSwitchOffState,Navigate forwards to a switch that is off,3,setFocusBeforeSwitch,"Starting at the 'Navigate forwards from here' link, navigate to the 'Living Room Lights' switch.",roleSwitch nameLivingRoomLights stateOff
+navBackToSwitchOffState,Navigate backwards to a switch that is off,6,setFocusAfterSwitch,"Starting at the 'Navigate backwards from here' link, navigate to the 'Living Room Lights' switch.",roleSwitch nameLivingRoomLights stateOff
+navForwardsToSwitchOnState,Navigate forwards to a switch that is on,9,setFocusBeforeAndTurnOnSwitch,"Starting at the 'Navigate forwards from here' link, navigate to the 'Living Room Lights' switch.",roleSwitch nameLivingRoomLights stateOn
+navBackToSwitchOnState,Navigate backwards to a switch that is on,12,setFocusAfterAndTurnOnSwitch,"Starting at the 'Navigate backwards from here' link, navigate to the 'Living Room Lights' switch.",roleSwitch nameLivingRoomLights stateOn
+reqInfoAboutSwitchOffState,Request information about a switch that is off,15,setFocusOnSwitch,"Starting at the 'Living Room Lights' switch, read information about the switch.",roleSwitch nameLivingRoomLights stateOff
+reqInfoAboutSwitchOnState,Request information about a switch that is on,18,setFocusOnAndTurnOnSwitch,"Starting at the 'Living Room Lights' switch, read information about the switch.",roleSwitch nameLivingRoomLights stateOn
+operateSwitchOffState,Operate a switch that is off,21,setFocusOnSwitch,"Starting at the 'Living Room Lights' switch, change its state to 'on'.",stateChangeToOn
+operateSwitchOnState,Operate a switch that is on,24,setFocusOnAndTurnOnSwitch,"Starting at the 'Living Room Lights' switch, change its state to 'off'.",stateChangeToOff

tests/switch-button/data/voiceover_macos-commands.csv

@@ -0,0 +1,27 @@
+testId,command,settings,assertionExceptions,presentationNumber
+navForwardsToSwitchOffState,ctrl+opt+right,,,3.0
+navForwardsToSwitchOffState,tab,,,3.1
+navForwardsToSwitchOffState,j,singleQuickKeyNavOn,,3.2
+navForwardsToSwitchOffState,b,singleQuickKeyNavOn,,3.3
+navBackToSwitchOffState,ctrl+opt+left,,,6.0
+navBackToSwitchOffState,shift+tab,,,6.1
+navBackToSwitchOffState,shift+j,singleQuickKeyNavOn,,6.2
+navBackToSwitchOffState,shift+b,singleQuickKeyNavOn,,6.3
+navForwardsToSwitchOnState,ctrl+opt+right,,,9.0
+navForwardsToSwitchOnState,tab,,,9.1
+navForwardsToSwitchOnState,j,singleQuickKeyNavOn,,9.2
+navForwardsToSwitchOnState,b,singleQuickKeyNavOn,,9.3
+navBackToSwitchOnState,ctrl+opt+left,,,12.0
+navBackToSwitchOnState,shift+tab,,,12.1
+navBackToSwitchOnState,shift+j,singleQuickKeyNavOn,,12.2
+navBackToSwitchOnState,shift+b,singleQuickKeyNavOn,,12.3
+reqInfoAboutSwitchOffState,ctrl+opt+f3,,,15.0
+reqInfoAboutSwitchOffState,ctrl+opt+f4,,,15.1
+reqInfoAboutSwitchOnState,ctrl+opt+f3,,,18.0
+reqInfoAboutSwitchOnState,ctrl+opt+f4,,,18.1
+operateSwitchOffState,ctrl+opt+space,,,21.0
+operateSwitchOffState,space,,,21.1
+operateSwitchOffState,enter,,,21.2
+operateSwitchOnState,ctrl+opt+space,,,24.0
+operateSwitchOnState,space,,,24.1
+operateSwitchOnState,enter,,,24.2

tests/switch-button/reference/2025-8-22_17848/css/switch-button.css

@@ -0,0 +1,86 @@
+button[role="switch"] {
+  display: block;
+  margin: 2px;
+  padding: 4px 4px 8px 8px;
+  border: 0 solid #005a9c;
+  border-radius: 5px;
+  width: 17em;
+  height: 3em;
+  text-align: left;
+  background-color: white;
+  color: black;
+}
+
+button[role="switch"] .label {
+  position: relative;
+  top: -3px;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  width: 10em;
+  vertical-align: middle;
+  color: black;
+}
+
+button[role="switch"] svg {
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  forced-color-adjust: auto;
+  position: relative;
+  top: 4px;
+}
+
+button[role="switch"] svg rect {
+  fill-opacity: 0;
+  stroke-width: 2;
+  stroke: currentcolor;
+}
+
+button[role="switch"] svg rect.off {
+  display: block;
+  stroke: currentcolor;
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+button[role="switch"][aria-checked="true"] svg rect.off {
+  display: none;
+}
+
+button[role="switch"] svg rect.on {
+  display: none;
+}
+
+button[role="switch"][aria-checked="true"] svg rect.on {
+  color: green;
+  display: block;
+  stroke-color: currentcolor;
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+button[role="switch"] span.off {
+  display: inline-block;
+}
+
+button[role="switch"] span.on {
+  display: none;
+}
+
+button[role="switch"][aria-checked="true"] span.off {
+  display: none;
+}
+
+button[role="switch"][aria-checked="true"] span.on {
+  display: inline-block;
+}
+
+button[role="switch"]:focus,
+button[role="switch"]:hover {
+  padding: 2px 2px 6px 6px;
+  border-width: 2px;
+  outline: none;
+  background-color: #def;
+  cursor: pointer;
+}

tests/switch-button/reference/2025-8-22_17848/css/switch-checkbox.css

@@ -0,0 +1,83 @@
+fieldset {
+  width: 22em;
+}
+
+legend {
+  font-size: 110%;
+}
+
+label {
+  display: block;
+  margin: 0.5em;
+  padding: 4px 4px 6px 6px;
+  border: 0 solid #005a9c;
+  border-radius: 5px;
+  width: 16em;
+}
+
+label .label {
+  display: inline-block;
+  width: 9em;
+  user-select: none;
+}
+
+label input[role="switch"] {
+  opacity: 0;
+}
+
+label input[role="switch"] ~ .state {
+  display: inline-block;
+  user-select: none;
+}
+
+label input[role="switch"] ~ .state > .container {
+  position: relative;
+  top: 2px;
+  display: inline-block;
+  border: 2px solid black;
+  width: 40px;
+  height: 20px;
+  border-radius: 11px;
+}
+
+label input[role="switch"] ~ .state > .container > .position {
+  position: relative;
+  top: 1px;
+  left: 2px;
+  display: inline-block;
+  border: 2px solid black;
+  border-radius: 9px;
+  width: 14px;
+  height: 14px;
+  background: black;
+  opacity: 0.6;
+}
+
+label input[role="switch"]:not(:checked) ~ .state span.on {
+  display: none;
+}
+
+label input[role="switch"]:checked ~ .state > span.off {
+  display: none;
+}
+
+label input[role="switch"]:checked ~ .state > .container > .position {
+  left: 20px;
+  border-color: green;
+  background: green;
+  opacity: 1;
+}
+
+label.focus,
+label:hover {
+  padding: 2px 2px 4px 4px;
+  border-width: 2px;
+  outline: none;
+  background-color: #def;
+  cursor: pointer;
+}
+
+label.focus span.container,
+label:hover span.container {
+  background-color: white;
+}