Fix accessibility: Add proper ARIA attributes to Saved Connection items #19597
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR addresses the accessibility issue where items in the "Saved Connection" section lacked proper names and had incorrect role attributes, violating WCAG 4.1.2 (Name, Role, Value) requirements.
Problem
Users relying on screen readers and other assistive technologies could not properly identify connection items because:
Solution
Added comprehensive accessibility attributes to the
ConnectionCard
component:1. Proper ARIA Attributes
role="button"
- Cards are now identified as interactive buttonsaria-label="Connect to {displayName}"
- Descriptive accessible namestabIndex="0"
- Full keyboard accessibilityaria-label
matching tooltips2. Semantic List Structure
role="list"
on saved connections containerrole="listitem"
wrapper for each connection cardaria-label
to identify both saved and recent connection lists3. Keyboard Navigation
onKeyDown
handlerExpected Screen Reader Experience
Changes Made
src/reactviews/pages/ConnectionDialog/connectionsListContainer.tsx
Testing
Fixes #18654.
Warning
Firewall rules blocked me from connecting to one or more addresses
I tried to connect to the following addresses, but was blocked by firewall rules:
update.code.visualstudio.com
/usr/local/bin/node ./out/test/unit/runTest.js --reporter=dot
(dns block)If you need me to access, download, or install something from one of these locations, you can either:
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.