diff --git a/tests/switch-checkbox/data/assertions.csv b/tests/switch-checkbox/data/assertions.csv new file mode 100644 index 000000000..d38e059db --- /dev/null +++ b/tests/switch-checkbox/data/assertions.csv @@ -0,0 +1,7 @@ +assertionId,priority,assertionStatement,assertionPhrase,refIds +nameReducedMotion,1,Name 'Reduced motion ' is conveyed,convey name 'Reduced motion',inputTypeCheckbox label +roleSwitch,1,Role 'switch' is conveyed,convey role 'switch',switch inputTypeCheckbox +stateChangeToOff,1,"Change in state, to 'off', is conveyed","convey change in state, to 'off'",@checked +stateChangeToOn,1,"Change in state, to 'on', is conveyed","convey change in state, to 'on'",@checked +stateOff,1,State 'off' is conveyed,convey state 'off',@checked +stateOn,1,State 'on' is conveyed,convey state 'on',@checked diff --git a/tests/switch-checkbox/data/jaws-commands.csv b/tests/switch-checkbox/data/jaws-commands.csv new file mode 100644 index 000000000..75e54c324 --- /dev/null +++ b/tests/switch-checkbox/data/jaws-commands.csv @@ -0,0 +1,33 @@ +testId,command,settings,assertionExceptions,presentationNumber +navForwardsToSwitchOffState,f,virtualCursor,,1.1 +navForwardsToSwitchOffState,down down,virtualCursor,,1.2 +navForwardsToSwitchOffState,tab,virtualCursor,,1.3 +navForwardsToSwitchOffState,tab,pcCursor,,2 +navBackToSwitchOffState,shift+f,virtualCursor,,4.1 +navBackToSwitchOffState,up,virtualCursor,,4.2 +navBackToSwitchOffState,shift+tab,virtualCursor,,4.3 +navBackToSwitchOffState,shift+tab,pcCursor,,5 +navForwardsToSwitchOnState,f,virtualCursor,,7.1 +navForwardsToSwitchOnState,down down,virtualCursor,,7.2 +navForwardsToSwitchOnState,tab,virtualCursor,,7.3 +navForwardsToSwitchOnState,tab,pcCursor,,8 +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 diff --git a/tests/switch-checkbox/data/js/setFocusAfterAndTurnOnSwitch.js b/tests/switch-checkbox/data/js/setFocusAfterAndTurnOnSwitch.js new file mode 100644 index 000000000..800b258a8 --- /dev/null +++ b/tests/switch-checkbox/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('checked', 'true'); +testPageDocument.getElementById('afterlink').focus(); diff --git a/tests/switch-checkbox/data/js/setFocusAfterSwitch.js b/tests/switch-checkbox/data/js/setFocusAfterSwitch.js new file mode 100644 index 000000000..3f48afaa1 --- /dev/null +++ b/tests/switch-checkbox/data/js/setFocusAfterSwitch.js @@ -0,0 +1,2 @@ +// sets focus on a link after the switch +testPageDocument.getElementById('afterlink').focus(); diff --git a/tests/switch-checkbox/data/js/setFocusBeforeAndTurnOnSwitch.js b/tests/switch-checkbox/data/js/setFocusBeforeAndTurnOnSwitch.js new file mode 100644 index 000000000..af2a195fc --- /dev/null +++ b/tests/switch-checkbox/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('checked', 'true'); +testPageDocument.getElementById('beforelink').focus(); diff --git a/tests/switch-checkbox/data/js/setFocusBeforeSwitch.js b/tests/switch-checkbox/data/js/setFocusBeforeSwitch.js new file mode 100644 index 000000000..e0a773ee6 --- /dev/null +++ b/tests/switch-checkbox/data/js/setFocusBeforeSwitch.js @@ -0,0 +1,2 @@ +// sets focus on a link before the switch +testPageDocument.getElementById('beforelink').focus(); diff --git a/tests/switch-checkbox/data/js/setFocusOnAndTurnOnSwitch.js b/tests/switch-checkbox/data/js/setFocusOnAndTurnOnSwitch.js new file mode 100644 index 000000000..0423cf511 --- /dev/null +++ b/tests/switch-checkbox/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('checked', 'true'); +testPageDocument.querySelector('[role="switch"]').focus(); diff --git a/tests/switch-checkbox/data/js/setFocusOnSwitch.js b/tests/switch-checkbox/data/js/setFocusOnSwitch.js new file mode 100644 index 000000000..2f6aaa6f7 --- /dev/null +++ b/tests/switch-checkbox/data/js/setFocusOnSwitch.js @@ -0,0 +1,2 @@ +// sets focus on the 'Notifications' switch +testPageDocument.querySelector('[role="switch"]').focus(); diff --git a/tests/switch-checkbox/data/nvda-commands.csv b/tests/switch-checkbox/data/nvda-commands.csv new file mode 100644 index 000000000..a24b7ef1d --- /dev/null +++ b/tests/switch-checkbox/data/nvda-commands.csv @@ -0,0 +1,33 @@ +testId,command,settings,assertionExceptions,presentationNumber +navForwardsToSwitchOffState,f,browseMode,,1.1 +navForwardsToSwitchOffState,down,browseMode,,1.2 +navForwardsToSwitchOffState,tab,browseMode,,1.3 +navForwardsToSwitchOffState,tab,focusMode,,2 +navBackToSwitchOffState,shift+f,browseMode,,4.1 +navBackToSwitchOffState,up,browseMode,,4.2 +navBackToSwitchOffState,shift+tab,browseMode,,4.3 +navBackToSwitchOffState,shift+tab,focusMode,,5 +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,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 diff --git a/tests/switch-checkbox/data/references.csv b/tests/switch-checkbox/data/references.csv new file mode 100644 index 000000000..ff75632f1 --- /dev/null +++ b/tests/switch-checkbox/data/references.csv @@ -0,0 +1,11 @@ +refId,type,value,linkText +author,metadata,Isabel Del Castillo, +authorEmail,metadata,isa.delcastillo5@gmail.com, +title,metadata,Switch Example Using HTML Checkbox Input, +reference,metadata,reference/2025-8-25_124251/switch-checkbox.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-checkbox/,APG Example: Switch Using HTML Checkbox Input +switch,aria,switch,switch +inputTypeCheckbox,htmlAam,inputTypeCheckbox,inputTypeCheckbox +label,htmlAam,label,HTML label +@checked,htmlAam,@checked,@checked diff --git a/tests/switch-checkbox/data/scripts.csv b/tests/switch-checkbox/data/scripts.csv new file mode 100644 index 000000000..c64a9c169 --- /dev/null +++ b/tests/switch-checkbox/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 diff --git a/tests/switch-checkbox/data/tests.csv b/tests/switch-checkbox/data/tests.csv new file mode 100644 index 000000000..ba8ba3752 --- /dev/null +++ b/tests/switch-checkbox/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 'Reduced motion' switch.",roleSwitch nameReducedMotion stateOff +navBackToSwitchOffState,Navigate backwards to a switch that is off,6,setFocusAfterSwitch,"Starting at the 'Navigate backwards from here' link, navigate to the 'Reduced motion' switch.",roleSwitch nameReducedMotion stateOff +navForwardsToSwitchOnState,Navigate forwards to a switch that is on,9,setFocusBeforeAndTurnOnSwitch,"Starting at the 'Navigate forwards from here' link, navigate to the 'Reduced motion' switch.",roleSwitch nameReducedMotion stateOn +navBackToSwitchOnState,Navigate backwards to a switch that is on,12,setFocusAfterAndTurnOnSwitch,"Starting at the 'Navigate backwards from here' link, navigate to the 'Reduced motion' switch.",roleSwitch nameReducedMotion stateOn +reqInfoAboutSwitchOffState,Request information about a switch that is off,15,setFocusOnSwitch,"Starting at the 'Reduced motion' switch, read information about the switch.",roleSwitch nameReducedMotion stateOff +reqInfoAboutSwitchOnState,Request information about a switch that is on,18,setFocusOnAndTurnOnSwitch,"Starting at the 'Reduced motion' switch, read information about the switch.",roleSwitch nameReducedMotion stateOn +operateSwitchOffState,Operate a switch that is off,21,setFocusOnSwitch,"Starting at the 'Reduced motion' switch, change its state to 'on'.",stateChangeToOn +operateSwitchOnState,Operate a switch that is on,24,setFocusOnAndTurnOnSwitch,"Starting at the 'Reduced motion' switch, change its state to 'off'.",stateChangeToOff diff --git a/tests/switch-checkbox/data/voiceover_macos-commands.csv b/tests/switch-checkbox/data/voiceover_macos-commands.csv new file mode 100644 index 000000000..c0d379e29 --- /dev/null +++ b/tests/switch-checkbox/data/voiceover_macos-commands.csv @@ -0,0 +1,23 @@ +testId,command,settings,assertionExceptions,presentationNumber +navForwardsToSwitchOffState,ctrl+opt+right ctrl+opt+right,,,3 +navForwardsToSwitchOffState,tab,,,3.1 +navForwardsToSwitchOffState,j,singleQuickKeyNavOn,,3.2 +navBackToSwitchOffState,ctrl+opt+left,,,6 +navBackToSwitchOffState,shift+tab,,,6.1 +navBackToSwitchOffState,shift+j,singleQuickKeyNavOn,,6.2 +navForwardsToSwitchOnState,ctrl+opt+right ctrl+opt+right,,,9 +navForwardsToSwitchOnState,tab,,,9.1 +navForwardsToSwitchOnState,j,singleQuickKeyNavOn,,9.2 +navBackToSwitchOnState,ctrl+opt+left,,,12 +navBackToSwitchOnState,shift+tab,,,12.1 +navBackToSwitchOnState,shift+j,singleQuickKeyNavOn,,12.2 +reqInfoAboutSwitchOffState,ctrl+opt+f3,,,15 +reqInfoAboutSwitchOffState,ctrl+opt+f4,,,15.1 +reqInfoAboutSwitchOnState,ctrl+opt+f3,,,18 +reqInfoAboutSwitchOnState,ctrl+opt+f4,,,18.1 +operateSwitchOffState,ctrl+opt+space,,,21 +operateSwitchOffState,space,,,21.1 +operateSwitchOffState,enter,,,21.2 +operateSwitchOnState,ctrl+opt+space,,,24 +operateSwitchOnState,space,,,24.1 +operateSwitchOnState,enter,,,24.2 diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/css/switch-button.css b/tests/switch-checkbox/reference/2025-8-25_124251/css/switch-button.css new file mode 100644 index 000000000..0ae51f4da --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/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; +} diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/css/switch-checkbox.css b/tests/switch-checkbox/reference/2025-8-25_124251/css/switch-checkbox.css new file mode 100644 index 000000000..3a7e6d1d1 --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/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; +} diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/css/switch.css b/tests/switch-checkbox/reference/2025-8-25_124251/css/switch.css new file mode 100644 index 000000000..0f5f75739 --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/css/switch.css @@ -0,0 +1,70 @@ +[role="switch"] { + margin: 2px; + padding: 4px 4px 8px 8px; + border: 0 solid #005a9c; + border-radius: 5px; + width: 15em; + user-select: none; +} + +[role="switch"] .label { + display: inline-block; + width: 8em; +} + +[role="switch"] .switch { + position: relative; + display: inline-block; + top: 6px; + border: 2px solid black; + border-radius: 12px; + height: 20px; + width: 40px; +} + +[role="switch"] .switch span { + position: absolute; + top: 2px; + left: 2px; + display: inline-block; + border: 2px solid black; + border-radius: 8px; + height: 12px; + width: 12px; + background: black; +} + +[role="switch"][aria-checked="true"] .switch span { + left: 21px; + background: green; + border-color: green; +} + +[role="switch"] .on { + display: none; +} + +[role="switch"] .off { + display: inline; +} + +[role="switch"][aria-checked="true"] .on { + display: inline; +} + +[role="switch"][aria-checked="true"] .off { + display: none; +} + +[role="switch"]:focus, +[role="switch"]:hover { + padding: 2px 2px 6px 6px; + border-width: 2px; + outline: none; + background-color: #def; + cursor: pointer; +} + +[role="switch"]:focus span.switch { + background-color: white; +} diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/js/switch-button.js b/tests/switch-checkbox/reference/2025-8-25_124251/js/switch-button.js new file mode 100644 index 000000000..3bdb03085 --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/js/switch-button.js @@ -0,0 +1,41 @@ +/* + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: switch.js + * + * Desc: Switch widget that implements ARIA Authoring Practices + */ + +'use strict'; + +class ButtonSwitch { + constructor(domNode) { + this.switchNode = domNode; + this.switchNode.addEventListener('click', () => this.toggleStatus()); + + // Set background color for the SVG container Rect + var color = getComputedStyle(this.switchNode).getPropertyValue( + 'background-color' + ); + var containerNode = this.switchNode.querySelector('rect.container'); + containerNode.setAttribute('fill', color); + } + + // Switch state of a switch + toggleStatus() { + const currentState = + this.switchNode.getAttribute('aria-checked') === 'true'; + const newState = String(!currentState); + + this.switchNode.setAttribute('aria-checked', newState); + } +} + +// Initialize switches +window.addEventListener('load', function () { + // Initialize the Switch component on all matching DOM nodes + Array.from(document.querySelectorAll('button[role^=switch]')).forEach( + (element) => new ButtonSwitch(element) + ); +}); diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/js/switch-checkbox.js b/tests/switch-checkbox/reference/2025-8-25_124251/js/switch-checkbox.js new file mode 100644 index 000000000..7c6a88b0b --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/js/switch-checkbox.js @@ -0,0 +1,34 @@ +/* + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: switch-checkbox.js + * + * Desc: Switch widget using input[type=checkbox] that implements ARIA Authoring Practices + */ + +'use strict'; + +class CheckboxSwitch { + constructor(domNode) { + this.switchNode = domNode; + this.switchNode.addEventListener('focus', () => this.onFocus(event)); + this.switchNode.addEventListener('blur', () => this.onBlur(event)); + } + + onFocus(event) { + event.currentTarget.parentNode.classList.add('focus'); + } + + onBlur(event) { + event.currentTarget.parentNode.classList.remove('focus'); + } +} + +// Initialize switches +window.addEventListener('load', function () { + // Initialize the Switch component on all matching DOM nodes + Array.from( + document.querySelectorAll('input[type=checkbox][role^=switch]') + ).forEach((element) => new CheckboxSwitch(element)); +}); diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/js/switch.js b/tests/switch-checkbox/reference/2025-8-25_124251/js/switch.js new file mode 100644 index 000000000..42c6c4df7 --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/js/switch.js @@ -0,0 +1,45 @@ +/* + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: switch.js + * + * Desc: Switch widget that implements ARIA Authoring Practices + */ + +'use strict'; + +class Switch { + constructor(domNode) { + this.switchNode = domNode; + this.switchNode.addEventListener('click', () => this.toggleStatus()); + this.switchNode.addEventListener('keydown', (event) => + this.handleKeydown(event) + ); + } + + handleKeydown(event) { + // Only do something when space or return is pressed + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + this.toggleStatus(); + } + } + + // Switch state of a switch + toggleStatus() { + const currentState = + this.switchNode.getAttribute('aria-checked') === 'true'; + const newState = String(!currentState); + + this.switchNode.setAttribute('aria-checked', newState); + } +} + +// Initialize switches +window.addEventListener('load', function () { + // Initialize the Switch component on all matching DOM nodes + Array.from(document.querySelectorAll('[role^=switch]')).forEach( + (element) => new Switch(element) + ); +}); diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.html b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.html new file mode 100644 index 000000000..952666b55 --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.html @@ -0,0 +1,69 @@ + + + + + + Switch Example Using HTML Checkbox Input + + + + + + + + + + + + + + +
+

