Skip to content

fix: improve UX/a11y across webview UI components#80

Closed
fedevgonzalez wants to merge 1 commit intopablodelucca:mainfrom
fedevgonzalez:fix/ux-a11y-improvements
Closed

fix: improve UX/a11y across webview UI components#80
fedevgonzalez wants to merge 1 commit intopablodelucca:mainfrom
fedevgonzalez:fix/ux-a11y-improvements

Conversation

@fedevgonzalez
Copy link

Summary

  • Add focus-visible outline for keyboard navigation on all buttons
  • Add prefers-reduced-motion media query to disable pulse animation
  • Remove wildcard * font-family rule (already set on html, body)
  • Extract TOOL_OVERLAY_LABEL_Y_OFFSET constant (was magic number -24)
  • Increase status dot from 6px to 8px for better visibility
  • Add aria-label to close agent button for screen readers
  • Add CSS variable fallbacks for non-VS Code environments (var(--vscode-foreground, var(--pixel-text)))
  • Increase button padding for larger click targets (BottomToolbar, ZoomControls)
  • Add Escape key to close SettingsModal
  • Use × consistently for close buttons, for checkbox state

Test plan

  • Verify keyboard navigation works with Tab/Shift+Tab through toolbar buttons
  • Check that focus-visible outline only appears on keyboard focus, not mouse clicks
  • Confirm SettingsModal closes on Escape key
  • Test with prefers-reduced-motion: reduce — pulse animation should be disabled
  • Open webview in standalone/browser context — text should be visible (not transparent)

🤖 Generated with Claude Code

- Add focus-visible outline for keyboard navigation on all buttons
- Add prefers-reduced-motion media query to disable pulse animation
- Replace wildcard font-family rule with scoped html/body selector
- Extract TOOL_OVERLAY_LABEL_Y_OFFSET constant (was magic number -24)
- Increase status dot size from 6px to 8px for better visibility
- Add aria-label to close agent button for screen readers
- Add CSS variable fallbacks for non-VS Code environments
  (e.g. var(--vscode-foreground, var(--pixel-text)))
- Increase button padding for larger touch/click targets
- Add Escape key to close SettingsModal
- Use × (multiplication sign) consistently for close buttons
- Use ✓ for checkbox checked state instead of X

Co-Authored-By: Claude Opus 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