Skip to content

Fix accessibility: Add accessible names to refresh buttons in Connection Dialog #19598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

Copilot
Copy link

@Copilot Copilot AI commented Jun 13, 2025

This PR fixes an accessibility issue where refresh buttons in the Connection Dialog lacked accessible names, violating WCAG 4.1.2 (Name, Role, Value) guidelines.

Problem

Screen readers could not identify the refresh buttons in both the "Saved Connections" and "Recent Connections" sections of the Connection Dialog, leading to poor user experience for users with disabilities.

Solution

Added proper accessible names to the refresh buttons by:

  1. Adding localized refresh string in src/reactviews/common/locConstants.ts:

    refresh: l10n.t("Refresh"),
  2. Adding title attributes to both refresh buttons in src/reactviews/pages/ConnectionDialog/connectionsListContainer.tsx:

    <Button
        icon={<ArrowClockwise16Filled />}
        appearance="subtle"
        onClick={context.refreshConnectionsList}
        title={locConstants.connectionDialog.refresh}
    />

Impact

  • ✅ Screen readers now properly announce "Refresh" when focusing on these buttons
  • ✅ Meets WCAG 4.1.2 accessibility compliance requirements
  • ✅ Maintains consistency with existing accessibility patterns in the codebase
  • ✅ Minimal code changes with no functional impact

Testing

  • All TypeScript compilation passes
  • React views build successfully
  • ESLint validation passes
  • Localization system properly integrated

Fixes #18653.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

@Copilot Copilot AI changed the title [WIP] "Refresh" button present in "Saved Connections" does not have name defined: A11y_mssql for VSCode_Add Connection_Name Role Value Fix accessibility: Add accessible names to refresh buttons in Connection Dialog Jun 13, 2025
@Copilot Copilot AI requested a review from Benjin June 13, 2025 01:07
Copilot finished work on behalf of Benjin June 13, 2025 01:07
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.

"Refresh" button present in "Saved Connections" does not have name defined: A11y_mssql for VSCode_Add Connection_Name Role Value
2 participants