Updating column resize to support mode where resizer is always visible

packages/@react-aria/grid/src/useGrid.ts

@@ -16,7 +16,7 @@ import {GridCollection} from '@react-types/grid';
 import {GridKeyboardDelegate} from './GridKeyboardDelegate';
 import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
-import {Key, RefObject, useMemo} from 'react';
+import {Key, RefObject, useCallback, useMemo} from 'react';
 import {useCollator, useLocale} from '@react-aria/i18n';
 import {useGridSelectionAnnouncement} from './useGridSelectionAnnouncement';
 import {useHighlightSelectionDescription} from './useHighlightSelectionDescription';
@@ -72,6 +72,7 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     onRowAction,
     onCellAction
   } = props;
+  let {selectionManager: manager} = state;
 
   if (!props['aria-label'] && !props['aria-labelledby']) {
     console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
@@ -93,7 +94,7 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
 
   let {collectionProps} = useSelectableCollection({
     ref,
-    selectionManager: state.selectionManager,
+    selectionManager: manager,
     keyboardDelegate: delegate,
     isVirtualized,
     scrollRef
@@ -103,19 +104,44 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
   gridMap.set(state, {keyboardDelegate: delegate, actions: {onRowAction, onCellAction}});
 
   let descriptionProps = useHighlightSelectionDescription({
-    selectionManager: state.selectionManager,
+    selectionManager: manager,
     hasItemActions: !!(onRowAction || onCellAction)
   });
 
   let domProps = filterDOMProps(props, {labelable: true});
+
+  let onFocus = useCallback((e) => {
+    if (manager.isFocused) {
+      // If a focus event bubbled through a portal, reset focus state.
+      if (!e.currentTarget.contains(e.target)) {
+        manager.setFocused(false);
+      }
+
+      return;
+    }
+
+    // Focus events can bubble through portals. Ignore these events.
+    if (!e.currentTarget.contains(e.target)) {
+      return;
+    }
+
+    manager.setFocused(true);
+  }, [manager]);
+
+  // Continue to track collection focused state even if keyboard navigation is disabled
+  let navDisabledHandlers = useMemo(() => ({
+    onBlur: collectionProps.onBlur,
+    onFocus
+  }), [onFocus, collectionProps.onBlur]);
+
   let gridProps: DOMAttributes = mergeProps(
     domProps,
     {
       role: 'grid',
       id,
-      'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
+      'aria-multiselectable': manager.selectionMode === 'multiple' ? 'true' : undefined
     },
-    state.isKeyboardNavigationDisabled ? {} : collectionProps,
+    state.isKeyboardNavigationDisabled ? navDisabledHandlers : collectionProps,
     descriptionProps
   );
 

packages/@react-aria/table/intl/en-US.json

@@ -6,5 +6,6 @@
   "descending": "descending",
   "ascendingSort": "sorted by column {columnName} in ascending order",
   "descendingSort": "sorted by column {columnName} in descending order",
-  "columnSize": "{value} pixels"
+  "columnSize": "{value} pixels",
+  "resizerDescription": "Press Enter to start resizing"
 }

packages/@react-aria/table/src/useTableColumnResize.ts

@@ -13,13 +13,13 @@
 import {ChangeEvent, Key, RefObject, useCallback, useRef} from 'react';
 import {DOMAttributes, FocusableElement} from '@react-types/shared';
 import {focusSafely} from '@react-aria/focus';
-import {focusWithoutScrolling, mergeProps, useId} from '@react-aria/utils';
+import {focusWithoutScrolling, mergeProps, useDescription, useId} from '@react-aria/utils';
 import {getColumnHeaderId} from './utils';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {TableColumnResizeState} from '@react-stately/table';
-import {useKeyboard, useMove, usePress} from '@react-aria/interactions';
+import {useInteractionModality, useKeyboard, useMove, usePress} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface TableColumnResizeAria {
@@ -36,7 +36,8 @@ export interface AriaTableColumnResizeProps<T> {
   label: string,
   /**
    * Ref to the trigger if resizing was started from a column header menu. If it's provided,
-   * focus will be returned there when resizing is done.
+   * focus will be returned there when resizing is done. If it isn't provided, it is assumed that the resizer is
+   * visible at all time and keyboard resizing is started via pressing Enter on the resizer and not on focus.
    * */
   triggerRef?: RefObject<FocusableElement>,
   /** If resizing is disabled. */
@@ -63,14 +64,31 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
   let id = useId();
   let isResizing = useRef(false);
   let lastSize = useRef(null);
+  let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
 
   let {direction} = useLocale();
   let {keyboardProps} = useKeyboard({
     onKeyDown: (e) => {
-      if (triggerRef?.current && (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ' || e.key === 'Tab')) {
-        e.preventDefault();
-        // switch focus back to the column header on anything that ends edit mode
-        focusSafely(triggerRef.current);
+      let resizeOnFocus = !!triggerRef?.current;
+      if (editModeEnabled) {
+        if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ' || e.key === 'Tab') {
+          e.preventDefault();
+          if (resizeOnFocus) {
+            // switch focus back to the column header on anything that ends edit mode
+            focusSafely(triggerRef.current);
+          } else {
+            endResize(item);
+            state.tableState.setKeyboardNavigationDisabled(false);
+          }
+        }
+      } else if (!resizeOnFocus) {
+        // Continue propagation on keydown events so they still bubbles to useSelectableCollection and are handled there
+        e.continuePropagation();
+
+        if (e.key === 'Enter') {
+          startResize(item);
+          state.tableState.setKeyboardNavigationDisabled(true);
+        }
       }
     }
   });
@@ -91,10 +109,11 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
   }, [onResize, state]);
 
   let endResize = useCallback((item) => {
-    if (lastSize.current == null) {
-      lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
-    }
     if (isResizing.current) {
+      if (lastSize.current == null) {
+        lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
+      }
+
       state.endResize();
       onResizeEnd?.(lastSize.current);
     }
@@ -126,20 +145,31 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
       }
     },
     onMoveEnd(e) {
+      let resizeOnFocus = !!triggerRef?.current;
       let {pointerType} = e;
       columnResizeWidthRef.current = 0;
-      if (pointerType === 'mouse') {
+      if (pointerType === 'mouse' || (pointerType === 'touch' && !resizeOnFocus)) {
         endResize(item);
       }
     }
   });
 
+  let onKeyDown = useCallback((e) => {
+    if (editModeEnabled) {
+      moveProps.onKeyDown(e);
+    }
+  }, [editModeEnabled, moveProps]);
+
+
   let min = Math.floor(state.getColumnMinWidth(item.key));
   let max = Math.floor(state.getColumnMaxWidth(item.key));
   if (max === Infinity) {
     max = Number.MAX_SAFE_INTEGER;
   }
   let value = Math.floor(state.getColumnWidth(item.key));
+  let modality = useInteractionModality();
+  let description = triggerRef?.current == null && (modality === 'keyboard' || modality === 'virtual') && !isResizing.current ? stringFormatter.format('resizerDescription') : undefined;
+  let descriptionProps = useDescription(description);
   let ariaProps = {
     'aria-label': props.label,
     'aria-orientation': 'horizontal' as 'horizontal',
@@ -148,7 +178,8 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
     'type': 'range',
     min,
     max,
-    value
+    value,
+    ...descriptionProps
   };
 
   const focusInput = useCallback(() => {
@@ -175,39 +206,53 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
         return;
       }
       if (e.pointerType === 'virtual' && state.resizingColumn != null) {
+        let resizeOnFocus = !!triggerRef?.current;
         endResize(item);
-        if (triggerRef?.current) {
+        if (resizeOnFocus) {
           focusSafely(triggerRef.current);
         }
         return;
       }
+
+      // Sometimes onPress won't trigger for quick taps on mobile so we want to focus the input so blurring away
+      // can cancel resize mode for us.
       focusInput();
+
+      // If resizer is always visible, mobile screenreader user can access the visually hidden resizer directly and thus we don't need
+      // to handle a virtual click to start the resizer.
+      if (e.pointerType !== 'virtual') {
+        startResize(item);
+      }
     },
     onPress: (e) => {
-      if (e.pointerType === 'touch') {
-        focusInput();
-      } else if (e.pointerType !== 'virtual') {
-        if (triggerRef?.current) {
-          focusSafely(triggerRef.current);
-        }
+      let resizeOnFocus = !!triggerRef?.current;
+      if (((e.pointerType === 'touch' && !resizeOnFocus) || e.pointerType === 'mouse') && state.resizingColumn != null) {
+        endResize(item);
       }
     }
   });
 
   return {
     resizerProps: mergeProps(
       keyboardProps,
-      moveProps,
+      {...moveProps, onKeyDown},
       pressProps
     ),
     inputProps: mergeProps(
       {
         id,
+        // Override browser default margin. Without this, scrollIntoViewport will think we need to scroll the input into view
+        style: {
+          margin: '0px'
+        },
         onFocus: () => {
-          // useMove calls onMoveStart for every keypress, but we want resize start to only be called when we start resize mode
-          // call instead during focus and blur
-          startResize(item);
-          state.tableState.setKeyboardNavigationDisabled(true);
+          let resizeOnFocus = !!triggerRef?.current;
+          if (resizeOnFocus) {
+            // useMove calls onMoveStart for every keypress, but we want resize start to only be called when we start resize mode
+            // call instead during focus and blur
+            startResize(item);
+            state.tableState.setKeyboardNavigationDisabled(true);
+          }
         },
         onBlur: () => {
           endResize(item);

packages/@react-aria/table/stories/docs-example.css

@@ -0,0 +1,100 @@
+.aria-table {
+  border-collapse: collapse;
+  width: 300px;
+  height: 200px;
+  display: block;
+  position: relative;
+  overflow: auto;
+
+  .aria-table-rowGroup {
+    display: block;
+  }
+
+  .aria-table-rowGroupHeader {
+    border-bottom: 2px solid var(--spectrum-global-color-gray-800);
+    position: sticky;
+    top: 0;
+    background: var(--spectrum-gray-100);
+    width: fit-content;
+  }
+
+  .aria-table-rowGroupBody {
+    max-height: 200px;
+  }
+
+  .aria-table-row {
+    display: flex;
+  }
+
+  .aria-table-headerCell {
+    padding: 5px 10px;
+    outline: none;
+    cursor: default;
+    display: block;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    text-align: left;
+
+    .aria-table-headerTitle {
+      width: 100%;
+      text-align: left;
+      border: none;
+      background: transparent;
+      flex: 1 1 auto;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-inline-start: -6px;
+      outline: none;
+
+      &.focus {
+        outline: 2px solid orange;
+      }
+    }
+  }
+
+  .aria-table-resizer {
+    width: 6px;
+    background-color: grey;
+    cursor: col-resize;
+    height: auto;
+    touch-action: none;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    border: 2px;
+    border-style: none solid;
+    border-color: transparent;
+    background-clip: content-box;
+
+    &.focus {
+      background-color: orange;
+    }
+
+    &.resizing {
+      border-color: orange;
+      background-color: transparent;
+    }
+  }
+
+  .aria-table-row {
+    display: flex;
+    width: fit-content;
+  }
+
+  .aria-table-cell {
+    padding: 5px 10px;
+    outline: none;
+    cursor: default;
+    display: block;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    box-shadow: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &.focus {
+      box-shadow: inset 0 0 0 2px orange;
+    }
+  }
+}