w3c · mcking65 · Oct 17, 2021 · Mar 4, 2021 · Mar 4, 2021 · Mar 8, 2021
diff --git a/examples/checkbox/checkbox-1/js/checkbox.js b/examples/checkbox/checkbox-1/js/checkbox.js
diff --git a/examples/checkbox/checkbox-1/checkbox-1.html → examples/checkbox/checkbox.html b/examples/checkbox/checkbox-1/checkbox-1.html → examples/checkbox/checkbox.html
@@ -6,12 +6,12 @@
 
   <!--  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>
+  <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>
 
-  <link href="../css/checkbox.css" rel="stylesheet">
+  <link href="css/checkbox.css" rel="stylesheet">
   <script src="js/checkbox.js" type="text/javascript"></script>
 </head>
 <body>
@@ -42,31 +42,27 @@ <h2 id="ex_label">Example</h2>
         <h3 id="id-group-label">Sandwich Condiments</h3>
         <div role="group" aria-labelledby="id-group-label">
           <ul class="checkboxes">
-            <li><div role="checkbox" aria-checked="false" tabindex= "0">Lettuce</div></li>
-            <li><div role="checkbox" aria-checked="true"  tabindex= "0">Tomato</div></li>
-            <li><div role="checkbox" aria-checked="false" tabindex= "0">Mustard</div></li>
-            <li><div role="checkbox" aria-checked="false" tabindex= "0">Sprouts</div></li>
+            <li><div role="checkbox" aria-checked="false" tabindex="0">Lettuce</div></li>
+            <li><div role="checkbox" aria-checked="true"  tabindex="0">Tomato</div></li>
+            <li><div role="checkbox" aria-checked="false" tabindex="0">Mustard</div></li>
+            <li><div role="checkbox" aria-checked="false" tabindex="0">Sprouts</div></li>
           </ul>
         </div>
 
-        <script type="text/javascript">
-          window.onload = function () {
-
-            var checkboxes = document.querySelectorAll('[role="checkbox"]');
-
-            for (var i = 0; i < checkboxes.length; i++) {
-              var cb = new Checkbox(checkboxes[i]);
-              cb.init();
-            }
-
-          };
-        </script>
-
       </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 Sandwich Condiment options is made of a group of four checkboxes, the checkboxes are wrapped in a <code>group</code> labeled by the heading that labels the sandwich options.</li>
+        <li>Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels. When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.</li>
+        <li>To provide a visual indication the labels can also be used to change the state of a checkbox, the background color is changed when the pointer moves over the checkbox or the label.</li>
+      </ul>
+    </section>
 
      <section>
         <h2 id="kbd_label">Keyboard Support</h2>
@@ -181,7 +177,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <h2>Javascript and CSS Source Code</h2>
     <ul id="css_js_files">
       <li>
-        CSS: <a href="../css/checkbox.css" type="text/css">checkbox.css</a>
+        CSS: <a href="css/checkbox.css" type="text/css">checkbox.css</a>
       </li>
       <li>
         Javascript: <a href="js/checkbox.js" type="text/javascript">checkbox.js</a>

diff --git a/examples/checkbox/css/checkbox.css b/examples/checkbox/css/checkbox.css
@@ -7,15 +7,16 @@ ul.checkboxes {
 [role="checkbox"] {
   display: inline-block;
   position: relative;
-  padding-left: 1.4em;
+  padding: 4px;
+  padding-left: 28px;
   cursor: default;
 }
 
 [role="checkbox"]::before,
 [role="checkbox"]::after {
   position: absolute;
   top: 50%;
-  left: 7px;
+  left: calc(28px - 14px);
   transform: translate(-50%, -50%);
   content: "";
 }
@@ -36,7 +37,6 @@ ul.checkboxes {
   );
 }
 
-[role="checkbox"][aria-checked="mixed"]::before,
 [role="checkbox"][aria-checked="true"]::before {
   border-color: hsl(216, 80%, 50%);
   background: hsl(217, 95%, 68%);
@@ -47,15 +47,6 @@ ul.checkboxes {
   );
 }
 
