Add switch example using HTML checkbox input #1895
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| 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; | ||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| -ms-user-select: none; | ||
| user-select: none; | ||
| } | ||
|
|
||
| label input[role="switch"] { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| label input[role="switch"] ~ .state { | ||
| display: inline-block; | ||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| -ms-user-select: none; | ||
| user-select: none; | ||
|
Contributor
There was a problem hiding this comment. This doesn't follow https://github.com/w3c/aria-practices/wiki/Code-Guide#prefixed-properties Should we remove that section of the code guide?
Contributor
There was a problem hiding this comment. |
||
| } | ||
|
|
||
| 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; | ||
| } | ||
|
|
||
| label.focus span.container, | ||
| label:hover span.container { | ||
| background-color: white; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /* | ||
| * 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('keydown', () => this.onKeydown(event)); | ||
| this.switchNode.addEventListener('focus', () => this.onFocus(event)); | ||
| this.switchNode.addEventListener('blur', () => this.onBlur(event)); | ||
| } | ||
|
|
||
| onKeydown(event) { | ||
| if (event.key === 'Enter') { | ||
| event.currentTarget.checked = !event.currentTarget.checked; | ||
| event.stopPropagation(); | ||
| event.preventDefault(); | ||
| } | ||
| } | ||
|
|
||
| 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)); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,184 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
mcking65 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| <title>Switch using input[type="checkbox"] Example | WAI-ARIA Authoring Practices 1.2</title> | ||
|
|
||
| <!-- Core js and css shared by all examples; do not modify when using this template. --> | ||
| <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css"> | ||
| <link rel="stylesheet" href="../css/core.css"> | ||
| <script src="../js/examples.js"></script> | ||
| <script src="../js/highlight.pack.js"></script> | ||
| <script src="../js/app.js"></script> | ||
|
|
||
| <!-- js and css for this example. --> | ||
| <link href="css/switch-checkbox.css" rel="stylesheet"> | ||
| <script src="js/switch-checkbox.js" type="text/javascript"></script> | ||
| </head> | ||
| <body> | ||
| <nav aria-label="Related Links" class="feedback"> | ||
| <ul> | ||
| <li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li> | ||
| <li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li> | ||
| <li><a href="https://github.com/w3c/aria-practices/projects/2">Related Issues</a></li> | ||
| <li><a href="../../#switch">Design Pattern</a></li> | ||
| </ul> | ||
| </nav> | ||
| <main> | ||
| <h1>Switch using <code>input[type="checkbox"]</code> Example</h1> | ||
| <p> | ||
| This example implements the <a href="../../#switch">Switch design pattern</a> using <code>input[type="checkbox"]</code> elements and CSS borders to implement the graphical rendering of the state of the switch. Switches are similar to checkboxes, but should be rendered by assistive technologies as "on" and "off", instead of "checked" and "unchecked". | ||
| </p> | ||
| <p>Similar examples include: </p> | ||
| <ul> | ||
| <li><a href="switch.html">Switch example using the <code>div</code> element.</a></li> | ||
| <li><a href="switch-button.html">Switch example using the <code>button</code> element.</a>.</li> | ||
| </ul> | ||
|
|
||
| <section> | ||
| <h2 id="ex_label">Example</h2> | ||
jongund marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div> | ||
| <div id="ex1"> | ||
| <fieldset> | ||
| <legend>Accessibility Preferences</legend> | ||
| <label> | ||
| <span class="label">Reduced motion</span> | ||
| <input id="id-switch-1" | ||
| type="checkbox" | ||
| role="switch"/> | ||
| <span class="state"> | ||
| <span class="container"> | ||
| <span class="position"> | ||
| </span> | ||
| </span> | ||
| <span class="on">On</span> | ||
| <span class="off">Off</span> | ||
| </span> | ||
| </label> | ||
|
|
||
| <label> | ||
| <span class="label">Show captions</span> | ||
| <input id="id-switch-2" | ||
| type="checkbox" | ||
| role="switch"/> | ||
| <span class="state"> | ||
| <span class="container"> | ||
| <span class="position"> | ||
| </span> | ||
| </span> | ||
| <span class="on">On</span> | ||
| <span class="off">Off</span> | ||
| </span> | ||
| </label> | ||
| </fieldset> | ||
| </div> | ||
| <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <section> | ||
| <h2>Accessibility Features</h2> | ||
| <ul> | ||
| <li>To help assistive technology users understand that the accessibility preferences are made of a group of two switches, the switches are wrapped in a <code>fieldset</code> element labeled with a <code>legend</code> element.</li> | ||
| <li>To provide a visual indication the labels can also be used to change the state of a switch, the background color is changed and a border appears when the pointer moves over the switch or the label. Including the border insures people with visual impairments can perceive the target area in high contrast modes.</li> | ||
| <li>A visual text label (i.e. "on" and "off") of the state of the switch is placed after the graphic indication of the state to make it easier for users with visual or cognitive impairments to understand the current state of the switch.<br/> | ||
| NOTE: CSS attribute selectors are used ensure synchronization of the visual states with the value of the <code>input[type="checkbox"]:checked</code> property.</li> | ||
| <li>The graphical rendering of the switch state uses 2 pixel borders for the container, and a 2 pixel border on the circle indicating the on and off position of the switch. There is 2 pixels of space between the container border and the border of the circle. The use of spacing and borders insures the graphic will be visible and discernible in high contrast modes used by people with visual impairments. | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2 id="kbd_label">Keyboard Support</h2> | ||
| <table aria-labelledby="kbd_label" class="def"> | ||
| <thead> | ||
| <tr> | ||
| <th>Key</th> | ||
| <th>Function</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr data-test-id="key-tab"> | ||
| <th><kbd>Tab</kbd></th> | ||
| <td> | ||
| <ul> | ||
| <li>Moves keyboard focus to the <code>switch</code>.</li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| <tr data-test-id="key-space-enter"> | ||
| <th><kbd>Space</kbd>, <kbd>Enter</kbd></th> | ||
| <td> | ||
| <ul> | ||
| <li>Toggle switch between on and off.</li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2> | ||
| <table aria-labelledby="rps_label" class="data attributes"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Role</th> | ||
| <th scope="col">Attribute</th> | ||
| <th scope="col">Element</th> | ||
| <th scope="col">Usage</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr data-test-id="switch-role"> | ||
| <th scope="row"><code>switch</code></th> | ||
| <td></td> | ||
| <td><code>input[type="checkbox"]</code></td> | ||
| <td> | ||
| <ul> | ||
| <li>The <code>role="switch"</code> attribute identified the <code>input[type="checkbox"]</code> element as an ARIA <code>switch</code>.</li> | ||
| <li>The accessible name is defined using the <code>label</code> element.</li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Javascript and CSS Source Code</h2> | ||
| <ul> | ||
| <li> | ||
| CSS: | ||
| <a href="css/switch-checkbox.css" type="tex/css">switch-checkbox.css</a> | ||
| </li> | ||
| <li> | ||
| Javascript: | ||
| <a href="js/switch-checkbox.js" type="text/javascript">switch-checkbox.js</a> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2 id="sc1_label">HTML Source Code</h2> | ||
| <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div> | ||
| <pre><code id="sc1"></code></pre> | ||
| <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div> | ||
| <!-- | ||
| The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'. | ||
| It renders the HTML in the preceding pre element with ID 'sc1'. | ||
| If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters. | ||
| --> | ||
| <script> | ||
| sourceCode.add('sc1', 'ex1'); | ||
| sourceCode.make(); | ||
| </script> | ||
| </section> | ||
| </main> | ||
| <nav> | ||
| <!-- Update the pattern_ID parameter of this link to refer to the APG design pattern section related to this example. --> | ||
| <a href="../../#switch">Switch Design Pattern in WAI-ARIA Authoring Practices 1.2</a> | ||
| </nav> | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.