Skip to content

fix: tree selection default behavior + warning, and updating other examples with incorrect a11y info#36408

Open
smhigley wants to merge 3 commits into
microsoft:masterfrom
smhigley:fix-tree-selection
Open

fix: tree selection default behavior + warning, and updating other examples with incorrect a11y info#36408
smhigley wants to merge 3 commits into
microsoft:masterfrom
smhigley:fix-tree-selection

Conversation

@smhigley

Copy link
Copy Markdown
Contributor

This fixes a few issues with Tree that stem from having multiple actions on the same leaf node:

  • For selection, this is impossible to fully avoid, but now by default the click action on the treeitem toggles selection if an author has not passed in an onClick handler. This allows selection to work with voice control, mobile screen readers, and macOS VoiceOver (or at least as long as the external team doesn't explicitly make it inaccessible).
  • This PR removes the Customizing Interaction example, which demonstrates a pattern that is widely inaccessible. We need to tell consumers that they cannot define multiple interactions per leaf node -- or at least if they do, they're intentionally ignoring our advice and will end up with an inaccessible experience that we do not support.
  • Adds more explicit docs wording around the accessibility pitfalls of trees.

Fixes ADO issue

@smhigley
smhigley requested a review from a team as a code owner July 17, 2026 20:05
@github-actions

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.815 kB
108 B
29 B
react-tree
FlatTree
135.571 kB
40.413 kB
135.679 kB
40.443 kB
108 B
30 B
react-tree
PersonaFlatTree
137.417 kB
40.931 kB
137.525 kB
40.956 kB
108 B
25 B
react-tree
PersonaTree
133.498 kB
39.718 kB
133.606 kB
39.747 kB
108 B
29 B
react-tree
Tree
131.658 kB
39.221 kB
131.766 kB
39.252 kB
108 B
31 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

@@ -0,0 +1,7 @@
{

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/Menu Converged - submenuIndicator slotted content 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png 413 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 404 Changed
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 65 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 17 Changed
vr-tests-react-components/ProgressBar converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 84 Changed
vr-tests-react-components/Skeleton converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Skeleton converged.Translucent Skeleton with rectangle.default.chromium.png 12 Changed
vr-tests-react-components/Tree 5 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Tree.flat tree multi selection - Dark Mode.flat tree multi selection selected 1-1.chromium.png 97 Changed
vr-tests-react-components/Tree.flat tree multi selection - High Contrast.flat tree multi selection selected 1-1.chromium.png 87 Changed
vr-tests-react-components/Tree.flat tree multi selection.flat tree multi selection selected 1-1.chromium.png 151 Changed
vr-tests-react-components/Tree.flat tree single selection - High Contrast.flat tree single selection selected 1.chromium.png 13 Changed
vr-tests-react-components/Tree.flat tree single selection - RTL.flat tree single selection selected 1.chromium_2.png 48 Changed

There were 3 duplicate changes discarded. Check the build logs for more information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant