studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄(keyboard) tinker (again) with the global focus styles

Browse Source 
- setting an invisible outline by default for better transitions
- excluding the select containers from keyboard focus rings
This commit is contained in:
Emmanuel Pelletier
2024-07-24 14:23:55 +02:00
parent eab64b7197
commit 1fb37f2f8e
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/frontend/src/styles/index.css
View File

@@ -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( :is(a, button, input[type='text'], select, textarea):not(
[data-rac] [data-rac]
):focus-visible { ):focus-visible {
outline: 2px solid black; outline: 2px solid var(--colors-focus-ring);
outline-offset: 1px; outline-offset: 1px;
outline-color: var(--colors-focus-ring); }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
* { * {