add focusVisibleWithin to table cell as well

Author: LFDanLu

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

@@ -661,7 +661,9 @@ export interface CellRenderProps {
    * Whether the cell is currently hovered with a mouse.
    * @selector [data-hovered]
    */
-  isHovered: boolean
+  isHovered: boolean,
+  /** Whether the cell's children have keyboard focus. */
+  isFocusVisibleWithin: boolean
 }
 
 export interface CellProps extends RenderProps<CellRenderProps> {
@@ -1020,6 +1022,8 @@ function TableRow<T>({item}: {item: GridNode<T>}) {
     ref
   );
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
+  // TODO: would we also want to to check isFocusWithin as well?
+  // TODO: Should isFocusVisible be (isFocusVisible || isFocusVisibleWithin) or should they exist as separate states
   let {
     isFocusVisible: isFocusVisibleWithin,
     focusProps: focusWithinProps
@@ -1161,6 +1165,10 @@ function TableCell<T>({cell}: {cell: GridNode<T>}) {
     shouldSelectOnPressUp: !!dragState
   }, state, ref);
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
+  let {
+    isFocusVisible: isFocusVisibleWithin,
+    focusProps: focusWithinProps
+  } = useFocusRing({within: true});
   let {hoverProps, isHovered} = useHover({});
 
   let props: CellProps = cell.props;
@@ -1172,18 +1180,20 @@ function TableCell<T>({cell}: {cell: GridNode<T>}) {
       isFocused,
       isFocusVisible,
       isPressed,
-      isHovered
+      isHovered,
+      isFocusVisibleWithin
     }
   });
 
   return (
     <td
-      {...mergeProps(filterDOMProps(props as any), gridCellProps, focusProps, hoverProps)}
+      {...mergeProps(filterDOMProps(props as any), gridCellProps, focusProps, hoverProps, focusWithinProps)}
       {...renderProps}
       ref={ref}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
-      data-pressed={isPressed || undefined}>
+      data-pressed={isPressed || undefined}
+      data-focus-visible-within={isFocusVisibleWithin || undefined}>
       {renderProps.children}
     </td>
   );

packages/react-aria-components/test/Table.test.js

@@ -769,8 +769,8 @@ describe('Table', () => {
     expect(onScroll).toHaveBeenCalled();
   });
 
-  it('should support data-focus-visible-within', async () => {
-    let {getAllByRole} = renderTable();
+  it('should support data-focus-visible-within for rows and cell', async () => {
+    let {getAllByRole} = renderTable({tableProps: {selectionMode: 'multiple'}});
     let items = getAllByRole('row');
     expect(items[1]).not.toHaveAttribute('data-focus-visible-within', 'true');
 
@@ -779,9 +779,18 @@ describe('Table', () => {
     expect(items[1]).toHaveAttribute('data-focus-visible-within', 'true');
     await user.keyboard('{ArrowRight}');
 
-    let cell = within(items[1]).getAllByRole('rowheader')[0];
-    expect(document.activeElement).toBe(cell);
-    expect(cell).toHaveAttribute('data-focus-visible', 'true');
+    let checkboxCell = within(items[1]).getAllByRole('gridcell')[0];
+    let checkbox = within(items[1]).getByRole('checkbox');
+    expect(document.activeElement).toBe(checkbox);
+    expect(checkboxCell).not.toHaveAttribute('data-focus-visible', 'true');
+    expect(checkboxCell).toHaveAttribute('data-focus-visible-within', 'true');
+    expect(items[1]).toHaveAttribute('data-focus-visible-within', 'true');
+    await user.keyboard('{ArrowRight}');
+
+    let tableCell = within(items[1]).getAllByRole('rowheader')[0];
+    expect(document.activeElement).toBe(tableCell);
+    expect(tableCell).toHaveAttribute('data-focus-visible', 'true');
+    expect(tableCell).toHaveAttribute('data-focus-visible-within', 'true');
     expect(items[1]).toHaveAttribute('data-focus-visible-within', 'true');
 
     await user.keyboard('{ArrowDown}');