mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 10:00:17 +05:30
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:
@@ -103,6 +103,11 @@
|
||||
color: var(--gray-600, #4b5563);
|
||||
}
|
||||
|
||||
.sidebar-panel-close:focus-visible {
|
||||
outline: 2px solid var(--primary-dark, #5661b3);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.sidebar-panel-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
@@ -4232,3 +4232,89 @@ body.theme-github .mermaid {
|
||||
|
||||
/* Command Palette Styles */
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user