sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Use :focus-visible instead of :focus for focus markers

Browse source 
In this way, after the user clicked with a pointer and moved that
pointer away, the focus marker will no longer show a focused style.

As Safari remains the only major browser engine that does not support
:focus-visible, a fallback to :focus is used if there is no browser
support for :focus-visible.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
This commit is contained in:
Tusooa Zhu 2022-01-19 19:45:38 -05:00 committed by HJ
parent 378ed3682e
commit 97951fccfd
5 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/extra_buttons/extra_buttons.vue
View file

@ -168,11 +168,12 @@
color: var(--text, $fallback--text);
}
.focus-marker {
.focus-marker,
&:focus:not(:focus-visible):not(:hover) .focus-marker {
visibility: hidden;
}
&:hover, &:focus {
&:hover, &:focus, &:focus-visible {
.focus-marker {
visibility: visible;
}

9
src/components/favorite_button/favorite_button.vue
View file

@ -78,11 +78,16 @@
color: var(--cOrange, $fallback--cOrange);
}
.focus-marker {
.focus-marker,
&:focus:not(:focus-visible):not(:hover) .focus-marker {
visibility: hidden;
}
&:hover, &:focus {
&:focus:not(:focus-visible):not(:hover) .active-marker {
visibility: visible;
}
&:hover, &:focus, &:focus-visible {
.focus-marker {
visibility: visible;
}

5
src/components/react_button/react_button.vue
View file

@ -141,11 +141,12 @@
color: var(--text, $fallback--text);
}
.focus-marker {
.focus-marker,
&:focus:not(:focus-visible):not(:hover) .focus-marker {
visibility: hidden;
}
&:hover, &:focus {
&:hover, &:focus, &:focus-visible {
.focus-marker {
visibility: visible;
}

5
src/components/reply_button/reply_button.vue
View file

@ -67,11 +67,12 @@
color: var(--cBlue, $fallback--cBlue);
}
.focus-marker {
.focus-marker,
&:focus:not(:focus-visible):not(:hover) .focus-marker {
visibility: hidden;
}
&:hover, &:focus {
&:hover, &:focus, &:focus-visible {
.focus-marker {
visibility: visible;
}

9
src/components/retweet_button/retweet_button.vue
View file

@ -85,11 +85,16 @@
color: var(--cGreen, $fallback--cGreen);
}
.focus-marker {
.focus-marker,
&:focus:not(:focus-visible):not(:hover) .focus-marker {
visibility: hidden;
}
&:hover, &:focus {
&:focus:not(:focus-visible):not(:hover) .active-marker {
visibility: visible;
}
&:hover, &:focus, &:focus-visible {
.focus-marker {
visibility: visible;
}