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

change/@fluentui-react-tree-48fe2b57-5a5f-4455-b90c-0810d0a2ba03.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add accessible names to Tree selection controls",
+  "packageName": "@fluentui/react-tree",
+  "email": "paulmardling@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tree/library/src/components/Tree/Tree.test.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { isConformant } from '../../testing/isConformant';
 import { Tree } from './Tree';
 import { TreeItem } from '../TreeItem/TreeItem';
+import { TreeItemLayout } from '../TreeItemLayout/TreeItemLayout';
+import { TreeItemPersonaLayout } from '../TreeItemPersonaLayout/TreeItemPersonaLayout';
 
 describe('Tree', () => {
   isConformant({
@@ -37,4 +39,97 @@ describe('Tree', () => {
 
     expect(handleOpenChange).toHaveBeenNthCalledWith(2, expect.any(Object), expect.objectContaining({ open: false }));
   });
+
+  describe('selection control accessibility', () => {
+    it.each([
+      {
+        case: 'multiselect',
+        selectionMode: 'multiselect',
+        role: 'checkbox',
+        layout: <TreeItemLayout>Item 1</TreeItemLayout>,
+        accessibleName: 'Item 1',
+      },
+      {
+        case: 'single',
+        selectionMode: 'single',
+        role: 'radio',
+        layout: <TreeItemLayout>Item 1</TreeItemLayout>,
+        accessibleName: 'Item 1',
+      },
+      {
+        case: 'TreeItemPersonaLayout',
+        selectionMode: 'multiselect',
+        role: 'checkbox',
+        layout: <TreeItemPersonaLayout>Jane Doe</TreeItemPersonaLayout>,
+        accessibleName: 'Jane Doe',
+      },
+    ] as const)('exposes a named $role selector ($case)', ({ selectionMode, role, layout, accessibleName }) => {
+      render(
+        <Tree aria-label="Tree" selectionMode={selectionMode}>
+          <TreeItem itemType="leaf" value="item1">
+            {layout}
+          </TreeItem>
+        </Tree>,
+      );
+
+      expect(screen.getByRole(role, { name: accessibleName })).toBeTruthy();
+    });
+
+    it.each([
+      {
+        case: 'TreeItemLayout',
+        layout: <TreeItemLayout main={{ id: 'custom-main' }}>Item 1</TreeItemLayout>,
+        mainId: 'custom-main',
+        accessibleName: 'Item 1',
+      },
+      {
+        case: 'TreeItemPersonaLayout',
+        layout: <TreeItemPersonaLayout main={{ id: 'custom-persona-main' }}>Jane Doe</TreeItemPersonaLayout>,
+        mainId: 'custom-persona-main',
+        accessibleName: 'Jane Doe',
+      },
+    ] as const)('preserves a consumer-provided main ID ($case)', ({ layout, mainId, accessibleName }) => {
+      render(
+        <Tree aria-label="Tree" selectionMode="multiselect">
+          <TreeItem itemType="leaf" value="item1">
+            {layout}
+          </TreeItem>
+        </Tree>,
+      );
+
+      expect(screen.getByRole('checkbox', { name: accessibleName }).getAttribute('aria-labelledby')).toBe(mainId);
+      expect(document.getElementById(mainId)?.textContent).toBe(accessibleName);
+    });
+
+    it('preserves a consumer-provided selector aria-label', () => {
+      render(
+        <Tree aria-label="Tree" selectionMode="multiselect">
+          <TreeItem itemType="leaf" value="item1">
+            <TreeItemLayout selector={{ 'aria-label': 'Custom selector label' }}>Item 1</TreeItemLayout>
+          </TreeItem>
+        </Tree>,
+      );
+
+      const selector = screen.getByRole('checkbox', { name: 'Custom selector label' });
+      expect(selector.getAttribute('aria-label')).toBe('Custom selector label');
+      expect(selector.hasAttribute('aria-labelledby')).toBe(false);
+    });
+
+    it('preserves a consumer-provided selector aria-labelledby', () => {
+      render(
+        <>
+          <span id="external-selector-label">External selector label</span>
+          <Tree aria-label="Tree" selectionMode="multiselect">
+            <TreeItem itemType="leaf" value="item1">
+              <TreeItemLayout selector={{ 'aria-labelledby': 'external-selector-label' }}>Item 1</TreeItemLayout>
+            </TreeItem>
+          </Tree>
+        </>,
+      );
+
+      expect(screen.getByRole('checkbox', { name: 'External selector label' }).getAttribute('aria-labelledby')).toBe(
+        'external-selector-label',
+      );
+    });
+  });
 });

packages/react-components/react-tree/library/src/components/TreeItemLayout/useTreeItemLayout.tsx

@@ -9,6 +9,7 @@ import {
   useEventCallback,
   elementContains,
   useControllableState,
+  useId,
 } from '@fluentui/react-utilities';
 import { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';
 import type {
@@ -66,6 +67,32 @@ export const useTreeItemLayout_unstable = (
   const checked = useTreeItemContext_unstable(ctx => ctx.checked);
   const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');
 
+  const mainShorthand = isResolvedShorthand(main) ? main : undefined;
+  const mainContentId = useId('fui-TreeItemLayout__main-', mainShorthand?.id);
+
+  // Link the selector to the main content unless the consumer provided aria-label or aria-labelledby
+  const selectorShorthand = isResolvedShorthand(props.selector) ? props.selector : undefined;
+  const selectorAriaLabelledBy =
+    selectorShorthand?.['aria-label'] || selectorShorthand?.['aria-labelledby'] ? undefined : mainContentId;
+
+  const selector = slot.optional(props.selector, {
+    renderByDefault: selectionMode !== 'none',
+    defaultProps: {
+      checked,
+      tabIndex: -1,
+      ref: selectionRef,
+      'aria-labelledby': selectorAriaLabelledBy,
+      // casting here to a union between checkbox and radio
+      // since ref is not present on the selector signature
+      // FIXME: look into Slot type to see if we can make this work
+    } as CheckboxProps | RadioProps,
+    elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,
+  });
+  const mainSlot = slot.always(main, {
+    defaultProps: { id: selector ? mainContentId : undefined },
+    elementType: 'div',
+  });
+
   // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
   // eslint-disable-next-line react-hooks/refs
   assertIsRefObject(treeItemRef);
@@ -142,29 +169,18 @@ export const useTreeItemLayout_unstable = (
     [setIsActionsVisible, onActionVisibilityChange, treeItemRef, isNavigatingWithKeyboard, targetDocument],
   );
 
+  const expandIconRefs = useMergedRefs(expandIconRef);
   const expandIcon = slot.optional(props.expandIcon, {
     renderByDefault: isBranch,
     defaultProps: {
       children: <TreeItemChevron />,
       'aria-hidden': true,
+      ref: expandIconRefs,
     },
     elementType: 'div',
   });
-  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);
-  if (expandIcon) {
-    expandIcon.ref = expandIconRefs;
-  }
   const arrowNavigationProps = useArrowNavigationGroup({ circular: navigationMode === 'tree', axis: 'horizontal' });
-  const actions = isActionsVisible
-    ? slot.optional(props.actions, {
-        defaultProps: { ...arrowNavigationProps, role: 'toolbar' },
-        elementType: 'div',
-      })
-    : undefined;
-  delete actions?.visible;
-  delete actions?.onVisibilityChange;
 
-  const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);
   const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {
     if (isResolvedShorthand(props.actions)) {
       props.actions.onBlur?.(event);
@@ -177,10 +193,19 @@ export const useTreeItemLayout_unstable = (
     } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);
     setIsActionsVisible(isRelatedTargetFromActions);
   });
-  if (actions) {
-    actions.ref = actionsRefs;
-    actions.onBlur = handleActionsBlur;
-  }
+
+  const actionsRefs = useMergedRefs(actionsRef, actionsRefInternal);
+  const actions = isActionsVisible
+    ? slot.optional(props.actions, {
+        defaultProps: {
+          ...arrowNavigationProps,
+          role: 'toolbar',
+          ref: actionsRefs,
+          onBlur: handleActionsBlur,
+        },
+        elementType: 'div',
+      })
+    : undefined;
 
   const hasActions = Boolean(props.actions);
 
@@ -233,26 +258,12 @@ export const useTreeItemLayout_unstable = (
       },
     ),
     iconBefore: slot.optional(iconBefore, { elementType: 'div' }),
-    main: slot.always(main, { elementType: 'div' }),
+    main: mainSlot,
     iconAfter: slot.optional(iconAfter, { elementType: 'div' }),
     aside: !isActionsVisible ? slot.optional(props.aside, { elementType: 'div' }) : undefined,
     actions,
     expandIcon,
-    selector: slot.optional(props.selector, {
-      renderByDefault: selectionMode !== 'none',
-      defaultProps: {
-        checked,
-        tabIndex: -1,
-        'aria-hidden': true,
-        ref: selectionRef,
-        // casting here to a union between checkbox and radio
-        // since ref is not present on the selector signature
-        // FIXME: look into Slot type to see if we can make this work
-      } as CheckboxProps | RadioProps,
-      elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<
-        CheckboxProps | RadioProps
-      >,
-    }),
+    selector,
   };
 };
 

packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts

@@ -52,7 +52,10 @@ export const useTreeItemPersonaLayout_unstable = (
       selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,
     },
     avatarSize: treeAvatarSize[size],
-    main: slot.always(main, { defaultProps: { children }, elementType: 'div' }),
+    main: slot.always(main, {
+      defaultProps: { children, id: treeItemLayoutState.main.id },
+      elementType: 'div',
+    }),
     media: slot.always(media, { elementType: 'div' }),
     description: slot.optional(description, { elementType: 'div' }),
   };