Skip to content

feat(ui): keyboard shortcuts, perf monitor, toast system, theme toggle, WCAG a11y#305

Open
natiixnt wants to merge 1 commit intoruvnet:mainfrom
natiixnt:feat/ui-enhancements
Open

feat(ui): keyboard shortcuts, perf monitor, toast system, theme toggle, WCAG a11y#305
natiixnt wants to merge 1 commit intoruvnet:mainfrom
natiixnt:feat/ui-enhancements

Conversation

@natiixnt
Copy link
Copy Markdown

Summary

  • Keyboard shortcuts system - press ? for overlay with all shortcuts (1-8 tab switching, T theme, P perf monitor)
  • Performance monitor - real-time FPS, memory, latency with sparkline charts, draggable panel
  • Toast notification system - 4 types (success/error/warning/info), stacking, auto-dismiss with progress bar, pause on hover
  • Dark/light theme toggle - button in header, localStorage persistence, respects system preference
  • WCAG accessibility - skip-to-content link, ARIA roles/attributes on all tabs and panels, arrow key navigation, focus-visible outlines
  • ESLint config for UI directory with security and quality rules

Test plan

  • Open ui/index.html in browser, verify page loads without console errors
  • Press ? to open keyboard shortcuts overlay, press Esc to close
  • Press 1-8 to switch tabs, verify correct tab activates
  • Press P to toggle performance monitor, verify FPS/memory display
  • Press T to toggle dark/light theme, verify persistence across reload
  • Tab through navigation with keyboard, verify focus rings and arrow key navigation
  • Verify toast notifications appear on backend status changes
  • Run screen reader (VoiceOver) to verify ARIA landmarks and labels

…oggle, and WCAG accessibility

- Keyboard shortcuts overlay (press ? for help, 1-8 for tabs, T for theme, P for perf)
- Real-time performance monitor with FPS, memory, latency sparklines (draggable)
- Enhanced toast notification system with stacking, auto-dismiss, progress bars
- Dark/light theme toggle with localStorage persistence and system preference detection
- WCAG accessibility: skip-to-content link, ARIA roles/attributes on tabs and panels,
  arrow key navigation in tab bar, focus-visible outlines
- ESLint config for UI directory with security and quality rules
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