Switch Example Using HTML Checkbox Input

+ +
+

About This Example

+ +

+ This example illustrates implementing the Switch Pattern with an HTML input[type="checkbox"] as the switch element and using CSS borders to provide graphical rendering of switch states. + It also demonstrates using the HTML fieldset and legend elements to present multiple switches in a labeled group. +

+
+
+

Example

+
+ +
+
+ Accessibility Preferences + Navigate forwards from here + + Navigate backwards from here + +
+
+ +
+
+ + diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusAfterAndTurnOnSwitch.html b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusAfterAndTurnOnSwitch.html new file mode 100644 index 000000000..6029e4682 --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusAfterAndTurnOnSwitch.html @@ -0,0 +1,93 @@ + + + + + + Switch Example Using HTML Checkbox Input + + + + + + + + + + + + + + + + + +
+

Switch Example Using HTML Checkbox Input

+ +
+

About This Example

+ +

+ This example illustrates implementing the Switch Pattern with an HTML input[type="checkbox"] as the switch element and using CSS borders to provide graphical rendering of switch states. + It also demonstrates using the HTML fieldset and legend elements to present multiple switches in a labeled group. +

+
+
+

Example

+
+ +
+
+ Accessibility Preferences + Navigate forwards from here + + Navigate backwards from here + +
+
+ +
+ + +
+ +
+
+ + diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusAfterSwitch.html b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusAfterSwitch.html new file mode 100644 index 000000000..9f3b80d8e --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusAfterSwitch.html @@ -0,0 +1,92 @@ + + + + + + Switch Example Using HTML Checkbox Input + + + + + + + + + + + + + + + + + +
+

