fix(react-tree): expose tree selection control to assistive technologies#36384
Open
PaulGMardling wants to merge 4 commits into
Open
fix(react-tree): expose tree selection control to assistive technologies#36384PaulGMardling wants to merge 4 commits into
PaulGMardling wants to merge 4 commits into
Conversation
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
PaulGMardling
force-pushed
the
fix/a11y-tree-selection
branch
from
a4b0786 to
7574e86
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 727 | Changed |
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 761 | Changed |
vr-tests-react-components/ProgressBar converged 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 67 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 117 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 34 | Changed |
vr-tests-react-components/Skeleton converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Skeleton converged.Opaque Skeleton with circle - High Contrast.default.chromium.png | 1 | Changed |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/36260