diff --git a/index.html b/index.html
index 1f259ef..bca2207 100644
--- a/index.html
+++ b/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 */
diff --git a/package.json b/package.json
index f5a04a1..15c03cd 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Map.vue b/src/components/Map.vue
index fbf6a71..3b23e71 100644
--- a/src/components/Map.vue
+++ b/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: '';
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- border: 0.2rem solid #cccccc;
- display: block;
- z-index: 2000;
- pointer-events: none;
+ content: none;
}
}
}
diff --git a/src/components/chat/ChatMessage.vue b/src/components/chat/ChatMessage.vue
index e3e3590..c804075 100644
--- a/src/components/chat/ChatMessage.vue
+++ b/src/components/chat/ChatMessage.vue
@@ -118,4 +118,4 @@
}
}
}
-
\ No newline at end of file
+
diff --git a/src/main.ts b/src/main.ts
index 67368c2..8f34217 100644
--- a/src/main.ts
+++ b/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';
diff --git a/src/scss/_leaflet.scss b/src/scss/_leaflet.scss
index 5a5b4ac..3722bc6 100644
--- a/src/scss/_leaflet.scss
+++ b/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;
+ }
}
}
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index e148554..6065bee 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -1,12 +1,6 @@
-/*
- Adds styles for both :focus-visible and .focus-visible for maximum browser support.
-*/
-@mixin focus() {
- &:focus-visible {
- @content;
- }
-
- &.focus-visible {
+/* Mixin for resetting :focus styles on browsers supporting :focus-visible */
+@mixin focus-reset() {
+ &:focus:not(: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);
- }
-}
\ No newline at end of file
+}
diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss
index 8a03bd1..c480dc7 100644
--- a/src/scss/_placeholders.scss
+++ b/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;
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index fc94e4d..8246bf9 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -338,11 +338,7 @@
animation: fade 0.3s linear;
animation-fill-mode: forwards;
- &:hover, &:active {
- background-color: var(--background-base);
- }
-
- @include focus {
+ &:hover, &:active, &:focus {
background-color: var(--background-base);
}
diff --git a/src/scss/leaflet/_markers.scss b/src/scss/leaflet/_markers.scss
index 7bba50b..6b32b17 100644
--- a/src/scss/leaflet/_markers.scss
+++ b/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 {
- z-index: 1000;
- }
-
- @include focus {
+ &:hover, &:focus {
z-index: 1000;
.marker__label {
@@ -75,8 +71,16 @@
}
}
- &:hover .marker__label {
- display: block;
+ &:focus .marker__label {
+ outline: auto;
+ }
+
+ @include focus-reset {
+ z-index: auto;
+
+ .marker__label {
+ display: none;
+ }
}
@at-root {
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 73fa00d..68a4198 100644
--- a/src/scss/style.scss
+++ b/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) {
- outline: none;
+:focus:not(:focus-visible) {
+ 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: '';
- outline: var(--outline-focus) 2px solid;
- position: absolute;
- top: 0;
- right: -0.5rem;
- bottom: 0;
- left: -0.5rem;
- border-radius: 0.5rem;
+ content: none;
}
}
}
@@ -206,6 +222,11 @@ input {
@include button-focused;
}
+ &:focus:not(:focus-visible) + label {
+ z-index: auto;
+ outline: none !important;
+ }
+
&:active + label {
@include button-active;
}