shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: add global focus-visible outline for keyboard navigation accessibility

Browse Source 
Adds a consistent focus ring (accent-dim color, 2px) on all focusable
elements when navigated via keyboard (:focus-visible). Mouse/touch clicks
no longer show the default browser outline (:focus:not(:focus-visible)).

Elements with existing Tailwind focus:ring-* classes are unaffected since
they already handle their own focus styling.
This commit is contained in:
Nicolas Varrot
2026-02-13 14:57:39 +00:00
parent 74278476e4
commit a44b6db77d
1 changed files with 13 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/index.css
View File

@@ -44,6 +44,19 @@
--pc-separator: rgba(255,255,255,0.05); --pc-separator: rgba(255,255,255,0.05);
} }
/* Global focus-visible ring for keyboard navigation (a11y).
Elements with Tailwind focus:ring-* already handle their own styling,
so we target elements that don't have explicit ring classes. */
:focus-visible {
outline: 2px solid var(--pc-accent-dim);
outline-offset: 2px;
}
/* Remove default outline for mouse/touch users */
:focus:not(:focus-visible) {
outline: none;
}
* { * {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--pc-scrollbar-thumb) var(--pc-scrollbar-track); scrollbar-color: var(--pc-scrollbar-thumb) var(--pc-scrollbar-track);