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/react_button/react_button.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/components/react_button/react_button.vue') diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index e30f6b68..885869f9 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -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; } -- cgit v1.2.3-70-g09d2