Fix NVDA screen reader grouping announcement for Query Insights controls

[Copilot]

NVDA was not announcing visual labels when users navigated to related controls in the Query Insights tab, leaving screen reader users without context about what the controls were for.

Changes

Applied ARIA grouping pattern to multiple components in the Query Insights tab:

1. Feedback Card

• Wrapped feedback controls in <div role="group" aria-labelledby="query-insights-rating-label">
• Added id="query-insights-rating-label" to the Text element containing "How would you rate Query Insights?"

2. Query Plan Summary

• Wrapped "Query Plan Summary" label and "View Raw Execution Stats" button in group
• Wrapped "Your Cluster" section label and stage badges in group
• Wrapped each shard section label and stage badges in group (with dynamic IDs per shard)

3. Performance Rating

• Wrapped rating value and diagnostic badges in group

Pattern Example:

<div role="group" aria-labelledby="unique-label-id">
    <Text id="unique-label-id">Label Text</Text>
    <div>
        <Button>Action Button</Button>
        {/* or */}
        <Badge>Badge Text</Badge>
    </div>
</div>

Screen Reader Behavior

Before: Screen readers announced only the button/badge text without context

After: Screen readers now announce:

• Feedback Card: "How would you rate Query Insights?" + "I like it" or "It could be better"
• Query Plan Summary: "Query Plan Summary" + "View Raw Execution Stats"
• Your Cluster: "Your Cluster" + stage badge names (e.g., "IXSCAN", "FETCH")
• Shard sections: "Shard: {name}" + stage badge names
• Performance Rating: Rating value (e.g., "Good") + diagnostic badge text

Screen readers now announce the group label when users navigate to controls, providing necessary context. Complies with WCAG 1.3.1 (Info and Relationships) and WCAG 4.1.2 (Name, Role, Value).

Original prompt

---

This section details on the original issue you should resolve

<issue_title>NVDA is announcing the grouping label for like or dislike control:A11y_DocumentDB for VS Code Extension_View Query Insights_Screenreader</issue_title>
<issue_description>Please do not close this bug. This bug should only be closed by Trusted Tester after verification.
"Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier."

GitHub Tags

#A11yTCS; #A11yMAS; #A11ySev2; #DesktopApp; #FTP; #Win32; #DocumentDB for VS Code Extension; #SH_DocumentDB_Win32_NOV2025; #WCAG1.3.1; #Screenreader; #NVDA;

Environment Details:

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

Repro Steps:

1. Open VS code
2. Install the DocumentDB for VS Code Extension and open it
3. Navigate to the DocumentDB Connections area.
4. Click the New Connection action.
5. Select Connection String as the connection method.
6. Paste the connection string when prompted.
7. Choose to authenticate with username/password and enter the credentials
8. Confirm to create the connection.
9. Locate the desired cluster in the DocumentDB Connections list.
10. Expand the cluster entry to initiate the connection.
11. Expand one of the databases under the cluster.
12. Expand a collection within that database.
13. Select the Documents item for that collection.
14. Collection View will open
15. Run the query: { "cuisine": "Thai" }
16. TAB till "query insights" tab and press ENTER key
17. TAB till i like it button
18. Observe the issues

Actual Result:

When we TAB to "I like it" button NVDA is not announcing the visual label for like and dislike button as 'how would you rate AI insights'

Expected Result:

When we TAB to "I like it" button NVDA should announce the visual label as 'how would you rate AI insights'

User Impact:

Screen reader user will not under stand the purpose of button.

Attachment

381_NVDA.mp4

</issue_description>

<agent_instructions>use the accessibility skill</agent_instructions>

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

• Fixes NVDA is announcing the grouping label for like or dislike control:A11y_DocumentDB for VS Code Extension_View Query Insights_Screenreader #381

---

💡 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.

[Copilot]

Pull request overview

This pull request fixes an accessibility issue where NVDA screen readers were not announcing the visual label "How would you rate Query Insights?" when users navigated to the like/dislike feedback buttons.

Changes:

• Wrapped feedback controls in a <div role="group" aria-labelledby="..."> to establish semantic association
• Added id="query-insights-rating-label" to the Text element for ARIA reference

[tnaum-ms]

@copilot apply the same solution to:

1. "Query Plan Summary" (View raw execution stats is at the top level of the Query Plan summary), then "Your Cluster", or each shard, will have "View Stage Details" and potential badges. each set of badges belongs to a card related to a stage. Add appropriate group nesting.

2. "Performance Rating": performance rating badges should belong to the announced "Performance Rating" group.

[Copilot]

@copilot apply the same solution to:

1. "Query Plan Summary" (View raw execution stats is at the top level of the Query Plan summary), then "Your Cluster", or each shard, will have "View Stage Deta...

Applied the accessibility grouping solution to all requested areas in commit 8d70fd7:

1. Query Plan Summary: Added role="group" to "View Raw Execution Stats" button with "Query Plan Summary" label, and to stage badges in "Your Cluster" section and each shard section
2. Performance Rating: Added role="group" to wrap diagnostic badges with the performance rating value

Screen readers will now announce the grouping labels when users navigate to these controls, providing the necessary context.

[Copilot]

Pull request overview

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