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

change/@fluentui-react-tree-e2a6aab0-e13f-4c01-9e0b-8f2b591adbd9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: default selection behavior is accessible, with warnings",
+  "packageName": "@fluentui/react-tree",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tree/library/src/components/TreeItem/useTreeItem.tsx

@@ -120,7 +120,13 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
     if (isEventFromActions() || isEventFromSubtree() || isEventFromSelection()) {
       return;
     } else if (!isEventFromExpandIcon) {
-      onClick?.(event);
+      if (typeof onClick === 'function') {
+        onClick(event);
+      }
+      // if onClick is not defined and the treeitem is selectable, then we should toggle the selection state on click
+      else if (selectionMode !== 'none') {
+        selectionRef.current?.click();
+      }
     }
     if (event.isDefaultPrevented()) {
       return;

packages/react-components/react-tree/stories/src/Tree/TreeA11y.md

@@ -1,5 +1,7 @@
 ## Accessibility
 
+WARNING: Trees have many sometimes blocking accessibility issues across platforms and input modalities. Avoid using the component if possible.
+
 Here are some accessibility edge cases scenarios we identified and users should keep in mind while using the `Tree` components.
 
 NVDA
@@ -14,10 +16,11 @@ VoiceOver/Chromium
 
 VoiceOver
 
-1. [Bug 8223307](https://office.visualstudio.com/APEX/_workitems/edit/8223307): VoiceOver doesn't narrate level of tree
-2. [Bug 8223375](https://office.visualstudio.com/APEX/_workitems/edit/8223375): VoiceOver doesn't list tree/table in the rotor
+1. Not an external bug, but VoiceOver will not handle multiple actions (e.g. selection + a primary action, or a primary action + expand/collapse) on a single leaf node. This is down to how controls fundamentally work -- multiple actions on a single control are not accessible.
+2. [Bug 8223307](https://office.visualstudio.com/APEX/_workitems/edit/8223307): VoiceOver doesn't narrate level of tree
+3. [Bug 8223375](https://office.visualstudio.com/APEX/_workitems/edit/8223375): VoiceOver doesn't list tree/table in the rotor
    iOS
-3. [Bug 8232232](https://office.visualstudio.com/APEX/_workitems/edit/8232232): iOS : VoiceOver - Select tree with checkboxes - no narration of ticket/unticked state
+4. [Bug 8232232](https://office.visualstudio.com/APEX/_workitems/edit/8232232): iOS : VoiceOver - Select tree with checkboxes - no narration of ticket/unticked state
 
 JAWS
 
@@ -30,3 +33,9 @@ Narrator
 1. [Bug 45975192](https://microsoft.visualstudio.com/OS/_workitems/edit/45975192): Single select tree - narration aria-selected makes verbosity with redundant "selected"
 2. [Bug 46020629](https://microsoft.visualstudio.com/OS/_workitems/edit/46020629): Select tree with checkboxes - no narration of checked state
 3. [Bug 46020726](https://microsoft.visualstudio.com/OS/_workitems/edit/46020726): Select tree with checkboxes - no able to toggle check state with space in scan mode
+
+Voice Control and mobile screen readers (VoiceOver on iOS and Talkback)
+
+Not an external bug, but all voice control softwares as well as mobile screen readers will not handle multiple actions (e.g. selection + a primary action, or a primary action + expand/collapse) on a single leaf node. This is down to how controls fundamentally work -- multiple actions on a single control are not accessible.
+
+Trees also do not work with macOS voice control on chromium browsers at all. Similarly, VoiceOver on macOS has numerous quirks when interacting with trees.

packages/react-components/react-tree/stories/src/Tree/TreeActions.stories.tsx

@@ -113,7 +113,7 @@ In addition to \`aside\` slot, both tree item layouts support \`actions\` slot t
 
 The \`actions\` slot has a \`role="toolbar"\` and ensures proper horizontal navigation with the keyboard by using [\`useArrowNavigationGroup\`](https://react.fluentui.dev/?path=/docs/utilities-focus-management-usearrownavigationgroup--default).
 
-> ⚠️ Although \`actions\` are easy to navigate, they're not an expected pattern according to [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).providing a context menu with the same functionalities as the actions is recommended to ensure your tree item is accessible.
+> ⚠️ Although \`aria-actions\` will improve accessibility in the future, the current state of actions is that they are inaccessible across multiple platforms and input modalities, such as voice control. They are also not allowed children of a treeitem per the ARIA spec. Providing a context menu with the same functionalities as the actions is recommended to improve the accessibility of actions.
 
 In the example below, we compose on top of \`TreeItem\` component to include both a context menu and actions that provide the same amount of functionalities. We also provide an \`aria-description\` to the tree item to indicate that it has actions. This is a new behavior that the user might not be aware of, so you might need to explain somewhere else in the UI what does having actions refers to.
 

packages/react-components/react-tree/stories/src/Tree/TreeSelection.stories.tsx

@@ -46,6 +46,10 @@ Selection.parameters = {
       story: `
 The tree component offers selectable functionality in both single and multi-selection modes. You can enable this feature by passing the \`selectionMode\` prop with either \`single\` or \`multiselect\` value.
 
+⚠️ WARNING: trees that have multiple possible interactions on the same tree item (e.g. selection + a primary action, or selection + expand/collapse) are fundamentally inaccessible across multiple modalities, specifically mobile screen readers, VoiceOver on macOS, and voice control. Trees generally are not broadly accessible, and should be used very infrequently if at all. If you create a selectable tree, the best practice is to not also define an onClick for TreeItems.
+
+Controlling selection state:
+
 - \`Tree\`: In nested tree, you are responsible for controlling the selection state, as it would be difficult to manage the state in an uncontrolled manner without knowing the items upfront.
 - \`FlatTree\`: In flat tree, you can take advantage of an uncontrolled state for easier management, as the items are known upfront. It is also possible to use a controlled state if you need to manage the selection state externally.
 

packages/react-components/react-tree/stories/src/Tree/index.stories.tsx

@@ -26,7 +26,6 @@ export { NavigationModeTreeGrid } from './TreeNavigationModeTreeGrid.stories';
 export { DefaultOpen } from './TreeDefaultOpen.stories';
 export { OpenItemsControlled } from './OpenItemsControlled.stories';
 export { OpenItemControlled } from './OpenItemControlled.stories';
-export { CustomizingInteraction } from './TreeCustomizingInteraction.stories';
 export { InlineStylingTreeItemLevel } from './TreeInlineStylingTreeItemLevel.stories';
 export { FlatTreeStory as FlatTree } from './FlatTree.stories';