Focus style improvements

- Replace js :focus-visible polyfill with css
- Improve fallback :focus styles

index.html

@@ -139,7 +139,7 @@
             --background-hover: #cccccc; /* Button :hover/selected */
             --background-active: #eeeeee; /* Button :active */
 
-            --outline-focus: #cccccc; /* Button :focus outline */
+            --outline-focus: #eeeeee; /* Button :focus outline */
 
             --border-radius: 1rem;
             --border-color: #333333; /* Control borders */

package.json

@@ -13,7 +13,6 @@
   "dependencies": {
     "@kyvg/vue3-notification": "2.3.0",
     "@soerenmartius/vue3-clipboard": "^0.1",
-    "focus-visible": "^5.2",
     "leaflet": "1.7.1",
     "normalize-scss": "^7.0",
     "vue": "^3.1",

src/components/Map.vue

@@ -351,18 +351,22 @@ export default defineComponent({
 		box-sizing: border-box;
 		position: relative;
 
-		@include focus {
+		&:focus:before {
+			content: '';
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			border: 0.2rem solid #cccccc;
+			display: block;
+			z-index: 2000;
+			pointer-events: none;
+		}
+
+		@include focus-reset {
 			&:before {
-				content: '';
+				content: none;
-				position: absolute;
-				top: 0;
-				right: 0;
-				bottom: 0;
-				left: 0;
-				border: 0.2rem solid #cccccc;
-				display: block;
-				z-index: 2000;
-				pointer-events: none;
 			}
 		}
 	}

src/components/chat/ChatMessage.vue

@@ -118,4 +118,4 @@
 			}
 		}
 	}
-</style>
+</style>

src/main.ts

@@ -22,7 +22,6 @@ 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 {showSplashError} from "@/util/splash";
 import { VueClipboard } from '@soerenmartius/vue3-clipboard';

src/scss/_leaflet.scss

@@ -10,8 +10,12 @@
 
 	/* Workaround for focus outlines until https://github.com/Leaflet/Leaflet/pull/7259 gets released */
 	* {
-		@include focus {
+		&:focus {
 			outline-style: auto !important;
 		}
+
+		@include focus-reset {
+			outline-style: none !important;
+		}
 	}
 }

src/scss/_mixins.scss

@@ -1,12 +1,6 @@
-/*
+/* Mixin for resetting :focus styles on browsers supporting :focus-visible */
- Adds styles for both :focus-visible and .focus-visible for maximum browser support.
+@mixin focus-reset() {
-*/
+	&:focus:not(:focus-visible) {
-@mixin focus() {
-	&:focus-visible {
-		@content;
-	}
-
-	&.focus-visible {
 		@content;
 	}
 }
@@ -67,13 +61,8 @@
 	color: var(--text-disabled);
 	cursor: not-allowed;
 
-	&:hover, &:active {
+	&:hover, &:active, &:focus {
 		background-color: var(--background-disabled);
 		color: var(--text-disabled);
 	}
-
+}
-	@include focus {
-		background-color: var(--background-disabled);
-		color: var(--text-disabled);
-	}
-}

src/scss/_placeholders.scss

@@ -23,10 +23,15 @@
 		@include button-hovered;
 	}
 
-	@include focus {
+	&:focus {
 		@include button-focused;
 	}
 
+	&:focus:not(:focus-visible) {
+		outline-style: none;
+		z-index: auto;
+	}
+
 	&:active {
 		@include button-active;
 	}
@@ -49,4 +54,4 @@
 	h2:first-child {
 		margin-top: 0;
 	}
-}
+}

src/scss/leaflet/_controls.scss

@@ -338,11 +338,7 @@
 	animation: fade 0.3s linear;
 	animation-fill-mode: forwards;
 
-	&:hover, &:active {
+	&:hover, &:active, &:focus {
-		background-color: var(--background-base);
-	}
-
-	@include focus {
 		background-color: var(--background-base);
 	}
 

src/scss/leaflet/_markers.scss

@@ -58,15 +58,11 @@
 		overflow: hidden;
 
 		@at-root .leaflet-pane--show-labels .marker__label {
-			display: block;
+			display: block !important;
 		}
 	}
 
-	&:hover {
+	&:hover, &:focus {
-		z-index: 1000;
-	}
-
-	@include focus {
 		z-index: 1000;
 
 		.marker__label {
@@ -75,8 +71,16 @@
 		}
 	}
 
-	&:hover .marker__label {
+	&:focus .marker__label {
-		display: block;
+		outline: auto;
+	}
+
+	@include focus-reset {
+		z-index: auto;
+
+		.marker__label {
+			display: none;
+		}
 	}
 
 	@at-root {

src/scss/style.scss

@@ -73,11 +73,15 @@ input {
 	border: 0.2rem solid var(--border-color);
 	border-radius: 0.3rem;
 
-	@include focus {
+	&:focus {
 		color: var(--text-emphasis);
 		outline-color: var(--text-emphasis);
 	}
 
+	@include focus-reset {
+		color: var(--text-base);
+	}
+
 	&[disabled] {
 		background-color: var(--background-disabled);
 		border-color: var(--border-color);
@@ -85,8 +89,16 @@ input {
 	}
 }
 
-.js-focus-visible :focus:not(.focus-visible):not(:focus-visible) {
+:focus:not(:focus-visible) {
-  outline: none;
+	outline: none !important;
+}
+
+:focus {
+	outline: var(--outline-focus) auto thick !important;
+}
+
+:focus-visible {
+	outline: var(--outline-focus) auto thick !important;
 }
 
 .checkbox {
@@ -131,16 +143,20 @@ input {
 			}
 		}
 
-		@include focus {
+		&:focus ~ span:after {
+			content: '';
+			outline: var(--outline-focus) auto thick;
+			position: absolute;
+			top: 0;
+			right: -0.5rem;
+			bottom: 0;
+			left: -0.5rem;
+			border-radius: 0.5rem;
+		}
+
+		@include focus-reset {
 			& ~ span:after {
-				content: '';
+				content: none;
-				outline: var(--outline-focus) 2px solid;
-				position: absolute;
-				top: 0;
-				right: -0.5rem;
-				bottom: 0;
-				left: -0.5rem;
-				border-radius: 0.5rem;
 			}
 		}
 	}
@@ -206,6 +222,11 @@ input {
 			@include button-focused;
 		}
 
+		&:focus:not(:focus-visible) + label {
+			z-index: auto;
+			outline: none !important;
+		}
+
 		&:active + label {
 			@include button-active;
 		}