feat(a11y): improve treeitem check/select acessibility

src/NodeList.tsx

@@ -74,6 +74,7 @@ interface NodeListProps<TreeDataType extends BasicDataNode> {
   tabIndex: number;
   checkable?: boolean;
   selectable?: boolean;
+  multiselectable?: boolean;
   disabled?: boolean;
 
   expandedKeys: Key[];
@@ -141,6 +142,7 @@ const NodeList = React.forwardRef<NodeListRef, NodeListProps<any>>((props, ref)
     prefixCls,
     data,
     selectable,
+    multiselectable,
     checkable,
     expandedKeys,
     selectedKeys,
@@ -330,6 +332,7 @@ const NodeList = React.forwardRef<NodeListRef, NodeListProps<any>>((props, ref)
         prefixCls={`${prefixCls}-list`}
         ref={listRef}
         role="tree"
+        aria-multiselectable={!multiselectable ? undefined : true}
         onVisibleChange={originList => {
           // The best match is using `fullList` - `originList` = `restList`
           // and check the `restList` to see if has the MOTION_KEY node

src/Tree.tsx

@@ -1372,6 +1372,7 @@ class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends Rea
       focusable,
       tabIndex = 0,
       selectable,
+      multiple,
       showIcon,
       icon,
       switcherIcon,
@@ -1473,6 +1474,7 @@ class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends Rea
             data={flattenNodes}
             disabled={disabled}
             selectable={selectable}
+            multiselectable={multiple}
             checkable={!!checkable}
             motion={motion}
             dragging={draggingNodeKey !== null}

src/TreeNode.tsx

@@ -47,6 +47,8 @@ const TreeNode: React.FC<Readonly<TreeNodeProps>> = props => {
 
   const [dragNodeHighlight, setDragNodeHighlight] = React.useState<boolean>(false);
 
+  const ariaId = React.useId();
+
   // ======= State: Disabled State =======
   const isDisabled = !!(context.disabled || props.disabled || unstableContext.nodeDisabled?.(data));
 
@@ -382,6 +384,7 @@ const TreeNode: React.FC<Readonly<TreeNodeProps>> = props => {
       >
         {$icon}
         <span
+          id={`${context.prefixCls}-title-${ariaId}`}
           className={classNames(`${context.prefixCls}-title`, treeClassNames?.itemTitle)}
           style={styles?.itemTitle}
         >
@@ -415,12 +418,15 @@ const TreeNode: React.FC<Readonly<TreeNodeProps>> = props => {
   const draggableWithoutDisabled = !isDisabled && isDraggable;
 
   const dragging = context.draggingNodeKey === eventKey;
-  const ariaSelected = selectable !== undefined ? { 'aria-selected': !!selectable } : undefined;
+  const ariaSelected = isSelectable ? { 'aria-selected': !!selected } : undefined;
+  const ariaChecked = isCheckable ? { 'aria-checked': !!checked } : undefined;
+
   return (
     <div
       ref={domRef}
       role="treeitem"
       aria-expanded={isLeaf ? undefined : expanded}
+      aria-labelledby={`${context.prefixCls}-title-${ariaId}`}
       className={classNames(className, `${context.prefixCls}-treenode`, treeClassNames?.item, {
         [`${context.prefixCls}-treenode-disabled`]: isDisabled,
         [`${context.prefixCls}-treenode-switcher-${expanded ? 'open' : 'close'}`]: !isLeaf,
@@ -452,6 +458,7 @@ const TreeNode: React.FC<Readonly<TreeNodeProps>> = props => {
       onDragEnd={isDraggable ? onDragEnd : undefined}
       onMouseMove={onMouseMove}
       {...ariaSelected}
+      {...ariaChecked}
       {...dataOrAriaAttributeProps}
     >
       <Indent prefixCls={context.prefixCls} level={level} isStart={isStart} isEnd={isEnd} />

tests/TreeNodeProps.spec.tsx

@@ -198,8 +198,8 @@ describe('TreeNode Props', () => {
     }
 
     const { container } = render(<Demo />);
-    // tree selectable is false ,then children should be selectable = false if not set selectable alone.
-    expect(container.querySelectorAll('[aria-selected=false]')).toHaveLength(1);
+    // tree selectable is false, then no treeitem should have aria-selected (neither true or false)
+    expect(container.querySelectorAll('[aria-selected]')).toHaveLength(0);
 
     fireEvent.click(container.querySelector('.rc-tree-node-content-wrapper'));
     expect(onClick).toHaveBeenCalled();
@@ -209,7 +209,8 @@ describe('TreeNode Props', () => {
     fireEvent.click(container.querySelector('.test-button'));
     onClick.mockRestore();
     onSelect.mockRestore();
-    expect(container.querySelectorAll('[aria-selected=false]')).toHaveLength(1);
+    // tree selectable is true, but only one treeitem is selectable
+    expect(container.querySelectorAll('[aria-selected]')).toHaveLength(1);
     fireEvent.click(container.querySelectorAll('.rc-tree-node-content-wrapper')[1]);
     expect(onClick).toHaveBeenCalled();
     expect(onSelect).not.toHaveBeenCalled();