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 HTML 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>
@@ -361,7 +362,12 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
           </tr>
           <tr>
             <td><code>switch</code></td>
-            <td><a href="switch/switch.html">Switch</a></td>
+            <td>
+              <ul>
+                <li><a href="switch/switch-button.html">Switch  Using HTML Button</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>
+              </ul>
+            </td>
           </tr>
           <tr>
             <td><code>tab</code></td>
@@ -485,6 +491,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 HTML Button</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>
@@ -613,6 +620,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-button.html">Switch  Using HTML Button</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>

examples/switch/css/switch-button.css

@@ -0,0 +1,80 @@
+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.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)
+  );
+});