a11y: add comprehensive focus and accessibility styles

Accessibility improvements:
- Add global focus-visible styles for keyboard navigation
- Add focus-visible for sidebar panel close button
- Add skip-link styles for screen reader users
- Add .sr-only class for visually hidden content
- Add prefers-reduced-motion support for users sensitive to motion
- Add prefers-contrast: high support for high contrast mode

Amit Haridas
This commit is contained in:
2026-03-15 00:42:41 +05:30
parent 7723b302ea
commit daae83bcf4
2 changed files with 91 additions and 0 deletions
+5
View File
@@ -103,6 +103,11 @@
color: var(--gray-600, #4b5563); color: var(--gray-600, #4b5563);
} }
.sidebar-panel-close:focus-visible {
outline: 2px solid var(--primary-dark, #5661b3);
outline-offset: 2px;
}
.sidebar-panel-content { .sidebar-panel-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
+86
View File
@@ -4232,3 +4232,89 @@ body.theme-github .mermaid {
/* Command Palette Styles */ /* Command Palette Styles */
/* Command Palette styles moved to styles-modern.css */ /* Command Palette styles moved to styles-modern.css */
/* ============================================
Global Focus & Accessibility Styles
============================================ */
/* Remove default focus outline, use focus-visible instead */
*:focus {
outline: none;
}
/* Add visible focus indicator for keyboard navigation */
*:focus-visible {
outline: 2px solid var(--primary-dark, #5661b3);
outline-offset: 2px;
}
/* Button focus styles */
button:focus-visible {
outline: 2px solid var(--primary-dark, #5661b3);
outline-offset: 2px;
}
/* Link focus styles */
a:focus-visible {
outline: 2px solid var(--primary-dark, #5661b3);
outline-offset: 2px;
border-radius: 2px;
}
/* Input focus styles */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--primary-dark, #5661b3);
outline-offset: 1px;
}
/* Skip link for accessibility */
.skip-link {
position: absolute;
top: -100px;
left: 0;
background: var(--primary-dark, #5661b3);
color: white;
padding: 8px 16px;
z-index: 10000;
text-decoration: none;
font-weight: 600;
}
.skip-link:focus {
top: 0;
}
/* Visually hidden but accessible */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.tab-close:focus-visible,
.toolbar button:focus-visible,
.sidebar-icon:focus-visible {
outline-width: 3px;
}
}