From 5804b3c72a0f3ca30a78777ef1d628a817063923 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 13:04:04 +0100
Subject: [PATCH] CSS outline fixes for keyboard users.

---
 src/styles/_base.scss  |  8 ++++++--
 src/styles/_input.scss | 26 ++++++++++++++++++++++----
 src/styles/_layer.scss |  2 ++
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 9e860f7..0c97d23 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -63,9 +63,13 @@ h4 {
 }
 
 input:focus,
+textarea:focus,
+*[role="button"]:focus,
+button:focus,
+.maputnik-toolbar-link:focus,
 select:focus {
-  color: $color-white !important;
-  outline: #8e8e8e auto 1px !important;
+  color: $color-white;
+  outline: #8e8e8e auto 1px;
 }
 
 label:hover {
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 16f08bc..87d6a0a 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -124,9 +124,13 @@
 // CHECKBOX
 .maputnik-checkbox {
   position: absolute;
-  z-index: -1;
-  opacity: 0;
-  width: 50%;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  left: 0;
+  top: 0;
+  outline: none;
 
   &-wrapper {
     @extend .maputnik-input;
@@ -141,6 +145,7 @@
   }
 
   &-box {
+    z-index: 2;
     display: inline-block;
     text-align: center;
     height: 24px;
@@ -152,12 +157,26 @@
     border-width: 2px;
     border-color: $color-gray;
     transition: background-color 0.1s ease-out;
+    position: absolute;
+    top: 0;
+    left: 0;
+    // So they fall through to the <input/> beneath
+    pointer-events: none;
 
     @media screen and (prefers-reduced-motion: reduce) {
       transition-duration: 0ms;
     }
   }
 
+  &:focus {
+    z-index: 8;
+  }
+
+  &:focus + &-box {
+    z-index: 9;
+  }
+
+
   &-icon {
     width: 50%;
     height: 50%;
@@ -203,7 +222,6 @@
 
 .maputnik-input-block-content {
   position: relative;
-  overflow: hidden;
 }
 
 .SpecDoc__sdk-support {
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index 394f6f1..c3cc579 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -143,6 +143,8 @@
     color: inherit;
     text-decoration: none;
     cursor: pointer;
+    // HACK: Remove important
+    outline: none !important;
   }
 
   &-group-header {