Add switch example using HTML checkbox input

.vnurc

@@ -23,3 +23,5 @@ Section lacks heading. Consider using “h2”-“h6” elements to add identify
 # https://github.com/validator/validator/issues/1096
 Bad value “none” for attribute “role” on element “svg”.
 Bad value “presentation” for attribute “role” on element “svg”.
+# https://github.com/validator/validator/issues/1122
+Element “input” is missing required attribute “aria-checked”.

examples/index.html

@@ -358,6 +358,10 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
               </ul>
             </td>
           </tr>
+          <tr>
+            <td><code>switch</code></td>
+            <td><a href="switch/switch-checkbox.html">Switch using input[type="checkbox"]</a></td>
+          </tr>
           <tr>
             <td><code>tab</code></td>
             <td>
@@ -607,6 +611,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
+                <li><a href="switch/switch-checkbox.html">Switch using input[type="checkbox"]</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
             </td>

examples/switch/css/switch-checkbox.css

@@ -0,0 +1,89 @@
+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;
+}
+
+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;
+}

examples/switch/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));
+});

examples/switch/switch-checkbox.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Switch using input[type=&quot;checkbox&quot;] 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=&quot;checkbox&quot;]</code> Example</h1>
+  <p>
+    This example implements the <a href="../../#switch">Switch design pattern</a> using <code>input[type=&quot;checkbox&quot;]</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>
+    <div class="example-header">
+      <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>
+    <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" aria-hidden="true">On</span>
+            <span class="off" aria-hidden="true">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" aria-hidden="true">On</span>
+            <span class="off" aria-hidden="true">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. &quot;on&quot; and &quot;off&quot;) 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=&quot;checkbox&quot;]: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">
+          <th><kbd>Space</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=&quot;checkbox&quot;]</code></td>
+            <td>
+              <ul>
+                <li>The <code>role=&quot;switch&quot;</code> attribute identified the <code>input[type=&quot;checkbox&quot;]</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>
+          <tr data-test-id="aria-hidden">
+            <td></td>
+            <th scope="row"><code>aria-hidden="true"</code></th>
+            <td><code>span.on</code> and <code>span.off</code></td>
+            <td>
+              <ul>
+                <li><code>aria-hidden</code> is used to remove visual &quot;on&quot; and &quot;off&quot; labels to the right of the switch from being part of the label for the switch.</li>
+                <li>The visual &quot;on&quot; and &quot;off&quot; text are not needed in the label because the state of the switch is conveyed through the <code>.checked</code> property of the <code>input</code> element.</li>
+              </ul>
+            </td>
+          </tr>
+      </tbody>
+    </table>
+  </section>
+
+  <section>
+    <h2>Javascript and CSS Source Code</h2>
+    <ul id="css_js_files">
+      <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', 'ex_label', 'css_js_files');
+      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>