[A11Y] Make checkboxes focusable (#3014)

* Add extra feature to a11y focusring mixin

* Add visually hidden CSS class and mixin

* Visually hide checkboxes (keep in focus/a11y tree)

* Place checkbox focus ring around display element

* Improve mobile checkbox/switch accessibility

framework/core/js/src/common/components/Checkbox.js

@@ -33,7 +33,9 @@ export default class Checkbox extends Component {
     return (
       <label className={className}>
         <input type="checkbox" checked={this.attrs.state} disabled={this.attrs.disabled} onchange={withAttr('checked', this.onchange.bind(this))} />
-        <div className="Checkbox-display">{this.getDisplay()}</div>
+        <div className="Checkbox-display" aria-hidden="true">
+          {this.getDisplay()}
+        </div>
         {vnode.children}
       </label>
     );

framework/core/less/common/Checkbox.less

@@ -2,18 +2,42 @@
   display: block;
   cursor: pointer;
   margin: 0;
+  position: relative;
 
-  & input[type="checkbox"] {
+  input[type="checkbox"] {
-    display: none;
+    position: absolute;
+    z-index: 1;
+
+    opacity: 0;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    width: 100%;
+    height: 100%;
+
+    cursor: pointer;
+
+    .add-keyboard-focus-ring-nearby("+ .Checkbox-display");
   }
 }
 .Checkbox--switch {
-  padding-left: 65px;
+  @left-pad: 65px;
+
+  padding-left: @left-pad;
   margin: 5px 0;
 
+  input[type="checkbox"] {
+    top: -4px;
+    width: 50px;
+    height: 28px;
+  }
+
   .Checkbox-display {
     float: left;
-    margin-left: -65px;
+    margin-left: -@left-pad;
     margin-top: -4px;
   }
 }

framework/core/less/common/mixins/accessibility.less

@@ -39,13 +39,13 @@
  *
  * For example...
  * 
- *? button { .addKeyboardFocusRing(":focus-within") }
+ *? button { .add-keyboard-focus-ring(":focus-within") }
  * becomes
  *? button:focus-within { <styles>  }
  *
  * AND
  *
- *? button { .addKeyboardFocusRing(" :focus-within") }
+ *? button { .add-keyboard-focus-ring(" :focus-within") }
  * becomes
  *? button :focus-within { <styles>  }
  */
@@ -57,6 +57,38 @@
   }
 }
 
+/** 
+ * This mixin allows support for a custom element nearby the focused one
+ * to have a focus style applied to it
+ *
+ * For example...
+ * 
+ *? button { .add-keyboard-focus-ring-nearby("+ .myOtherElement") }
+ * becomes
+ *? button:-moz-focusring + .myOtherElement { <styles> }
+ *? button:focus-within + .myOtherElement { <styles> }
+ */
+.add-keyboard-focus-ring-nearby(@nearbySelector) {
+  @realNearbySelector: ~"@{nearbySelector}";
+
+  // We need to declare these separately, otherwise
+  // browsers will ignore `:focus-visible` as they
+  // don't understand `:-moz-focusring`
+
+  // These are the keyboard-only versions of :focus
+  &:-moz-focusring {
+    @{realNearbySelector} {
+      #private.__focus-ring-styles();
+    }
+  }
+
+  &:focus-visible {
+    @{realNearbySelector} {
+      #private.__focus-ring-styles();
+    }
+  }
+}
+
 /**
  * Allows an offset to be supplied for an a11y
  * outline.

framework/core/less/common/scaffolding.less

@@ -148,3 +148,13 @@ blockquote ol:last-child {
   font-size: 18px;
   color: @muted-more-color;
 }
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}