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);
|
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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user