Skip to content

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

Merged
soleilector merged 10 commits intojeffreywallphd:mainfrom
aidanboop:main
Apr 16, 2026
Merged

Add accessibility settings panel and fix focus/semantic blockers#523
soleilector merged 10 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
aidanboop and others added 5 commits April 13, 2026 10:54
…y text slider

- Fix forge.config.js: add asarUnpack for native modules, extraResource for
  slideshows/voiceovers, app icon, deb/rpm/squirrel maker metadata, remove
  invalid root mainConfig property
- Fix production slideshows path in main.js to match extraResource output
- Replace accessibility large-text toggle with a continuous text-size slider
  (80%–150%) using CSS --text-scale custom property

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add themes.js with 6 color themes (Default, Ocean, Forest, Sunset,
  Midnight, Solarized), each with light and dark variants
- Replace text size slider with simple Larger Text toggle
- Add Color Theme dropdown and Dark Variant toggle to accessibility page
- Apply saved color theme on app startup via shared theme utilities
- Sync Dark Variant toggle with existing DarkMode config and body class

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Not relevant to upstream; removing to reduce repo clutter.
Covers Windows, Debian/Ubuntu, Fedora/RHEL, macOS, plus first-launch setup.
@aidanboop
Copy link
Copy Markdown
Collaborator Author

Summary

  • Accessibility settings page (/accessibility route): toggles for High Contrast, Reduce Motion, Large Text, Enhanced Focus, and Dark Mode — persisted via AccessibilitySettings in ConfigManager. Applied live by App.jsx on load and by AccessibilitySettings.jsx on toggle.
  • Color theme system integrated into the accessibility settings panel.
  • Focus / keyboard fixes: removed all outline: none violations; added button:focus-visible / textarea:focus-visible styles; enhanced-focus class adds a larger outline + glow.
  • Semantic HTML fixes: ChatbotToggle converted from non-interactive div to <button> with aria-label / aria-expanded; same aria attributes added to the hamburger menu button.
  • Screen reader support: .sr-only utility, skip-to-main-content link, and id="main-content" on <main> in LoadedLayout.jsx.
  • Electron Forge standalone installer: configured to produce OpenFinAL-Setup.exe (Windows), .deb, .rpm, and macOS .zip artifacts via npm run make. Includes a text-size slider refinement.
  • INSTALL.md: per-platform installation instructions and first-launch walkthrough.

Test plan

  • Open /accessibility and verify all toggles render, persist across restarts, and apply their body classes live
  • High Contrast in both light and dark mode (yellow-on-black vs light high-contrast vars)
  • Large Text applies font-size: 120% to body
  • Reduce Motion disables animations/transitions
  • Enhanced Focus adds larger outline/glow to focused elements
  • Tab through the app — every interactive element has a visible focus indicator
  • Skip link appears on first Tab and jumps to #main-content
  • ChatbotToggle and hamburger menu are keyboard-operable
  • npm run make produces installer artifacts on the host platform
  • First-launch flow on a clean install matches INSTALL.md

Copy link
Copy Markdown
Collaborator

@soleilector soleilector left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved

@soleilector soleilector merged commit 857c4d7 into jeffreywallphd:main Apr 16, 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