-[role="checkbox"][aria-checked="mixed"]::after {
-  display: block;
-  width: 8px;
-  border-bottom: 0.125em solid #fff;
-  transform: translate(-50%, -50%) rotateZ(45deg);
-  transform-origin: center center;
-}
-
-[role="checkbox"][aria-checked="mixed"]:active::after,
 [role="checkbox"][aria-checked="true"]::after {
   display: block;
   width: 0.25em;
@@ -65,7 +56,6 @@ ul.checkboxes {
   transform: translateY(-65%) translateX(-50%) rotate(45deg);
 }
 
-[role="checkbox"][aria-checked="mixed"]:active::before,
 [role="checkbox"][aria-checked="true"]:active::before {
   background-image: linear-gradient(
     to bottom,
@@ -75,9 +65,23 @@ ul.checkboxes {
 }
 
 [role="checkbox"]:focus {
+  padding: 2px;
+  padding-left: calc(28px - 2px);
+  border: 2px solid #765;
+  border-radius: 5px;
+  background-color: #def;
   outline: none;
 }
 
+[role="checkbox"]:focus::before,
+[role="checkbox"]:focus::after {
+  left: calc(28px - 16px);
+}
+
+[role="checkbox"]:hover {
+  background-color: #def;
+}
+
 [role="checkbox"]:focus::before {
   width: 16px;
   height: 16px;

diff --git a/examples/checkbox/js/checkbox.js b/examples/checkbox/js/checkbox.js
@@ -0,0 +1,65 @@
+/*
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ *   File:   Checkbox.js
+ *
+ *   Desc:   Checkbox widget that implements ARIA Authoring Practices
+ */
+
+'use strict';
+
+class Checkbox {
+  constructor(domNode) {
+    this.domNode = domNode;
+    this.domNode.tabIndex = 0;
+
+    if (!this.domNode.getAttribute('aria-checked')) {
+      this.domNode.setAttribute('aria-checked', 'false');
+    }
+
+    this.domNode.addEventListener('keydown', this.onKeydown.bind(this));
+    this.domNode.addEventListener('click', this.onClick.bind(this));
+  }
+
+  toggleCheckbox() {
+    if (this.domNode.getAttribute('aria-checked') === 'true') {
+      this.domNode.setAttribute('aria-checked', 'false');
+    } else {
+      this.domNode.setAttribute('aria-checked', 'true');
+    }
+  }
+
+  /* EVENT HANDLERS */
+
+  onKeydown(event) {
+    var flag = false;
+
+    switch (event.key) {
+      case ' ':
+        this.toggleCheckbox();
+        flag = true;
+        break;
+
+      default:
+        break;
+    }
+
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+
+  onClick() {
+    this.toggleCheckbox();
+  }
+}
+
+// Initialize checkboxes on the page
+window.addEventListener('load', function () {
+  let checkboxes = document.querySelectorAll('.checkboxes [role="checkbox"]');
+  for (let i = 0; i < checkboxes.length; i++) {
+    new Checkbox(checkboxes[i]);
+  }
+});
diff --git a/examples/index.html b/examples/index.html
@@ -70,8 +70,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>checkbox</code></td>
             <td>
               <ul>
-                <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox  (Two State)</a></li>
                 <li><a href="checkbox/checkbox-2/checkbox-2.html">Checkbox  (Mixed-State)</a></li>
+                <li><a href="checkbox/checkbox.html">Checkbox  (Two State)</a></li>
               </ul>
             </td>
           </tr>
@@ -144,7 +144,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td>
               <ul>
                 <li><a href="carousel/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
-                <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox  (Two State)</a></li>
+                <li><a href="checkbox/checkbox.html">Checkbox  (Two State)</a></li>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
@@ -429,8 +429,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-checked</code></td>
             <td>
               <ul>
-                <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox  (Two State)</a></li>
                 <li><a href="checkbox/checkbox-2/checkbox-2.html">Checkbox  (Mixed-State)</a></li>
+                <li><a href="checkbox/checkbox.html">Checkbox  (Two State)</a></li>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a></li>
                 <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a></li>
@@ -563,7 +563,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
               <ul>
                 <li><a href="carousel/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
                 <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a></li>
-                <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox  (Two State)</a></li>
+                <li><a href="checkbox/checkbox.html">Checkbox  (Two State)</a></li>
                 <li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
                 <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>
@@ -604,7 +604,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-labelledby</code></td>
             <td>
               <ul>
-                <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox  (Two State)</a></li>
+                <li><a href="checkbox/checkbox.html">Checkbox  (Two State)</a></li>
                 <li><a href="combobox/combobox-datepicker.html">Date Picker Combobox</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>

diff --git a/test/tests/checkbox_checkbox-1.js → test/tests/checkbox_checkbox.js b/test/tests/checkbox_checkbox-1.js → test/tests/checkbox_checkbox.js
@@ -1,11 +1,11 @@
 const { ariaTest } = require('..');
-const { By, Key } = require('selenium-webdriver');
+const { By } = require('selenium-webdriver');
 const assertAttributeValues = require('../util/assertAttributeValues');
 const assertAriaLabelledby = require('../util/assertAriaLabelledby');
 const assertAriaRoles = require('../util/assertAriaRoles');
 const assertTabOrder = require('../util/assertTabOrder');
 
-const exampleFile = 'checkbox/checkbox-1/checkbox-1.html';
+const exampleFile = 'checkbox/checkbox.html';
 
 const ex = {
   groupSelector: '#ex1 [role="group"]',
@@ -184,7 +184,7 @@ ariaTest(
       // Send SPACE key to check box to select
       await t.context.session
         .findElement(By.css(checkboxSelector))
-        .sendKeys(Key.SPACE);
+        .sendKeys(' ');
 
       t.true(
         await waitAndCheckAriaChecked(t, checkboxSelector, 'true'),
@@ -201,7 +201,7 @@ ariaTest(
       // Send SPACE key to check box to unselect
       await t.context.session
         .findElement(By.css(checkboxSelector))
-        .sendKeys(Key.SPACE);
+        .sendKeys(' ');
 
       t.true(
         await waitAndCheckAriaChecked(t, checkboxSelector, 'false'),