[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

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.