Switch Example Using HTML Checkbox Input

+ +
+

About This Example

+ +

+ This example illustrates implementing the Switch Pattern with an HTML input[type="checkbox"] as the switch element and using CSS borders to provide graphical rendering of switch states. + It also demonstrates using the HTML fieldset and legend elements to present multiple switches in a labeled group. +

+
+
+

Example

+
+ +
+
+ Accessibility Preferences + Navigate forwards from here + + Navigate backwards from here + +
+
+ +
+ + +
+ +
+
+ + diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusBeforeAndTurnOnSwitch.html b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusBeforeAndTurnOnSwitch.html new file mode 100644 index 000000000..4916c9477 --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusBeforeAndTurnOnSwitch.html @@ -0,0 +1,93 @@ + + + + + + Switch Example Using HTML Checkbox Input + + + + + + + + + + + + + + + + + +
+

Switch Example Using HTML Checkbox Input

+ +
+

About This Example

+ +

+ This example illustrates implementing the Switch Pattern with an HTML input[type="checkbox"] as the switch element and using CSS borders to provide graphical rendering of switch states. + It also demonstrates using the HTML fieldset and legend elements to present multiple switches in a labeled group. +

+
+
+

Example

+
+ +
+
+ Accessibility Preferences + Navigate forwards from here + + Navigate backwards from here + +
+
+ +
+ + +
+ +
+
+ + diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusBeforeSwitch.html b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusBeforeSwitch.html new file mode 100644 index 000000000..39b0f1527 --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusBeforeSwitch.html @@ -0,0 +1,92 @@ + + + + + + Switch Example Using HTML Checkbox Input + + + + + + + + + + + + + + + + + +
+

