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>
@soleilector soleilector added MIS 3200 Spring 2026 A label to assign epics to the MIS 3200 Spring 2025 class project Team 3 Use this label to designate that a user story/task belongs to a particular team. labels Apr 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

MIS 3200 Spring 2026 A label to assign epics to the MIS 3200 Spring 2025 class project Team 3 Use this label to designate that a user story/task belongs to a particular team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants