Skip to content

fix(react-tree): expose tree selection control to assistive technologies#36384

Open
PaulGMardling wants to merge 6 commits into
microsoft:masterfrom
PaulGMardling:fix/a11y-tree-selection
Open

fix(react-tree): expose tree selection control to assistive technologies#36384
PaulGMardling wants to merge 6 commits into
microsoft:masterfrom
PaulGMardling:fix/a11y-tree-selection

Conversation

@PaulGMardling

@PaulGMardling PaulGMardling commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Previous Behavior

Voice access users are unable to access selection tree controls.

New Behavior

The Tree selection control (a checkbox in multiselect, a radio in single-select) now participates in the accessibility tree with an accessible name derived from the item's content. Previously it was hidden from assistive technologies, leaving any tool that operates the visible control directly unable to reach it.

Although the issue was reported against Windows Voice Access, the gap was platform-agnostic and equally affected macOS Voice Control and comparable technologies. Exposing the control resolves it at the source: the selector is now discoverable and operable by assistive technologies across platforms.

Selection state remains on the tree item via aria-checked / aria-selected, so screen readers announce it once (no double-announcement), and keyboard behavior is unchanged (the selector stays tabIndex -1; Space toggles). The fix applies to both the standard tree item layout and the persona tree item layout.

Testing/Verification

Windows 11:

Voice Access — "Show numbers" now places a number on each selection control; saying that number toggles selection, and "Click (item name)" works, confirming the accessible name resolves.
Narrator — selection state is announced once (no double-announcement); the row and the checkbox are both reachable as expected.

macOS (supplementary proxy):

Voice Control number-targeting toggles selection; VoiceOver reads the state once (no doubling). The browser accessibility tree confirms the control is exposed with the correct name.

Automated:

Added unit regression tests asserting the selection control is exposed (found by role) and named; verified they fail if the fix is reverted.

Fixes #36260

@github-actions

github-actions Bot commented Jul 10, 2026

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.293 MB
325.786 kB
1.293 MB
325.844 kB
123 B
58 B
react-tree
FlatTree
135.571 kB
40.413 kB
135.677 kB
40.467 kB
106 B
54 B
react-tree
PersonaFlatTree
137.417 kB
40.931 kB
137.54 kB
40.998 kB
123 B
67 B
react-tree
PersonaTree
133.498 kB
39.718 kB
133.621 kB
39.786 kB
123 B
68 B
react-tree
Tree
131.658 kB
39.221 kB
131.764 kB
39.273 kB
106 B
52 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
66.281 kB
19.002 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
225.836 kB
67.998 kB
react-components
react-components: FluentProvider & webLightTheme
39.504 kB
13.112 kB
react-portal-compat
PortalCompatProvider
5.341 kB
2.146 kB
react-timepicker-compat
TimePicker
140.677 kB
45.99 kB
🤖 This report was generated against 838a28171bc01fdaf6139104225f35e6b7621e09

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@PaulGMardling
PaulGMardling force-pushed the fix/a11y-tree-selection branch from a4b0786 to 7574e86 Compare July 10, 2026 12:40
@PaulGMardling
PaulGMardling marked this pull request as ready for review July 10, 2026 13:35
@PaulGMardling
PaulGMardling requested a review from a team as a code owner July 10, 2026 13:35
@PaulGMardling
PaulGMardling force-pushed the fix/a11y-tree-selection branch 3 times, most recently from 67743cc to 823bdbb Compare July 15, 2026 15:06
@PaulGMardling
PaulGMardling requested a review from mainframev July 16, 2026 09:47

@mainframev mainframev left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

I think that won't work and the issue won't be automatically closed after PR merge

Change to: Fixes #36260

Comment thread change/@fluentui-react-tree-48fe2b57-5a5f-4455-b90c-0810d0a2ba03.json Outdated
@@ -0,0 +1,7 @@
{

@github-actions github-actions Bot Jul 16, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Menu 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu.Nested Submenus Small Viewport Stacked.nested menu.chromium.png 856 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 12 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 158 Changed
vr-tests-react-components/ProgressBar converged 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 68 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 68 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 34 Changed

@PaulGMardling
PaulGMardling force-pushed the fix/a11y-tree-selection branch from 4d5ed51 to e7c44a7 Compare July 17, 2026 12:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants