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

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
commit 97951fccfd
5 changed files with 23 additions and 10 deletions

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