Disabling TableView/ListView keyboard navigation and press interactions if collection is empty (#3422)

LFDanLu · web-flow · commit 09a04893cdd5 · 2022-09-07T18:11:21.000-07:00
diff --git a/packages/@adobe/spectrum-css-temp/components/table/skin.css b/packages/@adobe/spectrum-css-temp/components/table/skin.css
@@ -41,7 +41,7 @@ governing permissions and limitations under the License.
       }
     }
 
-    &:active {
+    &.is-active {
       color: var(--spectrum-table-header-text-color-down);
 
       .spectrum-Table-sortedIcon {
@@ -77,6 +77,10 @@ governing permissions and limitations under the License.
   border-color: var(--spectrum-table-border-color);
   background-color: var(--spectrum-table-background-color);
 
+  &:focus-ring {
+    box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);
+  }
+
   &.is-drop-target {
     border-color: var(--spectrum-alias-border-color-focus);
     box-shadow: 0 0 0 1px var(--spectrum-alias-border-color-focus);
diff --git a/packages/@react-aria/grid/src/useGridCell.ts b/packages/@react-aria/grid/src/useGridCell.ts
@@ -93,7 +93,8 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
     isVirtualized,
     focus,
     shouldSelectOnPressUp,
-    onAction: onCellAction ? () => onCellAction(node.key) : onAction
+    onAction: onCellAction ? () => onCellAction(node.key) : onAction,
+    isDisabled: state.collection.size === 0
   });
 
   let onKeyDownCapture = (e: ReactKeyboardEvent) => {
diff --git a/packages/@react-aria/grid/src/useGridRow.ts b/packages/@react-aria/grid/src/useGridRow.ts
@@ -59,7 +59,8 @@ export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T
     ref,
     isVirtualized,
     shouldSelectOnPressUp,
-    onAction: onRowAction ? () => onRowAction(node.key) : onAction
+    onAction: onRowAction ? () => onRowAction(node.key) : onAction,
+    isDisabled: state.collection.size === 0
   });
 
   let isSelected = state.selectionManager.isSelected(node.key);
diff --git a/packages/@react-aria/gridlist/src/useGridList.ts b/packages/@react-aria/gridlist/src/useGridList.ts
@@ -78,7 +78,7 @@ export function useGridList<T>(props: AriaGridListOptions<T>, state: ListState<T
       id,
       'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
     },
-    listProps,
+    state.collection.size === 0 ? {} : listProps,
     descriptionProps
   );
 
diff --git a/packages/@react-aria/table/src/useTable.ts b/packages/@react-aria/table/src/useTable.ts
@@ -119,6 +119,8 @@ export function useTable<T>(props: AriaTableProps<T>, state: TableState<T>, ref:
     gridProps: mergeProps(
       gridProps,
       descriptionProps,
+      // If table is empty, make sure the table is tabbable
+      state.collection.size === 0 && {tabIndex: 0},
       {
         // merge sort description with long press information
         'aria-describedby': [descriptionProps['aria-describedby'], gridProps['aria-describedby']].filter(Boolean).join(' ')
diff --git a/packages/@react-aria/table/src/useTableColumnHeader.ts b/packages/@react-aria/table/src/useTableColumnHeader.ts
@@ -90,7 +90,14 @@ export function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps, state
 
   return {
     columnHeaderProps: {
-      ...mergeProps(gridCellProps, pressProps, focusableProps, descriptionProps),
+      ...mergeProps(
+        gridCellProps,
+        pressProps,
+        focusableProps,
+        descriptionProps,
+        // If the table is empty, make all column headers untabbable or programatically focusable
+        state.collection.size === 0 && {tabIndex: null}
+      ),
       role: 'columnheader',
       id: getColumnHeaderId(state, node.key),
       'aria-colspan': node.colspan && node.colspan > 1 ? node.colspan : null,
diff --git a/packages/@react-aria/table/src/useTableColumnResize.ts b/packages/@react-aria/table/src/useTableColumnResize.ts
@@ -30,11 +30,12 @@ export interface TableColumnResizeAria {
 export interface AriaTableColumnResizeProps<T> {
   column: GridNode<T>,
   label: string,
-  triggerRef: RefObject<HTMLDivElement>
+  triggerRef: RefObject<HTMLDivElement>,
+  isDisabled?: boolean
 }
 
 export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, state: TableState<T>, columnState: TableColumnResizeState<T>, ref: RefObject<HTMLInputElement>): TableColumnResizeAria {
-  let {column: item, triggerRef} = props;
+  let {column: item, triggerRef, isDisabled} = props;
   const stateRef = useRef<TableColumnResizeState<T>>(null);
   // keep track of what the cursor on the body is so it can be restored back to that when done resizing
   const cursor = useRef<string | null>(null);
@@ -159,7 +160,8 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
           stateRef.current.onColumnResizeEnd(item);
           state.setKeyboardNavigationDisabled(false);
         },
-        onChange
+        onChange,
+        disabled: isDisabled
       },
       ariaProps
     )
diff --git a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
@@ -64,7 +64,7 @@ export function useTableSelectAllCheckbox<T>(state: TableState<T>): TableSelectA
     checkboxProps: {
       'aria-label': stringFormatter.format(selectionMode === 'single' ? 'select' : 'selectAll'),
       isSelected: isSelectAll,
-      isDisabled: selectionMode !== 'multiple',
+      isDisabled: selectionMode !== 'multiple' || state.collection.size === 0,
       isIndeterminate: !isEmpty && !isSelectAll,
       onChange: () => state.selectionManager.toggleSelectAll()
     }
diff --git a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx
@@ -21,6 +21,7 @@ import {GridLayoutOptions} from '../src/GridLayout';
 import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Image} from '@react-spectrum/image';
+import {Link} from '@react-spectrum/link';
 import React, {Key, useMemo, useState} from 'react';
 import {Size} from '@react-stately/virtualizer';
 import {SpectrumCardViewProps} from '@react-types/card';
@@ -67,7 +68,7 @@ function renderEmptyState() {
         <path d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z" />
       </svg>
       <Heading>No results</Heading>
-      <Content>No results found</Content>
+      <Content>No results found, press <Link onPress={action('linkPress')}>here</Link> for more info.</Content>
     </IllustratedMessage>
   );
 }
@@ -527,4 +528,3 @@ export function CustomLayout(props: SpectrumCardViewProps<object> & LayoutOption
     </div>
   );
 }
