complete story 9.10 with qa tests
This commit is contained in:
@@ -702,3 +702,32 @@ img, video, iframe {
|
||||
@apply text-lg sm:text-xl;
|
||||
@apply font-semibold;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Accessibility Styles (Story 9.10)
|
||||
WCAG 2.1 AA Compliance
|
||||
========================================================================== */
|
||||
|
||||
/* Focus styles - visible gold outline for keyboard navigation */
|
||||
:focus-visible {
|
||||
@apply outline-2 outline-offset-2 outline-gold;
|
||||
}
|
||||
|
||||
/* Skip link - hidden until focused, then appears at top-start */
|
||||
.skip-link {
|
||||
@apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4
|
||||
focus:bg-gold focus:text-navy focus:px-4 focus:py-2 focus:rounded-md
|
||||
focus:font-semibold focus:z-[100];
|
||||
}
|
||||
|
||||
/* Reduced motion - respect user preference for reduced animations */
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user