feat: support Textfields and other interactive components in Table

packages/@react-spectrum/ai/src/Chat.tsx

@@ -328,7 +328,10 @@ const threadItemBase = style({
   borderRadius: 'default'
 });
 
-export interface ThreadItemProps extends Pick<GridListItemProps, 'children' | 'textValue'> {
+export interface ThreadItemProps extends Pick<
+  GridListItemProps,
+  'children' | 'textValue' | 'focusMode' | 'allowsArrowNavigation'
+> {
   /**
    * Spectrum-defined styles, returned by the `style()` macro.
    */
@@ -340,7 +343,15 @@ export interface ThreadItemProps extends Pick<GridListItemProps, 'children' | 't
 }
 
 export function ThreadItem(props: ThreadItemProps) {
-  let {styles, children, textValue = ' ', isStreaming, shouldAnnounceOnMount} = props;
+  let {
+    styles,
+    children,
+    textValue = ' ',
+    isStreaming,
+    shouldAnnounceOnMount,
+    focusMode,
+    allowsArrowNavigation
+  } = props;
   let {announceItem} = useContext(InternalChatContext);
 
   // TODO: using aria-live on the gridlist item was pretty chatty and the streaming causes the text announcement
@@ -370,6 +381,8 @@ export function ThreadItem(props: ThreadItemProps) {
   return (
     <GridListItem
       textValue={textValue}
+      focusMode={focusMode}
+      allowsArrowNavigation={allowsArrowNavigation}
       className={renderProps => mergeStyles(threadItemBase({...renderProps}), styles)}>
       {children}
     </GridListItem>

packages/@react-spectrum/ai/stories/Chat.stories.tsx

@@ -490,6 +490,8 @@ export function StreamingChat() {
                 // (aka it would make sense to auto focus children here but not for a system message that has text and other focusable children)
                 return (
                   <ThreadItem
+                    allowsArrowNavigation
+                    focusMode="child"
                     textValue={announcement}
                     isStreaming={msg.isStreaming}
                     shouldAnnounceOnMount>
@@ -621,7 +623,7 @@ export function VirtualizedChat() {
               let message = isPending ? 'Generating response' : 'Response generated';
 
               return (
-                <ThreadItem textValue={message}>
+                <ThreadItem allowsArrowNavigation focusMode="child" textValue={message}>
                   <ResponseStatus isLoading={isPending}>
                     <ResponseStatusTitle>{message}</ResponseStatusTitle>
                   </ResponseStatus>

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

@@ -448,6 +448,7 @@ export const TableView = forwardRef(function TableView(
     selectionStyle = 'checkbox',
     dragAndDropHooks,
     disabledBehavior = 'all',
+    keyboardNavigationBehavior = 'arrow',
     ...otherProps
   } = props;
 
@@ -494,7 +495,8 @@ export const TableView = forwardRef(function TableView(
       setIsInResizeMode,
       selectionMode,
       selectionStyle,
-      disabledBehavior
+      disabledBehavior,
+      keyboardNavigationBehavior
     }),
     [
       isQuiet,
@@ -506,7 +508,8 @@ export const TableView = forwardRef(function TableView(
       setIsInResizeMode,
       selectionMode,
       selectionStyle,
-      disabledBehavior
+      disabledBehavior,
+      keyboardNavigationBehavior
     ]
   );
 
@@ -561,6 +564,7 @@ export const TableView = forwardRef(function TableView(
             onRowAction={onAction}
             dragAndDropHooks={dragAndDropHooks}
             disabledBehavior={disabledBehavior}
+            keyboardNavigationBehavior={keyboardNavigationBehavior}
             {...otherProps}
             selectedKeys={selectedKeys}
             defaultSelectedKeys={undefined}
@@ -768,13 +772,17 @@ export interface ColumnProps extends Omit<
  * A column within a `<Table>`.
  */
 export const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef<HTMLDivElement>) {
-  let {isQuiet} = useContext(InternalTableContext);
+  let {isQuiet, keyboardNavigationBehavior} = useContext(InternalTableContext);
   let {allowsResizing, children, align = 'start'} = props;
   let domRef = useDOMRef(ref);
   let isMenu = allowsResizing || !!props.menuItems;
 
   return (
     <RACColumn
+      // will need to make sure that focusMode and allowsArrowNavigation are only both set if said cell
+      // doesn't have a textfield/interactive component that will need the arrow keys
+      focusMode={keyboardNavigationBehavior === 'tab' ? 'child' : undefined}
+      allowsArrowNavigation={keyboardNavigationBehavior === 'tab' || undefined}
       {...props}
       ref={domRef}
       style={{borderInlineEndColor: 'transparent'}}
@@ -1181,7 +1189,7 @@ export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function
 ) {
   let scale = useScale();
   let {selectionBehavior, selectionMode, allowsDragging} = useTableOptions();
-  let {isQuiet, selectionStyle} = useContext(InternalTableContext);
+  let {isQuiet, selectionStyle, keyboardNavigationBehavior} = useContext(InternalTableContext);
   let domRef = useDOMRef(ref);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
 
@@ -1213,15 +1221,13 @@ export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function
           isSticky
           width={scale === 'medium' ? 40 : 52}
           minWidth={scale === 'medium' ? 40 : 52}
+          focusMode={keyboardNavigationBehavior === 'tab' ? 'child' : undefined}
+          allowsArrowNavigation={keyboardNavigationBehavior === 'tab' || undefined}
           className={selectAllCheckboxColumn({isQuiet})}>
           {({isFocusVisible}) => (
             <>
-              {selectionMode === 'single' && (
-                <>
-                  {isFocusVisible && <CellFocusRing />}
-                  <VisuallyHiddenSelectAllLabel />
-                </>
-              )}
+              {isFocusVisible && <CellFocusRing />}
+              {selectionMode === 'single' && <VisuallyHiddenSelectAllLabel />}
               {selectionMode === 'multiple' && (
                 <Checkbox styles={selectAllCheckbox} slot="selection" />
               )}
@@ -1647,7 +1653,7 @@ function EditableCellInner(
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let dialogRef = useRef<DOMRefValue<HTMLElement>>(null);
 
-  let {density} = useContext(InternalTableContext);
+  let {density, keyboardNavigationBehavior} = useContext(InternalTableContext);
   let size: 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = 'M';
   if (density === 'compact') {
     size = 'S';
@@ -1732,7 +1738,7 @@ function EditableCellInner(
                 isPending: isSaving,
                 isQuiet: !isSaving,
                 size,
-                excludeFromTabOrder: true,
+                excludeFromTabOrder: keyboardNavigationBehavior === 'arrow',
                 styles: style({
                   // TODO: really need access to display here instead, but not possible right now
                   // will be addressable with displayOuter
@@ -2203,7 +2209,8 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T>(
   ref: DOMRef<HTMLDivElement>
 ) {
   let {selectionBehavior, selectionMode, allowsDragging} = useTableOptions();
-  let {selectionStyle, ...tableVisualOptions} = useContext(InternalTableContext);
+  let {selectionStyle, keyboardNavigationBehavior, ...tableVisualOptions} =
+    useContext(InternalTableContext);
   let domRef = useDOMRef(ref);
   let isInFooter = useContext(FooterContext);
 
@@ -2233,6 +2240,8 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T>(
         <RACCell
           // @ts-ignore
           isSticky
+          focusMode={keyboardNavigationBehavior === 'tab' ? 'child' : undefined}
+          allowsArrowNavigation={keyboardNavigationBehavior === 'tab' || undefined}
           className={dragCellStyle}>
           {({isFocusVisibleWithinRow}) =>
             !(otherProps.isDisabled && tableVisualOptions.disabledBehavior === 'all') && (
@@ -2246,8 +2255,12 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T>(
         selectionStyle === 'checkbox' && (
           // Not sure what we want to do with this className, in Cell it currently overrides the className that would have been applied.
           // The `spread` otherProps must be after className in Cell.
-          // @ts-ignore
-          <Cell isSticky className={checkboxCellStyle}>
+          <Cell
+            isSticky
+            // @ts-ignore
+            className={checkboxCellStyle}
+            focusMode={keyboardNavigationBehavior === 'tab' ? 'child' : undefined}
+            allowsArrowNavigation={keyboardNavigationBehavior === 'tab' || undefined}>
             <Checkbox slot="selection" styles={selectionCheckbox} />
           </Cell>
         )}

packages/@react-spectrum/s2/test/TableView.test.tsx

@@ -21,6 +21,7 @@ import {pointerMap, User} from '@react-aria/test-utils';
 import React, {useState} from 'react';
 import {Tab, TabList, Tabs} from '../src/Tabs';
 import {Text} from '../src/Content';
+import {useDragAndDrop} from '../src/useDragAndDrop';
 import userEvent from '@testing-library/user-event';
 
 // @ts-ignore
@@ -292,4 +293,130 @@ describe('TableView', () => {
     await user.click(tableTester.getRows()[0]);
     expect(onSelectionChange).toHaveBeenCalled();
   });
+
+  describe('tab keyboard navigation', () => {
+    function TabNavTable(props) {
+      let {dragAndDropHooks} = useDragAndDrop({
+        getItems: keys => [...keys].map(key => ({'text/plain': `${key}`}))
+      });
+      return (
+        <TableView
+          aria-label="Tab mode table"
+          keyboardNavigationBehavior="tab"
+          selectionMode="multiple"
+          dragAndDropHooks={dragAndDropHooks}
+          {...props}>
+          <TableHeader>
+            <Column
+              isRowHeader
+              menuItems={
+                <MenuSection>
+                  <MenuItem>
+                    <Text slot="label">Filter</Text>
+                  </MenuItem>
+                </MenuSection>
+              }>
+              Name
+            </Column>
+            <Column
+              menuItems={
+                <MenuSection>
+                  <MenuItem>
+                    <Text slot="label">Filter</Text>
+                  </MenuItem>
+                </MenuSection>
+              }>
+              Type
+            </Column>
+            <Column>Notes</Column>
+          </TableHeader>
+          <TableBody>
+            <Row id="1" textValue="Foo 1">
+              <Cell>Foo 1</Cell>
+              <Cell>Bar 1</Cell>
+              <Cell>
+                <input type="text" aria-label="Foo 1 notes" />
+              </Cell>
+            </Row>
+            <Row id="2" textValue="Foo 2">
+              <Cell>Foo 2</Cell>
+              <Cell>Bar 2</Cell>
+              <Cell>
+                <input type="text" aria-label="Foo 2 notes" />
+              </Cell>
+            </Row>
+            <Row id="3" textValue="Foo 3">
+              <Cell>Foo 3</Cell>
+              <Cell>Bar 3</Cell>
+              <Cell>
+                <input type="text" aria-label="Foo 3 notes" />
+              </Cell>
+            </Row>
+          </TableBody>
+        </TableView>
+      );
+    }
+
+    it('row drag cell and checkbox cell auto focuses drag handle button/checkbox and allows arrow key nav', async () => {
+      let {getByRole, getAllByRole} = render(<TabNavTable />);
+      let tableTester = testUtilUser.createTester('Table', {root: getByRole('grid')});
+      let checkboxes = getAllByRole('checkbox');
+      let dragButton1 = getByRole('button', {name: 'Drag Foo 1'});
+
+      await user.tab();
+      await user.keyboard('{ArrowRight}');
+      expect(document.activeElement).toBe(dragButton1);
+
+      await user.keyboard('{ArrowRight}');
+      let row1 = tableTester.getRows()[0];
+      let cells = tableTester.getCells({element: row1});
+      expect(cells[1].contains(document.activeElement)).toBe(true);
+      expect(document.activeElement).toBe(checkboxes[1]);
+
+      await user.keyboard('{ArrowDown}');
+      expect(document.activeElement).toBe(checkboxes[2]);
+    });
+
+    it('column headers and selectAll header auto focuses their menu trigger/checkbox and allows arrow key nav', async () => {
+      let {getByRole, getAllByRole} = render(<TabNavTable />);
+      let tableTester = testUtilUser.createTester('Table', {root: getByRole('grid')});
+      let checkboxes = getAllByRole('checkbox');
+      let columns = tableTester.getColumns();
+
+      await user.tab();
+      await user.keyboard('{ArrowUp}');
+      expect(document.activeElement).toBe(columns[0]);
+      await user.keyboard('{ArrowRight}');
+      expect(document.activeElement).toBe(checkboxes[0]);
+      expect(columns[1].contains(document.activeElement)).toBe(true);
+
+      await user.keyboard('{ArrowRight}');
+      act(() => jest.runAllTimers());
+      expect(document.activeElement?.tagName.toLowerCase()).toBe('button');
+      expect(columns[2].contains(document.activeElement)).toBe(true);
+    });
+
+    it('textfield in cell works with tab mode', async () => {
+      let {getByRole} = render(<TabNavTable />);
+      let tableTester = testUtilUser.createTester('Table', {root: getByRole('grid')});
+      let cells = tableTester.getCells({element: tableTester.getRows()[0]});
+      let notesCell = cells[cells.length - 1];
+
+      await user.tab();
+      await user.keyboard('{ArrowLeft}');
+      expect(document.activeElement).toBe(notesCell);
+
+      await user.tab();
+      let input = getByRole('textbox', {name: 'Foo 1 notes'});
+      expect(document.activeElement).toBe(input);
+
+      await user.type(input, 'Foo');
+      expect(input).toHaveValue('Foo');
+      await user.keyboard('{ArrowDown}');
+      expect(document.activeElement).toBe(input);
+
+      await user.tab({shift: true});
+      expect(document.activeElement).toBe(notesCell);
+    });
+  });
 });

packages/dev/s2-docs/pages/react-aria/GridList.mdx

@@ -732,7 +732,7 @@ let photos = [
   items={photos}
   selectionMode="multiple"
   aria-label="Shared files">
-    {item => (
+  {item => (
     <GridListItem textValue={item.title}>
       <img src={item.src} alt="" />
       <Text>
@@ -744,6 +744,58 @@ let photos = [
 </GridList>
 ```
 
+You can further control if a row automatically focuses itself or its children on keyboard focus via `focusMode`. Futhermore, `allowsArrowNavigation` can be used to allow arrow key navigation from the row's children to adjacent rows.
+This allows keyboard users to navigate to the contents of the row without needing to tab in and out of the row even when in tab keyboard navigation.
+Be sure to only set `allowsArrowNavigation` on rows whose interactive content don't use arrow keys.
+
+```tsx render
+"use client";
+import {GridList, GridListItem, Text} from 'vanilla-starter/GridList';
+import {Button} from 'vanilla-starter/Button';
+import {useState} from 'react';
+
+///- begin collapse -///
+let initialItems = [
+  {id: 1, name: 'Apple', image: 'https://images.unsplash.com/photo-1630563451961-ac2ff27616ab?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.1.0'},
+  {id: 2, name: 'Peach', image: 'https://images.unsplash.com/photo-1642372849486-f88b963cb734?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.1.0'},
+  {id: 3, name: 'Blueberry', image: 'https://images.unsplash.com/photo-1606757389667-45c2024f9fa4?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.1.0'},
+  {id: 4, name: 'Broccoli', image: 'https://images.unsplash.com/photo-1685504445355-0e7bdf90d415?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.1.0'},
+  {id: 5, name: 'Brussels Sprouts', image: 'https://images.unsplash.com/photo-1685504507286-dc290728c01a?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.1.0'},
+  {id: 6, name: 'Peas', image: 'https://images.unsplash.com/photo-1587411768345-867e228218c8?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.1.0'},
+];
+///- end collapse -///
+
+function Example() {
+  let [items, setItems] = useState(initialItems);
+  return (
+    <GridList
+      items={items}
+      layout="stack"
+      orientation="vertical"
+      keyboardNavigationBehavior="tab"
+      aria-label="Shopping cart">
+      {item => (
+        <GridListItem
+          /*- begin highlight -*/
+          focusMode="child"
+          allowsArrowNavigation
+          /*- end highlight -*/
+          textValue={item.name}>
+          <img src={item.image} width={60} height={60} alt="" />
+          <Text>{item.name}</Text>
+          <Button
+            style={{width: 150, marginInlineStart: 10}}
+            variant="secondary"
+            onPress={() => setItems(prev => prev.filter(i => i.id !== item.id))}>
+            Remove from cart
+          </Button>
+        </GridListItem>
+      )}
+    </GridList>
+  );
+}
+```
+
 ## Drag and drop
 
 GridList supports drag and drop interactions when the `dragAndDropHooks` prop is provided using the <TypeLink links={docs.links} type={docs.exports.useDragAndDrop} /> hook. Users can drop data on the list as a whole, on individual items, insert new items between existing ones, or reorder items. React Aria supports drag and drop via mouse, touch, keyboard, and screen reader interactions. See the [drag and drop guide](dnd?component=GridList) to learn more.