mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-09-07 08:26:51 +00:00
3.4 KiB
3.4 KiB
Related GitHub Issue
Closes: #3186
Roo Code Task Context (Optional)
No Roo Code task context for this PR
Description
This PR implements comprehensive accessibility improvements for the @ context menu to make it fully accessible to screen readers. The issue reported that when users type '@' to trigger the file insertion context menu, the menu appears visually but is not announced by screen readers, making it inaccessible to users with visual impairments.
Key implementation details:
- Added proper ARIA roles (role="listbox" for menu, role="option" for items)
- Implemented ARIA states (aria-expanded, aria-selected, aria-activedescendant)
- Added live region for real-time announcements to screen readers
- Enhanced keyboard navigation with proper focus management
- Added descriptive labels and instructions for screen reader users
Design choices:
- Used aria-live="polite" to avoid interrupting screen reader flow
- Positioned live region off-screen using standard screen reader techniques
- Maintained existing visual design while adding semantic accessibility
- Ensured announcements are contextual and informative
Test Procedure
Manual testing with screen readers:
- Open VSCode with a screen reader (VoiceOver, NVDA, or JAWS)
- Focus on the chat input field
- Type '@' to trigger the context menu
- Verify screen reader announces: "File insertion menu opened"
- Use arrow keys to navigate menu items
- Verify each item is announced with position info (e.g., "File: example.txt, 1 of 5")
- Press Escape to close menu
- Verify screen reader announces: "File insertion menu closed"
Keyboard navigation testing:
- Arrow keys should navigate through selectable options
- Enter/Tab should select the highlighted option
- Escape should close the menu and return focus to textarea
- Menu should maintain proper focus management
Pre-Submission Checklist
- Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
- Scope: My changes are focused on the linked issue (one major feature/fix per PR).
- Self-Review: I have performed a thorough self-review of my code.
- Testing: New and/or updated tests have been added to cover my changes (if applicable).
- Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
- Contribution Guidelines: I have read and agree to the Contributor Guidelines.
Screenshots / Videos
No UI changes in this PR - accessibility improvements are semantic and announced by screen readers
Documentation Updates
- No documentation updates are required.
Additional Notes
Accessibility standards compliance:
- Follows WCAG 2.1 AA guidelines for keyboard navigation and screen reader support
- Implements WAI-ARIA best practices for listbox pattern
- Uses semantic HTML and ARIA attributes appropriately
Technical considerations:
- Changes are backward compatible and don't affect existing functionality
- Live region announcements are non-intrusive and contextual
- Implementation follows existing code patterns and conventions
Get in Touch
@roomote-agent