feat: focus loading indicator in rac tree (#8270)

Author: yihuiliao

packages/@react-aria/selection/src/ListKeyboardDelegate.ts

@@ -78,7 +78,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     let nextKey = key;
     while (nextKey != null) {
       let item = this.collection.getItem(nextKey);
-      if (item?.type === 'item' && !this.isDisabled(item)) {
+      if (item?.type === 'loader' || (item?.type === 'item' && !this.isDisabled(item))) {
         return nextKey;
       }
 

packages/react-aria-components/example/index.css

@@ -23,6 +23,7 @@ html {
   }
 }
 
+.tree-loader,
 .tree-item {
   padding: 4px 5px;
   outline: none;

packages/react-aria-components/src/Tree.tsx

@@ -699,7 +699,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
   );
 });
 
-export interface UNSTABLE_TreeLoadingIndicatorRenderProps {
+export interface UNSTABLE_TreeLoadingIndicatorRenderProps extends Pick<TreeItemRenderProps, 'isFocused' | 'isFocusVisible'> {
   /**
    * What level the tree item has within the tree.
    * @selector [data-level]
@@ -711,36 +711,44 @@ export interface TreeLoaderProps extends RenderProps<UNSTABLE_TreeLoadingIndicat
 
 export const UNSTABLE_TreeLoadingIndicator = createLeafComponent('loader', function TreeLoader<T extends object>(props: TreeLoaderProps,  ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
   let state = useContext(TreeStateContext)!;
-  // This loader row is is non-interactable, but we want the same aria props calculated as a typical row
-  // @ts-ignore
-  let {rowProps} = useTreeItem({node: item}, state, ref);
+  ref = useObjectRef<HTMLDivElement>(ref);
+  let {rowProps, gridCellProps, ...states} = useTreeItem({node: item}, state, ref);
   let level = rowProps['aria-level'] || 1;
 
   let ariaProps = {
+    role: 'row',
     'aria-level': rowProps['aria-level'],
     'aria-posinset': rowProps['aria-posinset'],
-    'aria-setsize': rowProps['aria-setsize']
+    'aria-setsize': rowProps['aria-setsize'],
+    tabIndex: rowProps.tabIndex
   };
 
+  let {isFocusVisible, focusProps} = useFocusRing();
+
   let renderProps = useRenderProps({
     ...props,
     id: undefined,
     children: item.rendered,
     defaultClassName: 'react-aria-TreeLoader',
     values: {
-      level
+      level,
+      isFocused: states.isFocused,
+      isFocusVisible
     }
   });
 
   return (
     <>
       <div
-        role="row"
         ref={ref}
-        {...mergeProps(filterDOMProps(props as any), ariaProps)}
+        {...mergeProps(filterDOMProps(props as any), ariaProps, focusProps)}
         {...renderProps}
+        data-key={rowProps['data-key']}
+        data-collection={rowProps['data-collection']}
+        data-focused={states.isFocused || undefined}
+        data-focus-visible={isFocusVisible || undefined}
         data-level={level}>
-        <div role="gridcell" aria-colindex={1}>
+        <div {...gridCellProps}>
           {renderProps.children}
         </div>
       </div>

packages/react-aria-components/stories/Tree.stories.tsx

@@ -208,7 +208,11 @@ let rows = [
 
 const MyTreeLoader = () => {
   return (
-    <UNSTABLE_TreeLoadingIndicator>
+    <UNSTABLE_TreeLoadingIndicator
+      className={({isFocused, isFocusVisible}) => classNames(styles, 'tree-loader', {
+        focused: isFocused,
+        'focus-visible': isFocusVisible
+      })}>      
       {({level}) => {
         let message = `Level ${level} loading spinner`;
         if (level === 1) {

packages/react-aria-components/test/Tree.test.tsx

@@ -1124,7 +1124,7 @@ describe('Tree', () => {
       expect(cell).toHaveAttribute('aria-colindex', '1');
     });
 
-    it('should not focus the load more row when using ArrowDown/ArrowUp', async () => {
+    it('should focus the load more row when using ArrowDown/ArrowUp', async () => {
       let {getAllByRole} = render(<LoadingMoreTree isLoading />);
 
       let rows = getAllByRole('row');
@@ -1133,19 +1133,18 @@ describe('Tree', () => {
 
       await user.tab();
       expect(document.activeElement).toBe(rows[0]);
-      for (let i = 0; i < 5; i++) {
+      for (let i = 1; i < 8; i++) {
         await user.keyboard('{ArrowDown}');
+        expect(document.activeElement).toBe(rows[i]);
       }
-      expect(document.activeElement).toBe(rows[5]);
 
-      await user.keyboard('{ArrowDown}');
-      expect(document.activeElement).toBe(rows[7]);
-
-      await user.keyboard('{ArrowUp}');
-      expect(document.activeElement).toBe(rows[5]);
+      for (let i = 6; i >= 0; i--) {
+        await user.keyboard('{ArrowUp}');
+        expect(document.activeElement).toBe(rows[i]);
+      }
     });
 
-    it('should not focus the load more row when using End', async () => {
+    it('should focus the load more row when using End', async () => {
       let {getAllByRole} = render(<LoadingMoreTree isLoading />);
 
       let rows = getAllByRole('row');
@@ -1155,14 +1154,14 @@ describe('Tree', () => {
       await user.tab();
       expect(document.activeElement).toBe(rows[0]);
       await user.keyboard('{End}');
-      expect(document.activeElement).toBe(rows[20]);
+      expect(document.activeElement).toBe(rows[21]);
 
       // Check that it didn't shift the focusedkey to the loader key even if DOM focus didn't shift to the loader
       await user.keyboard('{ArrowUp}');
-      expect(document.activeElement).toBe(rows[19]);
+      expect(document.activeElement).toBe(rows[20]);
     });
 
-    it('should not focus the load more row when using PageDown', async () => {
+    it('should focus the load more row when using PageDown', async () => {
       let {getAllByRole} = render(<LoadingMoreTree isLoading />);
 
       let rows = getAllByRole('row');
@@ -1172,11 +1171,11 @@ describe('Tree', () => {
       await user.tab();
       expect(document.activeElement).toBe(rows[0]);
       await user.keyboard('{PageDown}');
-      expect(document.activeElement).toBe(rows[20]);
+      expect(document.activeElement).toBe(rows[21]);
 
       // Check that it didn't shift the focusedkey to the loader key even if DOM focus didn't shift to the loader
       await user.keyboard('{ArrowUp}');
-      expect(document.activeElement).toBe(rows[19]);
+      expect(document.activeElement).toBe(rows[20]);
     });
 
     it('should not render no results state and the loader at the same time', () => {