diff options
| author | Tusooa Zhu <tusooa@kazv.moe> | 2022-01-19 19:45:38 -0500 |
|---|---|---|
| committer | HJ <30-hj@users.noreply.git.pleroma.social> | 2022-08-22 20:28:52 +0000 |
| commit | 97951fccfdce726c350ab633acc45213d675adb9 (patch) | |
| tree | 0612f38f93d24537635a727a1ddb4806455f7fbf /src/components/favorite_button | |
| parent | 378ed3682e56dc49ac74a9ab66b6ff9878d48882 (diff) | |
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
Diffstat (limited to 'src/components/favorite_button')
| -rw-r--r-- | src/components/favorite_button/favorite_button.vue | 9 |
1 files changed, 7 insertions, 2 deletions
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index 4015e1e6..01db63be 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -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; } |