From daae83bcf4caaa13446eaee6c20183955b4a5f37 Mon Sep 17 00:00:00 2001
From: Amit Haridas <amit.wh@gmail.com>
Date: Sun, 15 Mar 2026 00:42:41 +0530
Subject: [PATCH] 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
---
 src/styles-sidebar.css |  5 +++
 src/styles.css         | 86 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 91 insertions(+)

diff --git a/src/styles-sidebar.css b/src/styles-sidebar.css
index 6b3f36a..e5c0941 100644
--- a/src/styles-sidebar.css
+++ b/src/styles-sidebar.css
@@ -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;
diff --git a/src/styles.css b/src/styles.css
index 9f48055..d7da4a2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -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;
+    }
+}