From 636bebd23794443d3e1252b8176182f0dff67678 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Thu, 22 Jul 2021 02:48:09 +0100 Subject: [PATCH] Focus style improvements - Replace js :focus-visible polyfill with css - Improve fallback :focus styles --- index.html | 2 +- package.json | 1 - src/components/Map.vue | 26 ++++++++++------- src/components/chat/ChatMessage.vue | 2 +- src/main.ts | 1 - src/scss/_leaflet.scss | 6 +++- src/scss/_mixins.scss | 21 ++++---------- src/scss/_placeholders.scss | 9 ++++-- src/scss/leaflet/_controls.scss | 6 +--- src/scss/leaflet/_markers.scss | 20 ++++++++----- src/scss/style.scss | 45 +++++++++++++++++++++-------- 11 files changed, 80 insertions(+), 59 deletions(-) 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; }