Use :focus-visible instead of :focus, with polyfill

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",

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",

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'

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;
+	}
+}

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);
 		}

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);
 	}
 

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;
 	}