From 23a0de76924a9c7bf24e64ae3e5578bf4203cc2b Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 25 May 2021 00:22:49 +0100
Subject: [PATCH] Use :focus-visible instead of :focus, with polyfill

---
 package-lock.json               |  6 ++++++
 package.json                    |  2 +-
 src/main.ts                     |  2 ++
 src/scss/_mixins.scss           |  8 ++++++++
 src/scss/_placeholders.scss     | 11 +++++++++--
 src/scss/leaflet/_controls.scss |  6 +++++-
 src/scss/style.scss             | 21 +++++++++++++--------
 7 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 src/scss/_mixins.scss

diff --git a/package-lock.json b/package-lock.json
index 3ae7536..b245958 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1973,6 +1973,12 @@
       "integrity": "sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=",
       "dev": true
     },
+    "focus-visible": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz",
+      "integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==",
+      "dev": true
+    },
     "format": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
diff --git a/package.json b/package.json
index b537935..7e928f7 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
     "lint": "eslint src",
     "lint:fix": "eslint src --fix"
   },
-  "dependencies": {},
   "devDependencies": {
     "@soerenmartius/vue3-clipboard": "^0.1.2",
     "@types/leaflet": "^1.7.0",
@@ -20,6 +19,7 @@
     "@vue/eslint-config-typescript": "^7.0.0",
     "eslint": "^7.26.0",
     "eslint-plugin-vue": "^7.9.0",
+    "focus-visible": "^5.2.0",
     "leaflet": "^1.7.1",
     "normalize-scss": "^7.0.1",
     "rollup-plugin-analyzer": "^4.0.0",
diff --git a/src/main.ts b/src/main.ts
index 6690855..b2b07ac 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -21,6 +21,8 @@ import {store} from "@/store";
 import 'leaflet/dist/leaflet.css';
 import 'normalize-scss/sass/normalize/_import-now.scss';
 import '@/scss/style.scss';
+
+import 'focus-visible';
 import {MutationTypes} from "@/store/mutation-types";
 import {validateConfiguration} from "@/util";
 import { VueClipboard } from '@soerenmartius/vue3-clipboard'
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
new file mode 100644
index 0000000..273dd1d
--- /dev/null
+++ b/src/scss/_mixins.scss
@@ -0,0 +1,8 @@
+/*
+ Adds styles for both :focus-visible and .focus-visible for maximum browser support.
+*/
+@mixin focus() {
+	&:focus-visible, &.focus-visible {
+		@content;
+	}
+}
diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss
index 4ab1ffe..00164be 100644
--- a/src/scss/_placeholders.scss
+++ b/src/scss/_placeholders.scss
@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@import "mixins";
+
 %button {
 	appearance: none;
 	border: none;
@@ -34,7 +36,7 @@
 		color: var(--text-hover);
 	}
 
-	&:focus {
+	@include focus {
 		outline-color: var(--outline-focus);
 		outline-width: 0.2rem;
 		background-color: var(--background-hover);
@@ -52,7 +54,12 @@
 		color: var(--text-disabled);
 		cursor: not-allowed;
 
-		&:hover, &:focus, &:active {
+		&:hover, &:active {
+			background-color: var(--background-disabled);
+			color: var(--text-disabled);
+		}
+
+		@include focus {
 			background-color: var(--background-disabled);
 			color: var(--text-disabled);
 		}
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index ea2331f..1e68d42 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -301,7 +301,11 @@
 	animation: fade 0.3s linear;
 	animation-fill-mode: forwards;
 	
-	&:focus, &:hover, &:active {
+	&:hover, &:active {
+		background-color: var(--background-base);
+	}
+
+	@include focus {
 		background-color: var(--background-base);
 	}
 
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 484b86e..43e3003 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -16,6 +16,7 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@import "mixins";
 @import "placeholders";
 @import "leaflet/controls";
 @import "leaflet/popups";
@@ -72,7 +73,7 @@ input {
 	border: 0.2rem solid var(--border-color);
 	border-radius: 0;
 
-	&:focus {
+	@include focus {
 		color: var(--text-emphasis);
 		outline-color: var(--text-emphasis);
 	}
@@ -312,19 +313,23 @@ input {
 		}
 	}
 
-	&:hover, &:focus {
+	&:hover {
 		z-index: 1000;
 	}
 
+	@include focus {
+		z-index: 1000;
+
+		.marker__label {
+			display: block;
+			outline: auto;
+		}
+	}
+
 	&:hover .marker__label {
 		display: block;
 	}
 
-	&:focus .marker__label {
-		display: block;
-		outline: auto;
-	}
-
 	@at-root {
 		.no-animations .marker.marker--player {
 			transition: none;
@@ -343,7 +348,7 @@ input {
 	line-height: 1;
 
 	/* Workaround for focus outlines until https://github.com/Leaflet/Leaflet/pull/7259 gets released */
-	:focus {
+	@include focus {
 		outline: -webkit-focus-ring-color auto thin !important;
 		outline: revert !important;
 	}