Add missing aria-label attributes to input controls in React webviews

[Copilot]

Accessibility Improvements for React Webviews

Completed Work

• Audit all React webview components for missing accessibility attributes
• Fix Skip and Limit spin buttons (primary issue from bug report)
• Fix other input elements missing aria-label/aria-labelledby
• Fix Dropdown components missing aria-label
• Review and fix any Checkbox components
• Test changes to ensure they work properly
• Generate summary document listing all changes
• Run linting and build to verify no issues introduced
• Update localization files
• Remove redundant aria-label attributes (aria-labelledby takes precedence)

Components Fixed

1. ✅ QueryEditor.tsx - Skip and Limit input fields (number inputs) - Added aria-labelledby (removed redundant aria-label)
2. ✅ QueryEditor.tsx - AI prompt input - Added aria-label
3. ✅ ToolbarViewNavigation.tsx - Page size dropdown - Added aria-label
4. ✅ ViewSwitcher.tsx - View selection dropdown - Added aria-label

Components Verified (No Changes Needed)

1. ✅ FeedbackDialog.tsx - Checkboxes have proper labels via label prop
2. ✅ InputWithProgress.tsx - Properly forwards aria attributes
3. ✅ InputWithHistory.tsx - Properly forwards aria attributes
4. ✅ QuickActions.tsx - Buttons have text labels

Recent Changes

• Removed redundant aria-label from Skip and Limit inputs (aria-labelledby takes precedence per ARIA spec)
• Updated documentation to reflect proper ARIA implementation

See ACCESSIBILITY_IMPROVEMENTS.md for detailed summary.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>No accessible name provided for Skip and Limit Spin Buttons: A11y_DocumentDB for VS Code Extension_View Query Insights_Name</issue_title>
<issue_description>### GitHub ### Tags
#A11yTCS; #A11yMAS; #A11ySev2; #DesktopApp; #FTP; #Win32; #DocumentDB for VS Code Extension; #SH_DocumentDB_Win32_NOV2025; #WCAG4.1.2;#Name Role Value;

Environment Details:

Application Name: DocumentDB for VS Code Extension
Version 0.6.0
OS: Windows 11[Version 23H2(OS Build 22631.3593)]

Repro Steps:

Open VS code
Install the DocumentDB for VS Code Extension and open it
Navigate to the DocumentDB Connections area.
Click the New Connection action.
Select Connection String as the connection method.
Paste the connection string when prompted.
Choose to authenticate with username/password and enter the credentials
Confirm to create the connection.
Locate the desired cluster in the DocumentDB Connections list.
Expand the cluster entry to initiate the connection.
Expand one of the databases under the cluster.
Expand a collection within that database.
Select the Documents item for that collection.
Collection View will open
Observe the issues No Accessible Name Provided for Skip and Limit Spin Buttons

Actual Result:

No Accessible Name Provided for Skip and Limit Spin Buttons
Similar issue is also observed for

Expected Result:

An accessible name should be provided to the spin buttons.

User Impact:

Users relying on assistive technologies, such as screen readers, cannot perceive the purpose or functionality of the spin buttons for "Skip" and "Limit." Without a programmatically determinable name, these controls are inaccessible to users with visual impairments.

Attachment

</issue_description>

<agent_instructions>revisit how aria attributes are used in the react webviews. it looks like I've missed adding them to some of the newly added input areas. do not stop at skip and limit spin buttons only and attempt to add missing accessibility attributes to other input elements. generate a summary md document listing each encountered element and the action taken. use this summary to comment your progress once done.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes No accessible name provided for Skip and Limit Spin Buttons: A11y_DocumentDB for VS Code Extension_View Query Insights_Name #377

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Pull request overview

This PR addresses a critical accessibility issue (WCAG 4.1.2 - Name, Role, Value) by adding missing aria-label attributes to input controls in React webviews, enabling screen reader users to properly identify the purpose of these controls.

Key Changes:

• Added accessible names to Skip and Limit number inputs using both aria-labelledby and aria-label attributes
• Added aria-label to AI prompt input, page size dropdown, and view type dropdown
• Updated localization bundle with new accessible name strings
• Created comprehensive documentation detailing all accessibility improvements

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
QueryEditor.tsx	Added id attributes to Skip/Limit labels and connected them to inputs via aria-labelledby with aria-label fallback; added aria-label to AI prompt input
ToolbarViewNavigation.tsx	Added aria-label to page size dropdown for screen reader identification
ViewSwitcher.tsx	Added aria-label to view type dropdown for screen reader identification
bundle.l10n.json	Added localized string "Select view type" to localization bundle
ACCESSIBILITY_IMPROVEMENTS.md	Comprehensive documentation of all accessibility improvements, affected components, testing performed, and future recommendations

[Copilot]

The documentation incorrectly describes using both aria-labelledby and aria-label as a "Dual Labeling Strategy" and suggests aria-label acts as a fallback. This is technically inaccurate - aria-labelledby takes precedence over aria-label when both are present, so the aria-label is ignored, not used as a fallback. The best practice is to use only aria-labelledby when you have a visible label element with an id.

[tnaum-ms]

@copilot apply changes based on this feedback, implement this changes for other locations where both aria-labls and labelledby are used.

[Copilot]

Fixed in a183efc. Removed redundant aria-label attributes from Skip and Limit inputs, keeping only aria-labelledby. Updated documentation to reflect proper ARIA implementation - replaced "Dual Labeling Strategy" with "Proper ARIA Labeling" that accurately describes using aria-labelledby for visible labels and aria-label only where no visible label exists.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.