From 1fb37f2f8e93bd60e62ef79c79c92b74ea847876 Mon Sep 17 00:00:00 2001 From: Emmanuel Pelletier Date: Wed, 24 Jul 2024 14:23:55 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(keyboard)=20tinker=20(again)=20wit?= =?UTF-8?q?h=20the=20global=20focus=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - setting an invisible outline by default for better transitions - excluding the select containers from keyboard focus rings --- src/frontend/src/styles/index.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/styles/index.css b/src/frontend/src/styles/index.css index c4e0bcea..92069f66 100644 --- a/src/frontend/src/styles/index.css +++ b/src/frontend/src/styles/index.css @@ -8,16 +8,16 @@ body, } * { - outline: none; + outline: 2px solid transparent; } -[data-rac][data-focus-visible]:not(label), +[data-rac][data-focus-visible]:not(label, .react-aria-Select), :is(a, button, input[type='text'], select, textarea):not( [data-rac] ):focus-visible { - outline: 2px solid black; + outline: 2px solid var(--colors-focus-ring); outline-offset: 1px; - outline-color: var(--colors-focus-ring); +} @media (prefers-reduced-motion: reduce) { * {