From 6a15c52a1ba17919a17cc062017424138f26372d Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Wed, 11 Aug 2021 22:32:28 +0200
Subject: [PATCH 1/5] Add extra feature to a11y focusring mixin

---
 less/common/mixins/accessibility.less | 36 +++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/less/common/mixins/accessibility.less b/less/common/mixins/accessibility.less
index cf35f08f96..db261852d0 100644
--- a/less/common/mixins/accessibility.less
+++ b/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.

From dadbc1ddb5e0c2fc5ce873196f9ec2014705cc9c Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Wed, 11 Aug 2021 22:35:43 +0200
Subject: [PATCH 2/5] Add visually hidden CSS class and mixin

---
 less/common/scaffolding.less | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/less/common/scaffolding.less b/less/common/scaffolding.less
index facfa6f432..2093d99ac3 100644
--- a/less/common/scaffolding.less
+++ b/less/common/scaffolding.less
@@ -159,3 +159,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;
+}

From c19e14513215c361c309baca0f80ced2a586f029 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Wed, 11 Aug 2021 22:36:19 +0200
Subject: [PATCH 3/5] Visually hide checkboxes (keep in focus/a11y tree)

---
 less/common/Checkbox.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/less/common/Checkbox.less b/less/common/Checkbox.less
index a7dbac58b5..e5875179be 100644
--- a/less/common/Checkbox.less
+++ b/less/common/Checkbox.less
@@ -3,8 +3,8 @@
   cursor: pointer;
   margin: 0;
 
-  & input[type="checkbox"] {
-    display: none;
+  input[type="checkbox"] {
+    .visually-hidden();
   }
 }
 .Checkbox--switch {

From 48d2fdb77cdabbe2a088866a222aa7d67313aa9a Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Wed, 11 Aug 2021 22:39:03 +0200
Subject: [PATCH 4/5] Place checkbox focus ring around display element

---
 less/common/Checkbox.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/less/common/Checkbox.less b/less/common/Checkbox.less
index e5875179be..454283e9e1 100644
--- a/less/common/Checkbox.less
+++ b/less/common/Checkbox.less
@@ -5,6 +5,7 @@
 
   input[type="checkbox"] {
     .visually-hidden();
+    .add-keyboard-focus-ring-nearby("+ .Checkbox-display");
   }
 }
 .Checkbox--switch {

From 9192fe2518fb86b351a6e8664bd5b456d800d38f Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 15 Aug 2021 11:53:39 +0200
Subject: [PATCH 5/5] Improve mobile checkbox/switch accessibility

---
 js/src/common/components/Checkbox.js |  4 +++-
 less/common/Checkbox.less            | 29 +++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/js/src/common/components/Checkbox.js b/js/src/common/components/Checkbox.js
index 47f0f7e0e2..5c86ba2700 100644
--- a/js/src/common/components/Checkbox.js
+++ b/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>
     );
diff --git a/less/common/Checkbox.less b/less/common/Checkbox.less
index 454283e9e1..7826e28c53 100644
--- a/less/common/Checkbox.less
+++ b/less/common/Checkbox.less
@@ -2,19 +2,42 @@
   display: block;
   cursor: pointer;
   margin: 0;
+  position: relative;
 
   input[type="checkbox"] {
-    .visually-hidden();
+    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;
   }
 }