feat(ui): respect prefers-reduced-motion + accent focus rings
CI / backend (pull_request) Successful in 1m8s
CI / frontend (pull_request) Successful in 27s
Security / secrets (pull_request) Successful in 5s
Security / dependencies (pull_request) Successful in 1m13s

Slice 3 (polish): honour the OS reduce-motion setting (near-instant, no large
transitions) and add a consistent accent-coloured :focus-visible ring for
keyboard users. Baseline a11y per the design brief.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
cesnimda
2026-07-01 20:16:21 +02:00
parent dde23c980c
commit 4a24384f52
+23
View File
@@ -92,6 +92,29 @@
}
}
@layer base {
/* Consistent, visible focus ring using the accent token (keyboard users). */
:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
/*
Respect the OS "reduce motion" setting — near-instant, no large transitions.
Baseline accessibility (the deeper a11y pass is deferred; see the design brief).
*/
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
@layer utilities {
.sr-only {
position: absolute;