Fix accessibility issues in Connection Dialog - add proper ARIA labels and semantic structure

[Copilot]

This PR addresses accessibility violations in the Connection Dialog's "Saved Connections" section where items lack proper names and roles for screen readers, violating WCAG 4.1.2 (Name, Role, Value).

Problem

The accessibility inspection tool revealed that connection items in the "Saved Connections" section had:

• Missing accessible names for screen readers
• Incorrect role="group" without proper labeling
• Inconsistent markup between Saved and Recent Connections sections

Solution

Added proper ARIA attributes:

• aria-label="Connect to {connectionName}" on each connection card
• aria-label="Delete saved connection for {connectionName}" on delete buttons
• role="region" and aria-labelledby for section landmarks

Improved semantic structure:

• Removed problematic Tree component that was adding role="group" without proper naming
• Made both Saved and Recent Connections use consistent container markup
• Added proper heading IDs for aria-labelledby references

Changes Made

// Before: Only title attribute
<Card title={locConstants.connectionDialog.connectTo(displayName)} role="button">

// After: Proper aria-label for screen readers  
<Card 
  title={locConstants.connectionDialog.connectTo(displayName)}
  aria-label={locConstants.connectionDialog.connectTo(displayName)}
  role="button"
>

// Before: Inconsistent Tree component
<Tree>
  <ConnectionCard ... />
</Tree>

// After: Consistent semantic structure
<div className={styles.main} role="region" aria-labelledby="saved-connections-heading">
  <ConnectionCard ... />
</div>

Accessibility Improvements

✅ Name: Each connection now announces "Connect to {connection name}"
✅ Role: Maintains appropriate role="button" for interactive elements
✅ Value: Not applicable for these connection items
✅ Structure: Proper region landmarks with descriptive labels
✅ Consistency: Identical accessibility experience across both sections

Testing

• ✅ Build passes without errors
• ✅ ESLint validation successful
• ✅ TypeScript compilation clean
• ✅ Localization constants working correctly

Users should verify with screen readers that connection items now properly announce their purpose and delete buttons specify which connection they will remove.

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
  • Triggering command: /usr/local/bin/node ./out/test/unit/runTest.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Benjin]

@copilot the Refresh string can go under "common" instead of "connectionDialog" in the constants file.

[Copilot]

@copilot the Refresh string can go under "common" instead of "connectionDialog" in the constants file.

I've moved the "Refresh" string to the common section instead of connectionDialog as you suggested. This allows it to be reused across components. I also added proper aria-label and title attributes to the refresh buttons for better accessibility. Changes are in commit 6c20c6c.

[github-actions]

PR Changes

Category	Main Branch	PR Branch	Difference
Code Coverage	59.60%	59.52%	⚪ 0.00%
VSIX Size	15476 KB	15489 KB	⚪ 13 KB ( 0% )
Webview Bundle Size	3768 KB	3756 KB	⚪ -12 KB ( 0% )