-
diff --git a/packages/@react-spectrum/list/stories/ListView.stories.tsx b/packages/@react-spectrum/list/stories/ListView.stories.tsx
@@ -20,6 +20,7 @@ import {Image} from '@react-spectrum/image';
 import Info from '@spectrum-icons/workflow/Info';
 import {Item, ListView} from '../';
 import {ItemDropTarget} from '@react-types/shared';
+import {Link} from '@react-spectrum/link';
 import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';
 import React, {useEffect, useState} from 'react';
 import {storiesOf} from '@storybook/react';
@@ -106,14 +107,14 @@ const itemsWithThumbs = [
   {key: '9', title: 'file of great boi', illustration: <File />}
 ];
 
-function renderEmptyState() {
+export function renderEmptyState() {
   return (
     <IllustratedMessage>
       <svg width="150" height="103" viewBox="0 0 150 103">
         <path d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z" />
       </svg>
       <Heading>No results</Heading>
-      <Content>No results found</Content>
+      <Content>No results found, press <Link onPress={action('linkPress')}>here</Link> for more info.</Content>
     </IllustratedMessage>
   );
 }
diff --git a/packages/@react-spectrum/list/test/ListView.test.js b/packages/@react-spectrum/list/test/ListView.test.js
@@ -17,6 +17,7 @@ import {announce} from '@react-aria/live-announcer';
 import {Item, ListView} from '../src';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
+import {renderEmptyState} from '../stories/ListView.stories';
 import {Text} from '@react-spectrum/text';
 import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
@@ -570,13 +571,20 @@ describe('ListView', function () {
   });
 
   it('should render empty state', function () {
-    function renderEmptyState() {
-      return <div>No results</div>;
-    }
     let {getByText} = render(<ListView aria-label="List" renderEmptyState={renderEmptyState} />);
     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');
+    let link = getByRole('link');
+    userEvent.tab();
+    expect(document.activeElement).toBe(grid);
+    userEvent.tab();
+    expect(document.activeElement).toBe(link);
+  });
+
   it('supports custom data attributes', () => {
     let {getByRole} = render(
       <ListView aria-label="List" data-testid="test">
diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx
@@ -19,11 +19,11 @@ interface ResizerProps<T> {
 
 function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
   let {column, showResizer} = props;
-  let {state, columnState} = useTableContext();
+  let {state, columnState, isEmpty} = useTableContext();
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let {direction} = useLocale();
 
-  let {inputProps, resizerProps} = useTableColumnResize({...props, label: stringFormatter.format('columnResizer')}, state, columnState, ref);
+  let {inputProps, resizerProps} = useTableColumnResize({...props, label: stringFormatter.format('columnResizer'), isDisabled: isEmpty}, state, columnState, ref);
 
   let style = {
     cursor: undefined,
diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx
@@ -81,7 +81,8 @@ interface TableContextValue<T> {
   state: TableState<T>,
   layout: TableLayout<T>,
   columnState: TableColumnResizeState<T>,
-  headerRowHovered: boolean
+  headerRowHovered: boolean,
+  isEmpty: boolean
 }
 
 const TableContext = React.createContext<TableContextValue<unknown>>(null);
@@ -252,6 +253,7 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
           return <TableSelectAllCell column={item} />;
         }
 
+        // TODO: consider this case, what if we have hidden headers and a empty table
         if (item.props.hideHeader) {
           return (
             <TooltipTrigger placement="top" trigger="focus">
@@ -304,11 +306,13 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
       setHorizontalScollbarVisible(bodyRef.current.clientHeight + 2 < bodyRef.current.offsetHeight);
     }
   }, []);
+  let {isFocusVisible, focusProps} = useFocusRing();
+  let isEmpty = state.collection.size === 0;
 
   return (
-    <TableContext.Provider value={{state, layout, columnState, headerRowHovered}}>
+    <TableContext.Provider value={{state, layout, columnState, headerRowHovered, isEmpty}}>
       <TableVirtualizer
-        {...gridProps}
+        {...mergeProps(gridProps, focusProps)}
         {...styleProps}
         className={
           classNames(
@@ -337,13 +341,14 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
         onVisibleRectChange={onVisibleRectChange}
         domRef={domRef}
         bodyRef={bodyRef}
+        isFocusVisible={isFocusVisible}
         getColumnWidth={columnState.getColumnWidth} />
     </TableContext.Provider>
   );
 }
 
 // This is a custom Virtualizer that also has a header that syncs its scroll position with the body.
-function TableVirtualizer({layout, collection, focusedKey, renderView, renderWrapper, domRef, bodyRef, setTableWidth, getColumnWidth, onVisibleRectChange: onVisibleRectChangeProp, ...otherProps}) {
+function TableVirtualizer({layout, collection, focusedKey, renderView, renderWrapper, domRef, bodyRef, setTableWidth, getColumnWidth, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible, ...otherProps}) {
   let {direction} = useLocale();
   let headerRef = useRef<HTMLDivElement>();
   let loadingState = collection.body.props.loadingState;
@@ -415,7 +420,8 @@ function TableVirtualizer({layout, collection, focusedKey, renderView, renderWra
 
   return (
     <div
-      {...mergeProps(otherProps, virtualizerProps)}
+      // Override virtualizer provided tabindex if TableView is empty so it is tabbable.
+      {...mergeProps(otherProps, virtualizerProps, collection.size === 0 && {tabIndex: 0})}
       ref={domRef}>
       <div
         role="presentation"
@@ -433,7 +439,15 @@ function TableVirtualizer({layout, collection, focusedKey, renderView, renderWra
       </div>
       <ScrollView
         role="presentation"
-        className={classNames(styles, 'spectrum-Table-body')}
+        className={
+          classNames(
+            styles,
+            'spectrum-Table-body',
+            {
+              'focus-ring': isFocusVisible
+            }
+          )
+        }
         style={{flex: 1}}
         innerStyle={{overflow: 'visible', transition: state.isAnimating ? `none ${state.virtualizer.transitionDuration}ms` : undefined}}
         ref={bodyRef}
@@ -461,17 +475,18 @@ function TableHeader({children, ...otherProps}) {
 function TableColumnHeader(props) {
   let {column} = props;
   let ref = useRef<HTMLDivElement>(null);
-  let {state} = useTableContext();
+  let {state, isEmpty} = useTableContext();
+  let {pressProps, isPressed} = usePress({isDisabled: isEmpty});
   let {columnHeaderProps} = useTableColumnHeader({
     node: column,
     isVirtualized: true
   }, state, ref);
 
   let columnProps = column.props as SpectrumColumnProps<unknown>;
 
-  let {hoverProps, isHovered} = useHover(props);
+  let {hoverProps, isHovered} = useHover({...props, isDisabled: isEmpty});
 
-  const allProps = [columnHeaderProps, hoverProps];
+  const allProps = [columnHeaderProps, hoverProps, pressProps];
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -483,6 +498,7 @@ function TableColumnHeader(props) {
             styles,
             'spectrum-Table-headCell',
             {
+              'is-active': isPressed,
               'is-resizable': columnProps.allowsResizing,
               'is-sortable': columnProps.allowsSorting,
               'is-sorted-desc': state.sortDescriptor?.column === column.key && state.sortDescriptor?.direction === 'descending',
@@ -513,8 +529,9 @@ function TableColumnHeader(props) {
 }
 
 let _TableColumnHeaderButton = (props, ref: FocusableRef<HTMLDivElement>) => {
+  let {isEmpty} = useTableContext();
   let domRef = useFocusableRef(ref);
-  let {buttonProps} = useButton({...props, elementType: 'div'}, domRef);
+  let {buttonProps} = useButton({...props, elementType: 'div', isDisabled: isEmpty}, domRef);
   return (
     <div className={classNames(styles, 'spectrum-Table-headCellContents')}>
       <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -530,16 +547,17 @@ function ResizableTableColumnHeader(props) {
   let ref = useRef(null);
   let triggerRef = useRef(null);
   let resizingRef = useRef(null);
-  let {state, columnState, headerRowHovered} = useTableContext();
+  let {state, columnState, headerRowHovered, isEmpty} = useTableContext();
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let {pressProps, isPressed} = usePress({isDisabled: isEmpty});
   let {columnHeaderProps} = useTableColumnHeader({
     node: column,
     isVirtualized: true,
     hasMenu: true
   }, state, ref);
-  let {hoverProps, isHovered} = useHover(props);
+  let {hoverProps, isHovered} = useHover({...props, isDisabled: isEmpty});
 
-  const allProps = [columnHeaderProps, hoverProps];
+  const allProps = [columnHeaderProps, hoverProps, pressProps];
 
   let columnProps = column.props as SpectrumColumnProps<unknown>;
 
@@ -589,7 +607,7 @@ function ResizableTableColumnHeader(props) {
     }
   }, [columnState.currentlyResizingColumn, column.key]);
 
-  let showResizer = headerRowHovered || columnState.currentlyResizingColumn != null;
+  let showResizer = !isEmpty && (headerRowHovered || columnState.currentlyResizingColumn != null);
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -601,6 +619,7 @@ function ResizableTableColumnHeader(props) {
             styles,
             'spectrum-Table-headCell',
             {
+              'is-active': isPressed,
               'is-resizable': columnProps.allowsResizing,
               'is-sortable': columnProps.allowsSorting,
               'is-sorted-desc': state.sortDescriptor?.column === column.key && state.sortDescriptor?.direction === 'descending',
@@ -685,7 +704,6 @@ function TableSelectAllCell({column}) {
         }
         <Checkbox
           {...checkboxProps}
-          isDisabled={isSingleSelectionMode}
           isEmphasized
           UNSAFE_style={isSingleSelectionMode ? {visibility: 'hidden'} : undefined}
           UNSAFE_className={classNames(styles, 'spectrum-Table-checkbox')} />
diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
diff --git a/packages/@react-spectrum/table/test/Table.test.js b/packages/@react-spectrum/table/test/Table.test.js
diff --git a/packages/@react-stately/table/src/useTableState.ts b/packages/@react-stately/table/src/useTableState.ts

Original file line number	Diff line number	Diff line change
`@@ -119,6 +119,8 @@ export function useTable<T>(props: AriaTableProps<T>, state: TableState<T>, ref:`
`119`	`119`	`gridProps: mergeProps(`
`120`	`120`	`gridProps,`
`121`	`121`	`descriptionProps,`
	`122`	`+ // If table is empty, make sure the table is tabbable`
	`123`	`+ state.collection.size === 0 && {tabIndex: 0},`
`122`	`124`	`{`
`123`	`125`	`// merge sort description with long press information`
`124`	`126`	`'aria-describedby': [descriptionProps['aria-describedby'], gridProps['aria-describedby']].filter(Boolean).join(' ')`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export function useTableSelectAllCheckbox<T>(state: TableState<T>): TableSelectA`
`64`	`64`	`checkboxProps: {`
`65`	`65`	`'aria-label': stringFormatter.format(selectionMode === 'single' ? 'select' : 'selectAll'),`
`66`	`66`	`isSelected: isSelectAll,`
`67`		`- isDisabled: selectionMode !== 'multiple',`
	`67`	`+ isDisabled: selectionMode !== 'multiple' \|\| state.collection.size === 0,`
`68`	`68`	`isIndeterminate: !isEmpty && !isSelectAll,`
`69`	`69`	`onChange: () => state.selectionManager.toggleSelectAll()`
`70`	`70`	`}`