Skip to content

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

Open
smhigley wants to merge 4 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 4 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

github-actions Bot commented Jul 17, 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.823 kB
120 B
37 B
react-tree
FlatTree
135.571 kB
40.413 kB
135.691 kB
40.448 kB
120 B
35 B
react-tree
PersonaFlatTree
137.417 kB
40.931 kB
137.537 kB
40.962 kB
120 B
31 B
react-tree
PersonaTree
133.498 kB
39.718 kB
133.618 kB
39.753 kB
120 B
35 B
react-tree
Tree
131.658 kB
39.221 kB
131.778 kB
39.258 kB
120 B
37 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

Comment on lines +123 to +130
if (typeof onClick === 'function') {
onClick(event);
}
// if onClick is not defined and this is not an expand/collapse node and the treeitem is selectable,
// then we should toggle the selection state on click
else if (selectionMode !== 'none' && itemType === 'leaf') {
selectionRef.current?.click();
}

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.

@smhigley can you add a e2e test for this use case?

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.

2 participants