adding initial switch example using input[type=checkbox]

examples/index.html

@@ -166,6 +166,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer 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="treeview/treeview-1/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></li>
                 <li><a href="treeview/treeview-1/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
                 <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -356,6 +357,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>

examples/switch/css/switch-checkbox.css

@@ -0,0 +1,74 @@
+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;
+}
+
+label input[role="switch"] {
+  opacity: 0;
+}
+
+label input[role="switch"] ~ .state {
+  display: inline-block;
+}
+
+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"] ~ .state::after {
+  padding-left: 4px;
+  content: "Off";
+}
+
+label input[role="switch"]:checked ~ .state > .container > .position {
+  left: 20px;
+  border-color: green;
+  background: green;
+  opacity: 1;
+}
+
+label input[role="switch"]:checked ~ .state::after {
+  padding-left: 4px;
+  content: "On";
+}
+
+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;
+}

examples/switch/js/switch-checkbox.js

@@ -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));
+});

examples/switch/switch-checkbox.html

@@ -0,0 +1,209 @@
+<!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>
+    <h2 id="ex_label">Example</h2>
+    <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+    <div id="ex1">
+      <div role="group" aria-labelledby="id-group-label">
+        <h3 id="id-group-label" >Accessibility Preferences</h3>
+        <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>
+        </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>
+        </label>
+      </div>
+    </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>group</code> labeled by the heading that labels the notification options.</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.</li>
+        <li>A visual text label 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.</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="h3">
+            <th scope="row"></th>
+            <td></td>
+            <td><code>h3</code></td>
+            <td>
+              <ul>
+                <li>Provides a grouping label for the group of switches.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="group-role">
+            <th scope="row"><code>group</code></th>
+            <td></td>
+            <td><code>div</code></td>
+            <td>
+              <ul>
+                <li>Identifies the <code>div</code> element as a <code>group</code> container for the switches.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="group-aria-labelledby">
+            <th scope="row"></th>
+            <td><code>aria-labelledby</code></td>
+            <td><code>div</code></td>
+            <td>
+              <ul>
+                <li>The <code>aria-labelledby</code> attribute references the <code>id</code> attribute of the <code>h3</code> element to define the accessible name for the group of switches.</li>
+              </ul>
+            </td>
+          </tr>
+          <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>
+      </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>