Skip to content

Add accessibility settings panel and fix focus/semantic blockers#523

Open
aidanboop wants to merge 5 commits intojeffreywallphd:mainfrom
aidanboop:main
Open

Add accessibility settings panel and fix focus/semantic blockers#523
aidanboop wants to merge 5 commits intojeffreywallphd:mainfrom
aidanboop:main

Conversation

@aidanboop
Copy link
Copy Markdown
Collaborator

Summary

  • Accessibility settings page (/accessibility route): toggles for High Contrast, Reduce Motion, Large Text, Enhanced Focus, and Dark Mode — persisted to config via AccessibilitySettings in ConfigManager
  • Focus/keyboard fixes: removed all outline: none violations; added proper button:focus-visible and textarea:focus-visible focus styles; added enhanced-focus class with larger outline + glow
  • Semantic HTML fixes: converted ChatbotToggle from non-interactive div to <button> with aria-label/aria-expanded; added aria-label and aria-expanded to hamburger menu button
  • Screen reader support: added .sr-only utility class, skip-to-main-content link (<a href="#main-content" class="skip-link">), and id="main-content" on <main> in LoadedLayout.jsx
  • Body class system: App.jsx applies high-contrast, reduce-motion, large-text, enhanced-focus body classes on load from saved config; AccessibilitySettings.jsx toggles them live
  • CLAUDE.md: added project session reference for onboarding and future AI-assisted development
  • GitHub Actions: Claude Code Review and PR Assistant workflows

Test plan

  • Navigate to Settings → open /accessibility route and verify all 5 toggles render and persist across app restarts
  • Toggle High Contrast in both light and dark mode — verify yellow-on-black (dark) and high-contrast vars (light)
  • Toggle Large Text — verify font-size: 120% applied to body
  • Toggle Reduce Motion — verify animations/transitions disabled
  • Toggle Enhanced Focus — verify larger outline/glow on focused elements
  • Tab through the app and confirm every interactive element has a visible focus indicator
  • Verify skip link appears on first Tab press and jumps to #main-content
  • Confirm ChatbotToggle and hamburger menu are keyboard-operable

🤖 Generated with Claude Code

aidanboop and others added 5 commits February 25, 2026 11:59
…8774587

Add claude GitHub actions 1772038774587
- Remove all outline:none violations from index.css; add proper
  button:focus-visible and textarea:focus-visible rules
- Add sr-only, skip-link, high-contrast, large-text, reduce-motion,
  enhanced-focus, and toggle-switch utility CSS classes
- Add AccessibilitySettings to ConfigManager defaultConfig
- Apply accessibility body classes on app load in App.jsx
- Add /accessibility route and sidebar nav link in Loaded.jsx
- Add skip link and id="main-content" to LoadedLayout.jsx
- Convert ChatbotToggle div.circle to semantic button with aria attrs
- Fix hamburger button with aria-label and aria-expanded
- Create AccessibilitySettings.jsx page with toggles for HighContrast,
  ReduceMotion, LargeText, EnhancedFocus, and DarkMode
- Add CLAUDE.md project reference for future sessions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Documents .toggle-switch and .toggle-slider CSS classes used by AccessibilitySettings.jsx.
Corrects package-lock.json name to match repo name (OpenFinAL-TeamAcc).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant