Announce resource tree selection state to screen readers (#4798482)

[jawelton74]

Preview this branch

Problem

In the Data Explorer left-navigation resource tree, screen readers (NVDA, JAWS, Narrator) announced tree items such as "Documents, 1 of 2, level 3" but never conveyed whether the item was selected or not selected. Screen-reader users could not tell which node represented their current context.

This failed MAS 4.1.2 – Name, Role, Value. The tree only reflected selection visually (via the selectedItem style class) with no corresponding accessible state.

Fix

Selection in the resource tree is a custom application-state concept (node.isSelected() combined with shouldShowAsSelected, which highlights only the deepest selected node). It intentionally does not use Fluent UI v9's built-in Tree selectionMode, because that renders visible radio buttons / checkboxes.

Fluent v9's TreeItem explicitly supports an aria-selected prop. This change wires the existing selection state to that prop on each TreeItem:

aria-selected={node.isSelected ? shouldShowAsSelected : undefined}

Behavior, following the ARIA single-select tree pattern:

• Selectable nodes (those that define isSelected — databases, collections, Items/Documents, Settings/Scale, stored procedures, UDFs, triggers, conflicts, Home) announce aria-selected="true" when selected and "false" otherwise.
• Pure grouping nodes (no isSelected — the Stored Procedures, User Defined Functions, Triggers, Schema folders and load more) omit the attribute entirely, so screen readers don't announce a misleading state for non-selectable containers.

Because it reuses shouldShowAsSelected, the announced state always mirrors the visual highlight (only the deepest selected node is "selected").

Expected screen-reader result

• "Documents, selected, 1 of 2, level 3" when the item is selected
• "Documents, not selected, 1 of 2, level 3" when it is not selected

Changes

• src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx — add aria-selected to TreeItem.
• src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx — add unit tests for selected, unselected, non-selectable (grouping), and selected-parent-with-selected-descendant cases.
• src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap — updated snapshots.

Testing

• Unit tests: npm run test:file -- src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx — 14 passed (4 new).

• Lint / TypeScript / Prettier: eslint, tsc --noEmit, and prettier --check all pass on the changed files.

• Manual E2E (dev server + a live SQL account): verified the rendered DOM and the platform accessibility tree.

  Node	aria-selected
  Home / databases / containers	true when selected, false otherwise
  container1/Items (bug scenario)	true when selected, false otherwise
  Scale & Settings	false when not selected
  Stored Procedures / UDFs / Triggers folders	attribute omitted

  Selecting a leaf moved aria-selected="true" to that leaf and flipped its ancestor container back to "false", matching the visual highlight. Playwright's accessibility snapshot reported treeitem "Home" [selected], confirming the state reaches the platform accessibility API that NVDA consumes.

Risk

Low. The change is additive and scoped to a single accessibility attribute; it does not alter selection logic, styling, or navigation behavior.

[github-actions]

Playwright tests ✅ passed

Passed	Failed	Flaky	Duration
653	0	10	844s

📁 Report: 29783836034-1/report.zip
Open container (Azure sign-in required) → click into 29783836034-1 folder → click report.zip → Download → unzip → open index.html · Workflow run

[github-actions]

Playwright tests ✅ passed

Passed	Failed	Flaky	Duration
654	0	9	2857s

📁 Report: 29845371884-1/report.zip
Open container (Azure sign-in required) → click into 29845371884-1 folder → click report.zip → Download → unzip → open index.html · Workflow run