Add Switch Example using HTML button Element

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-button.html">Switch using Button</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-button.html">Switch using Button</a></td>
+          </tr>
           <tr>
             <td><code>tab</code></td>
             <td>
@@ -478,6 +483,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-button.html">Switch using Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
             </td>

examples/switch/css/switch-button.css

@@ -0,0 +1,85 @@
+button[role="switch"] {
+  display: block;
+  margin: 2px;
+  padding: 4px 4px 8px 8px;
+  border: 0 solid #005a9c;
+  border-radius: 5px;
+  width: 17em;
+  text-align: left;
+  background-color: white;
+}
+
+button[role="switch"] .label {
+  position: relative;
+  top: -3px;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  width: 10em;
+  vertical-align: middle;
+}
+
+button[role="switch"] svg {
+  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.container {
+  forced-color-adjust: none;
+  fill-opacity: 1;
+}
+
+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;
+}
+
+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;
+}
+
+button[role="switch"]:focus,
+button[role="switch"]:hover {
+  padding: 2px 2px 6px 6px;
+  border-width: 2px;
+  outline: none;
+  background-color: #def;
+  cursor: pointer;
+}

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

examples/switch/switch-button.html

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Switch using Button 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-button.css" rel="stylesheet">
+  <script src="js/switch-button.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 Button Example</h1>
+  <p>
+    This example implements the <a href="../../#switch">Switch design pattern</a> using <code>button</code> elements and SVG 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-checkbox.html">Switch example using the <code>input[type=checkbox]</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">
+      <div role="group" aria-labelledby="id-group-label">
+        <h3 id="id-group-label" >Environmental Controls</h3>
+        <button
+          type="button"
+          role="switch"
+          aria-checked="false">
+          <span class="label">Living Room Lights</span>
+          <svg xmlns='http://www.w3.org/2000/svg' height='20' width='36'>
+            <rect class="container" x="1" y="1" width="34" height="18" rx="4" />
+            <rect class="off" x="4" y="4" width="12" height="12" rx="4" />
+            <rect class="on" x="20" y="4" width="12" height="12" rx="4" />
+          </svg>
+          <span class="on">On</span>
+          <span class="off">Off</span>
+        </button>
+
+        <button
+          type="button"
+          role="switch"
+          aria-checked="false">
+          <span class="label">Outdoor Lights</span>
+          <svg xmlns='http://www.w3.org/2000/svg' height='20' width='36'>
+            <rect class="container" x="1" y="1" width="34" height="18" rx="4" />
+            <rect class="off" x="4" y="4" width="12" height="12" rx="4" />
+            <rect class="on" x="20" y="4" width="12" height="12" rx="4" />
+          </svg>
+          <span class="on">On</span>
+          <span class="off">Off</span>
+        </button>
+      </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 environmental control options 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.  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.</li>
+        <li>
+          The graphical rendering of the switch state uses 2 pixel borders for the container, and a 2 pixel border on the rectangle indicating the on and off position of the switch.  There is 2 pixels of space between the container border and the border of the rectangle.  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>
+        <li>
+          To ensure the SVG graphics have sufficient contrast with the background when high contrast settings invert colors, the CSS <code>currentColor</code> value for the <code>stroke</code> and <code>fill</code> properties is used to synchronize the colors with text content.
+          If specific colors were used to specify the <code>stroke</code> and <code>fill</code> properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.
+          <br/>NOTE: The SVG elements need to set the CSS <code>forced-color-adjust</code> property to <code>auto</code> for some browsers to support the <code>currentColor</code> value.  The fill color of the container <code>rect</code> is set on initialization to use the initial background color of the <code>button</code> element for the fill color to keep the background color constant when the button is focused or hovered.
+         </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>, <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>button</code></td>
+            <td>
+              The <code>role=&quot;switch&quot;</code> attribute identified the <code>button</code> element as an ARIA <code>switch</code>.
+            </td>
+          </tr>
+          <tr data-test-id="switch-aria-checked">
+            <td></td>
+            <th scope="row"><code>aria-checked=&quot;false&quot;</code></th>
+            <td><code>button</code></td>
+            <td>
+                <ul>
+                  <li>Identifies the <code>switch</code> button as off.</li>
+                  <li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;false&quot;]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
+                </ul>
+            </td>
+          </tr>
+          <tr data-test-id="switch-aria-checked">
+            <td></td>
+            <th scope="row"><code>aria-checked=&quot;true&quot;</code></th>
+            <td><code>button</code></td>
+            <td>
+                <ul>
+                  <li>Identifies the <code>switch</code> as on.</li>
+                  <li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;true&quot;]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
+                </ul>
+            </td>
+          </tr>
+      </tbody>
+    </table>
+  </section>
+
+  <section>
+    <h2>Javascript and CSS Source Code</h2>
+    <!--  After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files.  -->
+    <ul id="css_js_files">
+      <li>
+        CSS:
+        <a href="css/switch-button.css" type="tex/css">switch-button.css</a>
+      </li>
+      <li>
+        Javascript:
+        <a href="js/switch-button.js" type="text/javascript">switch-button.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>