From 97951fccfdce726c350ab633acc45213d675adb9 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Wed, 19 Jan 2022 19:45:38 -0500 Subject: 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 --- src/components/retweet_button/retweet_button.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src/components/retweet_button/retweet_button.vue') diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index ed84066d..d88adacc 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -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; } -- cgit v1.2.3-70-g09d2