Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Focus style improvements

Browse Source 
- Replace js :focus-visible polyfill with css
- Improve fallback :focus styles
This commit is contained in:
James Lyne 2021-07-22 02:48:09 +01:00
parent 79dfea446b
commit 636bebd237
11 changed files with 80 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -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 */

1
package.json
View File

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

26
src/components/Map.vue
View File

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

2
src/components/chat/ChatMessage.vue
View File

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

1
src/main.ts
View File

@ -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';

6
src/scss/_leaflet.scss
View File

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

21
src/scss/_mixins.scss
View File

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

9
src/scss/_placeholders.scss
View File

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

6
src/scss/leaflet/_controls.scss
View File

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

20
src/scss/leaflet/_markers.scss
View File

@ -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 {

45
src/scss/style.scss
View File

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