TableView and ListView skip focusing when empty, but have a focusable child (#3581)

* TableView doesn't get focus when empty, but there is a link

* Refactor plus getting to work with ListView and Virtualizer components

* some small improvments and lint type fixes

* making lint and test pass for a WIP build

* reverting skipped tests

* refactored useTabbableChildre to not use a MutationObserver

* Factoring in empty collection to new Virtualizer tabIndex logic

* improving fragile test and making sure a hook is always called

* moving hook to fix circular dependancy and adding listview test

* refactored new hook to use hooks useState and useEffect

* refactoring hook to return boolean for tabbable child existence instead of setting tabIndex

* removing code that didn't fix a test

* fixing lint warning useEffect dependencies

Co-authored-by: Robert Snow <[email protected]>

Author: ktabors

packages/@react-aria/virtualizer/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
+    "@react-aria/focus": "^3.9.0",
     "@react-aria/i18n": "^3.6.1",
     "@react-aria/interactions": "^3.12.0",
     "@react-aria/utils": "^3.14.0",

packages/@react-aria/virtualizer/src/Virtualizer.tsx

@@ -16,6 +16,7 @@ import {getInteractionModality} from '@react-aria/interactions';
 import {Layout, Rect, ReusableView, useVirtualizerState, VirtualizerState} from '@react-stately/virtualizer';
 import React, {FocusEvent, HTMLAttributes, Key, ReactElement, RefObject, useCallback, useEffect, useMemo, useRef} from 'react';
 import {ScrollView} from './ScrollView';
+import {useHasTabbableChild} from './useHasTabbableChild';
 import {VirtualizerItem} from './VirtualizerItem';
 
 interface VirtualizerProps<T extends object, V> extends HTMLAttributes<HTMLElement> {
@@ -178,13 +179,21 @@ export function useVirtualizer<T extends object, V, W>(props: VirtualizerOptions
     }
   });
 
+  let hasTabbableChild = useHasTabbableChild({
+    isEmpty: virtualizer.collection.size === 0,
+    hasRenderedAnything: virtualizer.contentSize.height > 0 || virtualizer.contentSize.width > 0
+  }, ref);
+
   // Set tabIndex to -1 if the focused view is in the DOM, otherwise 0 so that the collection
   // itself is tabbable. When the collection receives focus, we scroll the focused item back into
   // view, which will allow it to be properly focused. If using virtual focus, don't set a
   // tabIndex at all so that VoiceOver on iOS 14 doesn't try to move real DOM focus to the element anyway.
   let tabIndex: number;
   if (!shouldUseVirtualFocus) {
-    tabIndex = focusedView ? -1 : 0;
+    // When there is no focusedView the default tabIndex is 0. We include logic for empty collections too.
+    // For collections that are empty, but have a link in the empty children we want to skip focusing this
+    // and let focus move to the link similar to link moving to children.
+    tabIndex = focusedView || hasTabbableChild ? -1 : 0;
   }
 
   return {

packages/@react-aria/virtualizer/src/useHasTabbableChild.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {getFocusableTreeWalker} from '@react-aria/focus';
+import {RefObject, useEffect, useState} from 'react';
+
+interface AriaHasTabbableChildProps {
+  isEmpty: boolean,
+  hasRenderedAnything: boolean
+}
+
+// This was created for a special empty case of a component that can have child or
+// be empty, like Collection/Virtualizer/Table/ListView/etc. When these components
+// are empty they can have a message with a tabbable element, which is like them
+// being not empty, when it comes to focus and tab order.
+//
+// This looks at the element's children and determines if any are tabbable.
+export function useHasTabbableChild({isEmpty, hasRenderedAnything}: AriaHasTabbableChildProps, ref: RefObject<HTMLElement>): boolean {
+  let [hasTabbableChild, setHasTabbableChild] = useState(false);
+
+  useEffect(() => {
+    if (ref?.current && isEmpty && hasRenderedAnything) {
+      // Detect if there are any tabbable elements and update the tabIndex accordingly.
+      let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
+      setHasTabbableChild(!!walker.nextNode());
+    }
+  }, [ref, isEmpty, hasRenderedAnything]);
+
+  return hasTabbableChild;
+}

packages/@react-spectrum/list/test/ListView.test.js

@@ -552,6 +552,13 @@ describe('ListView', function () {
     expect(progressbar).toBeTruthy();
   });
 
+  it('should allow you to tab to ListView body if loading (no tabbable children)', function () {
+    let {getByRole} = render(<ListView aria-label="List" loadingState="loading">{[]}</ListView>);
+    let grid = getByRole('grid');
+    userEvent.tab();
+    expect(document.activeElement).toBe(grid);
+  });
+
   it('should display loading affordance with proper height (isLoadingMore)', function () {
     let items = [
       {key: 'foo', label: 'Foo'},
@@ -575,12 +582,18 @@ describe('ListView', function () {
     expect(getByText('No results')).toBeTruthy();
   });
 
-  it('should allow you to tab into ListView body if empty', function () {
-    let {getByRole} = render(<ListView aria-label="List" renderEmptyState={renderEmptyState} />);
-    let grid = getByRole('grid');
+  it('should allow you to tab into ListView body if empty with link', function () {
+    let {getByRole} = render(
+      <>
+        <ActionButton>Toggle</ActionButton>
+        <ListView aria-label="List" renderEmptyState={renderEmptyState}>{[]}</ListView>
+      </>
+    );
+    let toggleButton = getByRole('button');
     let link = getByRole('link');
+
     userEvent.tab();
-    expect(document.activeElement).toBe(grid);
+    expect(document.activeElement).toBe(toggleButton);
     userEvent.tab();
     expect(document.activeElement).toBe(link);
   });

packages/@react-spectrum/table/src/TableView.tsx

@@ -468,8 +468,7 @@ function TableVirtualizer({layout, collection, lastResizeInteractionModality, fo
   return (
     <FocusScope>
       <div
-        // Override virtualizer provided tabindex if TableView is empty, so it is tabbable.
-        {...mergeProps(otherProps, virtualizerProps, collection.size === 0 && {tabIndex: 0})}
+        {...mergeProps(otherProps, virtualizerProps)}
         ref={domRef}>
         <div
           role="presentation"

packages/@react-spectrum/table/test/Table.test.js

@@ -4226,15 +4226,12 @@ describe('TableView', function () {
 
     it('should allow the user to tab into the table body', function () {
       let tree = render(<EmptyStateTable />);
-      let table = tree.getByRole('grid');
       let toggleButton = tree.getAllByRole('button')[0];
       let link = tree.getByRole('link');
 
       userEvent.tab();
       expect(document.activeElement).toBe(toggleButton);
       userEvent.tab();
-      expect(document.activeElement).toBe(table);
-      userEvent.tab();
       expect(document.activeElement).toBe(link);
     });