Switch Role: Example using the DIV element

aria-practices.html

@@ -2557,6 +2557,48 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>
       </section>
     </section>
 
+    <section class="widget" id="switch">
+      <h3>Switch</h3>
+      <p>
+        This pattern is work in progress.
+        Please provide feedback in
+        <a href="https://github.com/w3c/aria-practices/issues/162">issue 162.</a>
+      </p>
+      <p>
+        A switch is similar to a checkbox, but instead of being checked or unchecked its states are <q>on</q> or <q>off</q>. 
+        The switch  provides assistive technologies the opportunity to render the state of the switch consistent with the graphical rendering (e.g., announcing "on" and "off").
+        Switches are often found in user preference and profile pages.
+      </p>
+
+      <section class="notoc">
+        <h4>Example</h4>
+        <p><a href="examples/switch/switch.html">Switch Example</a>: Demonstrates simple on/off switches.</p>
+      </section>
+
+      <section class="notoc">
+        <h4>Keyboard Interaction</h4>
+        <p>When the switch has focus, pressing the <kbd>Space</kbd> key changes the state of the switch.</p>
+      </section>
+
+      <section class="notoc">
+        <h4>WAI-ARIA Roles, States, and Properties</h4>
+        <ul>
+          <li>The switch has role <a href="#switch" class="role-reference">switch</a>.</li>
+          <li>
+            The switch has an accessible label provided by one of the following:
+            <ul>
+              <li>Visible text content contained within the element with role <code>switch</code>.</li>
+              <li>A visible label referenced by the value of <a href="#aria-labelledby" class="property-reference" >aria-labelledby</a> set on the element with role <code>switch</code>.</li>
+              <li><a href="#aria-label" class="property-reference">aria-label</a> set on the element with role <code>switch</code>.</li>
+            </ul>
+          </li>
+          <li>When <q>on</q>, the switch element has state <a href="#aria-checked" class="state-reference" >aria-checked</a> set to <code>true</code>.</li>
+          <li>When <q>off</q>, it has state <a href="#aria-checked" class="state-reference" >aria-checked</a> set to <code>false</code>.</li>
+          <li>If the state <a href="#aria-checked" class="state-reference" >aria-checked</a> is set to <code>mixed</code>, it will be treated <code>false</code>.</li>
+        </ul>
+      </section>
+    </section>
+
     <section class="widget" id="table">
       <h3>Table</h3>
       <p>

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.html">Switch</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>
@@ -184,7 +185,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
                 <li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
                 <li><a href="combobox/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></li>
                 <li><a href="combobox/combobox-select-only.html">Select-Only Combobox</a></li>
-                <li><a href="listbox/listbox-collapsible.html">Collapsible Dropdown Listbox</a></li>
+                <li><a href="listbox/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></li>
                 <li><a href="listbox/listbox-grouped.html">Listbox  with Grouped Options</a></li>
                 <li><a href="listbox/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></li>
                 <li><a href="listbox/listbox-scrollable.html">Scrollable Listbox</a></li>
@@ -276,7 +277,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
                 <li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
                 <li><a href="combobox/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></li>
                 <li><a href="combobox/combobox-select-only.html">Select-Only Combobox</a></li>
-                <li><a href="listbox/listbox-collapsible.html">Collapsible Dropdown Listbox</a></li>
+                <li><a href="listbox/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></li>
                 <li><a href="listbox/listbox-grouped.html">Listbox  with Grouped Options</a></li>
                 <li><a href="listbox/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></li>
                 <li><a href="listbox/listbox-scrollable.html">Scrollable Listbox</a></li>
@@ -359,6 +360,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.html">Switch</a></td>
+          </tr>
           <tr>
             <td><code>tab</code></td>
             <td>
@@ -443,7 +448,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="combobox/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></li>
                 <li><a href="combobox/combobox-select-only.html">Select-Only Combobox</a></li>
                 <li><a href="combobox/grid-combo.html">Editable Combobox with Grid Popup</a></li>
-                <li><a href="listbox/listbox-collapsible.html">Collapsible Dropdown Listbox</a></li>
+                <li><a href="listbox/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></li>
                 <li><a href="listbox/listbox-grouped.html">Listbox  with Grouped Options</a></li>
                 <li><a href="listbox/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></li>
                 <li><a href="listbox/listbox-scrollable.html">Scrollable Listbox</a></li>
@@ -481,6 +486,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="switch/switch.html">Switch</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
             </td>
@@ -569,7 +575,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="disclosure/disclosure-img-long-description.html">Disclosure (Show/Hide) for Image Description</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="disclosure/disclosure-navigation-hybrid.html">Disclosure Navigation Menu with Top-Level Links</a></li>
                 <li><a href="disclosure/disclosure-navigation.html">Disclosure Navigation Menu</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="listbox/listbox-collapsible.html">Collapsible Dropdown Listbox</a></li>
+                <li><a href="listbox/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></li>
                 <li><a href="menu-button/menu-button-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="menu-button/menu-button-actions.html">Actions Menu Button  Using element.focus()</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -589,7 +595,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
               <ul>
                 <li><a href="combobox/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="combobox/grid-combo.html">Editable Combobox with Grid Popup</a></li>
-                <li><a href="listbox/listbox-collapsible.html">Collapsible Dropdown Listbox</a></li>
+                <li><a href="listbox/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></li>
                 <li><a href="menu-button/menu-button-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="menu-button/menu-button-actions.html">Actions Menu Button  Using element.focus()</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -609,6 +615,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="slider/slider-seek.html">Media Seek 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.html">Switch</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
             </td>
@@ -651,7 +658,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="feed/feed.html">Feed</a></li>
                 <li><a href="grid/dataGrids.html">Data Grid</a></li>
                 <li><a href="grid/LayoutGrids.html">Layout Grid</a></li>
-                <li><a href="listbox/listbox-collapsible.html">Collapsible Dropdown Listbox</a></li>
+                <li><a href="listbox/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></li>
                 <li><a href="listbox/listbox-grouped.html">Listbox  with Grouped Options</a></li>
                 <li><a href="listbox/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></li>
                 <li><a href="listbox/listbox-scrollable.html">Scrollable Listbox</a></li>
@@ -784,7 +791,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="combobox/combobox-select-only.html">Select-Only Combobox</a></li>
                 <li><a href="combobox/grid-combo.html">Editable Combobox with Grid Popup</a></li>
                 <li><a href="dialog-modal/datepicker-dialog.html">Date Picker Dialog</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="listbox/listbox-collapsible.html">Collapsible Dropdown Listbox</a></li>
+                <li><a href="listbox/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></li>
                 <li><a href="listbox/listbox-grouped.html">Listbox  with Grouped Options</a></li>
                 <li><a href="listbox/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></li>
                 <li><a href="listbox/listbox-scrollable.html">Scrollable Listbox</a></li>

examples/switch/css/switch.css

@@ -0,0 +1,73 @@
+[role="switch"] {
+  margin: 2px;
+  padding: 4px 4px 8px 8px;
+  border: 0 solid #005a9c;
+  border-radius: 5px;
+  width: 15em;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  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;
+}

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