Switch Example Using HTML Checkbox Input

+ +
+

About This Example

+ +

+ This example illustrates implementing the Switch Pattern with an HTML input[type="checkbox"] as the switch element and using CSS borders to provide graphical rendering of switch states. + It also demonstrates using the HTML fieldset and legend elements to present multiple switches in a labeled group. +

+
+
+

Example

+
+ +
+
+ Accessibility Preferences + Navigate forwards from here + + Navigate backwards from here + +
+
+ +
+ + +
+ +
+
+ + diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusOnAndTurnOnSwitch.html b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusOnAndTurnOnSwitch.html new file mode 100644 index 000000000..9658d1c8d --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusOnAndTurnOnSwitch.html @@ -0,0 +1,93 @@ + + + + + + Switch Example Using HTML Checkbox Input + + + + + + + + + + + + + + + + + +
+

Switch Example Using HTML Checkbox Input

+ +
+

About This Example

+ +

+ This example illustrates implementing the Switch Pattern with an HTML input[type="checkbox"] as the switch element and using CSS borders to provide graphical rendering of switch states. + It also demonstrates using the HTML fieldset and legend elements to present multiple switches in a labeled group. +

+
+
+

Example

+
+ +
+
+ Accessibility Preferences + Navigate forwards from here + + Navigate backwards from here + +
+
+ +
+ + +
+ +
+
+ + diff --git a/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusOnSwitch.html b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusOnSwitch.html new file mode 100644 index 000000000..df2279383 --- /dev/null +++ b/tests/switch-checkbox/reference/2025-8-25_124251/switch-checkbox.setFocusOnSwitch.html @@ -0,0 +1,92 @@ + + + + + + Switch Example Using HTML Checkbox Input + + + + + + + + + + + + + + + + + +
+

Switch Example Using HTML Checkbox Input

+ +
+

About This Example

+ +

+ This example illustrates implementing the Switch Pattern with an HTML input[type="checkbox"] as the switch element and using CSS borders to provide graphical rendering of switch states. + It also demonstrates using the HTML fieldset and legend elements to present multiple switches in a labeled group. +

+
+
+

Example

+
+ +
+
+ Accessibility Preferences + Navigate forwards from here + + Navigate backwards from here + +
+
+ +
+ + +
+ +
+
+ +