@astryxdesign/core 0.4.6 → 0.4.7-canary.405f1ee

package/src/MultiSelector/MultiSelector.tsx

@@ -1420,8 +1420,17 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
         // A standalone divider between groups would orphan itself once its
         // neighbors are filtered out, so skip it while searching.
         if (!isSearching) {
+          // role="listbox" only permits option/group children; the divider
+          // carries no information the options don't, so it's hidden from
+          // the accessibility tree entirely rather than exposing
+          // role="separator" as a disallowed listbox child (axe
+          // aria-required-children).
           elements.push(
-            <Divider key={`divider-${i}`} xstyle={styles.divider} />,
+            <Divider
+              key={`divider-${i}`}
+              aria-hidden="true"
+              xstyle={styles.divider}
+            />,
           );
         }
       } else if (isSection(option)) {

package/src/Popover/Popover.test.tsx

@@ -2,7 +2,8 @@
 
 /**
  * @file Popover.test.tsx
- * @input Uses vitest, @testing-library/react, Popover component
+ * @input Uses vitest, @testing-library/react, Popover, Dialog,
+ *   SegmentedControl
  * @output Unit tests for Popover component behavior
  * @position Testing; validates Popover.tsx implementation
  *
@@ -14,6 +15,7 @@ import {render, screen, fireEvent} from '@testing-library/react';
 import React, {useRef} from 'react';
 import {Popover} from './Popover';
 import {Dialog} from '../Dialog';
+import {SegmentedControl, SegmentedControlItem} from '../SegmentedControl';
 
 // Store original matches to restore later
 const originalMatches = HTMLElement.prototype.matches;
@@ -306,6 +308,30 @@ describe('Popover', () => {
       expect(trigger).toHaveAttribute('aria-expanded', 'false');
     });
 
+    it('dismisses on Escape pressed inside a roving-focus list', () => {
+      render(
+        <Popover
+          content={
+            <SegmentedControl value="grid" onChange={() => {}} label="View">
+              <SegmentedControlItem value="grid" label="Grid" />
+              <SegmentedControlItem value="list" label="List" />
+            </SegmentedControl>
+          }
+          label="Test">
+          <button type="button">Open</button>
+        </Popover>,
+      );
+      const trigger = screen.getByRole('button', {name: 'Open'});
+      fireEvent.click(trigger);
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+      // From the segment, so the list's own key handler runs first. jsdom has
+      // no popover display, so the open content still reads as hidden.
+      const segment = screen.getByRole('radio', {name: 'Grid', hidden: true});
+      fireEvent.keyDown(segment, {key: 'Escape'});
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    });
+
     it('stays open on Escape when hasEscapeDismiss is false', () => {
       render(
         <Popover

package/src/Selector/Selector.test.tsx

@@ -2484,6 +2484,27 @@ describe('Selector section headings', () => {
     // visible heading must not announce it a second time.
     expect(heading).toHaveAttribute('aria-hidden', 'true');
   });
+
+  it('hides a standalone divider from the accessibility tree (#4994)', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={['Apple', {type: 'divider'}, 'Banana']}
+        value={undefined}
+        onChange={() => {}}
+      />,
+    );
+    await user.click(screen.getByRole('combobox'));
+
+    // role="listbox" only permits option/group children. The divider still
+    // renders role="separator" (unchanged visual/DOM), but must be excluded
+    // from the accessibility tree so it never reaches the listbox's exposed
+    // children (axe aria-required-children).
+    const divider = document.querySelector('[role="separator"]');
+    expect(divider).toBeTruthy();
+    expect(divider).toHaveAttribute('aria-hidden', 'true');
+  });
 });
 
 describe('Selector search focus ring', () => {

package/src/Selector/Selector.tsx

@@ -1344,7 +1344,17 @@ export function Selector<T extends SelectorOptionType>(
         if (isSearching) {
           continue;
         }
-        elements.push(<Divider key={`divider-${i}`} xstyle={styles.divider} />);
+        // role="listbox" only permits option/group children; the divider
+        // carries no information the options don't, so it's hidden from the
+        // accessibility tree entirely rather than exposing role="separator"
+        // as a disallowed listbox child (axe aria-required-children).
+        elements.push(
+          <Divider
+            key={`divider-${i}`}
+            aria-hidden="true"
+            xstyle={styles.divider}
+          />,
+        );
       } else if (isSection(option)) {
         const sectionItems: ReactNode[] = [];
         for (const opt of option.options) {

package/src/TabList/Tab.tsx

@@ -260,7 +260,11 @@ export function Tab({
     ...(isLabelHidden ? {'aria-label': label} : {}),
     [EDGE_COMP_ATTR]: '',
     'data-tab-value': value,
-    'aria-current': isSelected ? ('page' as const) : undefined,
+    // Generic `true` ("the current item within a set"), not `page`: the strip
+    // switches views in place at least as often as it navigates, and claiming
+    // "current page" when no page changed is a false statement to a screen
+    // reader. Stays truthful for the `href` case too, just less specific.
+    'aria-current': isSelected ? ('true' as const) : undefined,
     // Roving tabindex: the tab strip is a single Tab stop. The selected tab is
     // the tabbable one; the rest are reachable via arrow keys (handled by
     // TabList's onKeyDown). When no tab is selected, TabList's repair effect

package/src/TabList/TabList.test.tsx

@@ -106,7 +106,7 @@ describe('TabList', () => {
     );
   });
 
-  it('marks selected tab with aria-current', () => {
+  it('marks selected tab with a generic aria-current, not "page"', () => {
     render(
       <TabList value="home" onChange={() => {}}>
         <Tab value="home" label="Home" />
@@ -116,13 +116,30 @@ describe('TabList', () => {
 
     expect(screen.getByRole('button', {name: 'Home'})).toHaveAttribute(
       'aria-current',
-      'page',
+      'true',
     );
     expect(screen.getByRole('button', {name: 'Settings'})).not.toHaveAttribute(
       'aria-current',
     );
   });
 
+  it('marks a selected link tab with the same generic aria-current', () => {
+    render(
+      <TabList value="home" onChange={() => {}}>
+        <Tab value="home" label="Home" href="/home" />
+        <Tab value="settings" label="Settings" href="/settings" />
+      </TabList>,
+    );
+
+    expect(screen.getByRole('link', {name: 'Home'})).toHaveAttribute(
+      'aria-current',
+      'true',
+    );
+    expect(screen.getByRole('link', {name: 'Settings'})).not.toHaveAttribute(
+      'aria-current',
+    );
+  });
+
   it('calls onChange when a tab is clicked', async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();
@@ -148,7 +165,7 @@ describe('TabList', () => {
 
     expect(screen.getByRole('button', {name: 'Home'})).toHaveAttribute(
       'aria-current',
-      'page',
+      'true',
     );
 
     rerender(
@@ -163,7 +180,7 @@ describe('TabList', () => {
     );
     expect(screen.getByRole('button', {name: 'Settings'})).toHaveAttribute(
       'aria-current',
-      'page',
+      'true',
     );
   });
 

package/src/Table/BaseTable.tsx

@@ -183,9 +183,12 @@ function TableRowInner<T extends Record<string, unknown>>({
     );
 
     const isDefaultRenderer = !col.renderCell;
-    const rawContent = isDefaultRenderer
-      ? defaultCellRenderer(item, col.key)
-      : (col.renderCell?.(item) ?? null);
+    let rawContent: ReactNode = null;
+    if (!cellRenderProps.isContentSuppressed) {
+      rawContent = isDefaultRenderer
+        ? defaultCellRenderer(item, col.key)
+        : (col.renderCell?.(item) ?? null);
+    }
 
     // In truncate mode, wrap default-rendered string content in
     // <Text maxLines={1}> for smart tooltips that only appear

package/src/Table/Table.test.tsx

@@ -602,6 +602,41 @@ describe('BaseTable', () => {
       expect(calls[0]).toEqual({col: 'name', name: 'Alice'});
     });
 
+    it('isContentSuppressed renders an empty cell and never calls the column renderer', () => {
+      const rendered: string[] = [];
+      const withRenderer: TableColumn<User>[] = [
+        {
+          key: 'name',
+          header: 'Name',
+          renderCell: item => {
+            rendered.push(item.name);
+            return <b>{item.name}</b>;
+          },
+        },
+      ];
+      const plugin: TablePlugin<User> = {
+        transformBodyCell: (props, _column, item) =>
+          item.name === 'Bob' ? {...props, isContentSuppressed: true} : props,
+      };
+      render(
+        <BaseTable data={users} columns={withRenderer} plugins={[plugin]} />,
+      );
+      expect(rendered).toEqual(['Alice', 'Charlie']);
+      const cells = screen.getAllByRole('cell');
+      expect(cells[1]).toBeEmptyDOMElement();
+      expect(cells[0]).toHaveTextContent('Alice');
+    });
+
+    it('isContentSuppressed also suppresses the default renderer', () => {
+      const plugin: TablePlugin<User> = {
+        transformBodyCell: props => ({...props, isContentSuppressed: true}),
+      };
+      render(<BaseTable data={users} columns={columns} plugins={[plugin]} />);
+      for (const cell of screen.getAllByRole('cell')) {
+        expect(cell).toBeEmptyDOMElement();
+      }
+    });
+
     it('composes multiple plugins sequentially', () => {
       const plugin1: TablePlugin<User> = {
         transformTable: props => ({

package/src/Table/plugins/groupedRows/useTableGroupedRows-perf.test.tsx

@@ -0,0 +1,112 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useTableGroupedRows-perf.test.tsx
+ * @input Table, useTableGroupedRows, React testing utilities
+ * @output Performance tests for grouped-rows render behavior
+ * @position Test file; validates that grouping costs no extra row renders
+ *
+ * The plugin keeps group headers out of cell renderers per cell, at render
+ * time. Doing it by rewriting the columns instead would hand BaseTable a new
+ * column object on every render, and its element-by-element check on the
+ * resolved column array is what stops every row re-rendering.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {render, screen, act} from '@testing-library/react';
+import {useCallback, useMemo, useState} from 'react';
+import userEvent from '@testing-library/user-event';
+import {Table} from '../../Table';
+import type {TableColumn} from '../../types';
+import {useTableGroupedRows} from './useTableGroupedRows';
+
+interface Person extends Record<string, unknown> {
+  id: string;
+  name: string;
+  team: string;
+}
+
+const people: Person[] = [
+  {id: 'a', name: 'Alice', team: 'Core'},
+  {id: 'b', name: 'Bob', team: 'Core'},
+  {id: 'c', name: 'Carol', team: 'Infra'},
+];
+
+const EMPTY = new Set<string>();
+
+function GroupedRenderCountTable({
+  renderCounts,
+}: {
+  renderCounts: Record<string, number>;
+}) {
+  const [tick, setTick] = useState(0);
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(EMPTY);
+
+  const columns = useMemo<TableColumn<Person>[]>(
+    () => [
+      {
+        key: 'name',
+        header: 'Name',
+        renderCell: (item: Person) => {
+          renderCounts[item.id] = (renderCounts[item.id] ?? 0) + 1;
+          return item.name;
+        },
+      },
+    ],
+    [renderCounts],
+  );
+
+  const grouped = useTableGroupedRows<Person>({
+    data: people,
+    groupBy: useCallback((p: Person) => p.team, []),
+    collapsedGroups,
+    onToggleGroup: useCallback(
+      (key: string) =>
+        setCollapsedGroups(prev => {
+          const next = new Set(prev);
+          if (!next.delete(key)) {
+            next.add(key);
+          }
+          return next;
+        }),
+      [],
+    ),
+    getRowKey: useCallback((p: Person) => p.id, []),
+  });
+
+  return (
+    <>
+      <button type="button" onClick={() => setTick(t => t + 1)}>
+        bump {tick}
+      </button>
+      <Table
+        data={grouped.data}
+        columns={columns}
+        idKey={grouped.idKey}
+        plugins={{grouped: grouped.plugin}}
+      />
+    </>
+  );
+}
+
+describe('Grouped rows render performance', () => {
+  it('renders each real row once and no group header at all', () => {
+    const renderCounts: Record<string, number> = {};
+    render(<GroupedRenderCountTable renderCounts={renderCounts} />);
+    expect(renderCounts).toEqual({a: 1, b: 1, c: 1});
+  });
+
+  it('a re-render of the surrounding component re-renders no rows', async () => {
+    const user = userEvent.setup();
+    const renderCounts: Record<string, number> = {};
+    render(<GroupedRenderCountTable renderCounts={renderCounts} />);
+    const before = {...renderCounts};
+
+    await act(async () => {
+      await user.click(screen.getByRole('button', {name: /bump/}));
+    });
+
+    expect(screen.getByRole('button', {name: 'bump 1'})).toBeInTheDocument();
+    expect(renderCounts).toEqual(before);
+  });
+});

package/src/Table/plugins/groupedRows/useTableGroupedRows.test.tsx

@@ -5,6 +5,7 @@ import {render, screen, fireEvent, within} from '@testing-library/react';
 import {useState, useCallback} from 'react';
 import {Table} from '../../Table';
 import type {TableColumn} from '../../types';
+import {useTableRowStatus, type TableRowStatus} from '../rowStatus';
 import {useTableGroupedRows} from './useTableGroupedRows';
 
 interface Person extends Record<string, unknown> {
@@ -175,6 +176,105 @@ describe('useTableGroupedRows', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('never runs a column renderCell against a group header row', () => {
+    // The renderer that breaks: it keys a lookup off a field rather than
+    // printing it, so the header Proxy answering `''` is no better than
+    // `undefined`.
+    const TEAM_META: Record<string, {dot: string}> = {
+      Core: {dot: 'green'},
+      Infra: {dot: 'blue'},
+    };
+    const seen: Person[] = [];
+    const lookupColumns: TableColumn<Person>[] = [
+      {
+        key: 'team',
+        header: 'Team',
+        renderCell: item => {
+          seen.push(item);
+          return <span>{TEAM_META[item.team].dot}</span>;
+        },
+      },
+    ];
+
+    function LookupHarness() {
+      const [collapsed, setCollapsed] = useState<Set<string>>(EMPTY);
+      const grouped = useTableGroupedRows<Person>({
+        data: people,
+        groupBy: p => p.team,
+        collapsedGroups: collapsed,
+        onToggleGroup: k => setCollapsed(new Set([k])),
+        getRowKey: p => p.id,
+      });
+      return (
+        <Table
+          data={grouped.data}
+          columns={lookupColumns}
+          idKey={grouped.idKey}
+          plugins={{grouped: grouped.plugin}}
+        />
+      );
+    }
+
+    expect(() => render(<LookupHarness />)).not.toThrow();
+    expect(seen.map(p => p.name)).toEqual(['Alice', 'Bob', 'Carol']);
+    expect(screen.getByText('Core')).toBeInTheDocument();
+    expect(screen.getByText('Infra')).toBeInTheDocument();
+  });
+
+  describe.each([
+    ['grouped first', true],
+    ['rowStatus first', false],
+  ])(
+    'with a column contributed by another plugin (%s)',
+    (_label, groupedFirst) => {
+      // `grouped` and `rowStatus` are both absent from PLUGIN_ORDER, so the
+      // record's insertion order is the pipeline order. Whichever way round
+      // the consumer types it, the status column's renderCell must not see a
+      // header row.
+      const STATUS_BY_TEAM: Record<string, TableRowStatus> = {
+        Core: {color: 'success', label: 'Healthy'},
+        Infra: {color: 'error', label: 'Paging'},
+      };
+
+      function StatusHarness() {
+        const [collapsed, setCollapsed] = useState<Set<string>>(EMPTY);
+        const grouped = useTableGroupedRows<Person>({
+          data: people,
+          groupBy: p => p.team,
+          collapsedGroups: collapsed,
+          onToggleGroup: k => setCollapsed(new Set([k])),
+          getRowKey: p => p.id,
+        });
+        const rowStatus = useTableRowStatus<Person>({
+          getStatus: useCallback((item: Person) => {
+            const {color, label} = STATUS_BY_TEAM[item.team];
+            return {color, label};
+          }, []),
+        });
+        return (
+          <Table
+            data={grouped.data}
+            columns={columns}
+            idKey={grouped.idKey}
+            plugins={
+              groupedFirst
+                ? {grouped: grouped.plugin, rowStatus}
+                : {rowStatus, grouped: grouped.plugin}
+            }
+          />
+        );
+      }
+
+      it('renders the group headers without throwing', () => {
+        expect(() => render(<StatusHarness />)).not.toThrow();
+        expect(screen.getByText('Core')).toBeInTheDocument();
+        expect(screen.getByText('Infra')).toBeInTheDocument();
+        // One indicator per real row, none on the two headers.
+        expect(screen.getAllByRole('img')).toHaveLength(3);
+      });
+    },
+  );
+
   it('keeps a group collapsed across a data change (state keyed by group)', () => {
     function ChangingHarness() {
       const [collapsed, setCollapsed] = useState<Set<string>>(

package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx

@@ -41,8 +41,11 @@ function isGroupHeader(item: unknown): item is GroupHeader {
   );
 }
 
-// Proxy handler: any field access beyond the marker fields resolves to `''`
-// so user cell renderers (`item.name.toUpperCase()`) never throw on a header.
+// Proxy handler: any field access beyond the marker fields resolves to `''`,
+// which keeps anything that reads a header's data — the sortable and filtering
+// plugins, a consumer's own row handler — off `undefined`. Cell renderers are
+// handled at render time instead (see `transformBodyCell` below); the Proxy
+// never protected them, because `''` fails a lookup exactly as `undefined` does.
 const HEADER_PROXY_HANDLER: ProxyHandler<Record<string | symbol, unknown>> = {
   // eslint-disable-next-line @typescript-eslint/promise-function-async -- Proxy get trap, not a promise-returning fn
   get(t: Record<string | symbol, unknown>, prop: string | symbol): unknown {
@@ -54,12 +57,9 @@ const HEADER_PROXY_HANDLER: ProxyHandler<Record<string | symbol, unknown>> = {
 };
 
 /**
- * Build a synthetic header row wrapped in a Proxy so arbitrary field access
- * from user cell renderers (e.g. `item.name.toUpperCase()`) resolves to `''`
- * instead of throwing — BaseTable evaluates `col.renderCell(item)` on every
- * row (including synthetic headers) before `transformBodyRow` can replace the
- * row's cells. `transformBodyRow` then discards those cells and renders a
- * single full-width header cell.
+ * Build a synthetic header row wrapped in a Proxy so field access resolves to
+ * `''` instead of `undefined`. `transformBodyRow` then discards the row's
+ * cells and renders a single full-width header cell.
  */
 function makeHeader<T extends Record<string, unknown>>(
   groupKey: string,
@@ -301,6 +301,15 @@ export function useTableGroupedRows<T extends Record<string, unknown>>(
 
   const plugin = useMemo(
     (): TablePlugin<T> => ({
+      // A header row is not one of the caller's rows, so running a cell
+      // renderer against it can only misread it or throw — and the cells are
+      // discarded by `transformBodyRow` below regardless.
+      transformBodyCell(props, _column, item) {
+        if (!isGroupHeader(item)) {
+          return props;
+        }
+        return {...props, isContentSuppressed: true};
+      },
       // Replace a header row's pre-rendered cells with one full-width cell.
       transformBodyRow(props, item) {
         if (!isGroupHeader(item)) {

package/src/Table/plugins/selection/useTableSelection.test.tsx

@@ -13,6 +13,7 @@ import {act, render, renderHook, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Table} from '../../Table';
 import {useTableSelection} from './useTableSelection';
+import {colorVars} from '../../../theme/tokens.stylex';
 import type {BodyRowRenderProps, TableColumn} from '../../types';
 
 // =============================================================================
@@ -41,10 +42,12 @@ function SelectionTable({
   getIsItemSelectable,
   getIsItemEnabled,
   getRowLabel,
+  hasRowHighlight,
 }: {
   getIsItemSelectable?: (item: SelectableUser) => boolean;
   getIsItemEnabled?: (item: SelectableUser) => boolean;
   getRowLabel?: (item: SelectableUser) => string;
+  hasRowHighlight?: boolean;
 }) {
   const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
 
@@ -78,6 +81,7 @@ function SelectionTable({
     getIsItemSelectable,
     getIsItemEnabled,
     getRowLabel,
+    hasRowHighlight,
   });
 
   return (
@@ -211,6 +215,78 @@ describe('useTableSelection', () => {
     expect(headers).toHaveLength(3);
   });
 
+  describe('hasRowHighlight', () => {
+    const selectedBgColor = colorVars['--color-accent-muted'];
+
+    it('paints a checked row with the accent wash by default', async () => {
+      const user = userEvent.setup();
+      render(<SelectionTable />);
+
+      await user.click(screen.getAllByLabelText('Select row')[0]);
+
+      const row = screen.getAllByRole('row')[1];
+      expect(row.style.backgroundColor).toBe(selectedBgColor);
+      expect(row).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('leaves the row background alone when hasRowHighlight is false', async () => {
+      const user = userEvent.setup();
+      render(<SelectionTable hasRowHighlight={false} />);
+
+      await user.click(screen.getAllByLabelText('Select row')[0]);
+
+      const row = screen.getAllByRole('row')[1];
+      expect(row.style.backgroundColor).toBe('');
+      // The wash is opt-out; the semantics are not.
+      expect(row).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('clears an already-painted row when the flag flips to false', async () => {
+      const user = userEvent.setup();
+      const {rerender} = render(<SelectionTable />);
+
+      await user.click(screen.getAllByLabelText('Select row')[0]);
+      expect(screen.getAllByRole('row')[1].style.backgroundColor).toBe(
+        selectedBgColor,
+      );
+
+      rerender(<SelectionTable hasRowHighlight={false} />);
+
+      const row = screen.getAllByRole('row')[1];
+      expect(row.style.backgroundColor).toBe('');
+      expect(row).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('repaints an already-checked row when the flag flips back to true', async () => {
+      const user = userEvent.setup();
+      const {rerender} = render(<SelectionTable hasRowHighlight={false} />);
+
+      await user.click(screen.getAllByLabelText('Select row')[0]);
+      rerender(<SelectionTable hasRowHighlight />);
+
+      expect(screen.getAllByRole('row')[1].style.backgroundColor).toBe(
+        selectedBgColor,
+      );
+    });
+
+    it('never paints unchecked rows in either mode', async () => {
+      const user = userEvent.setup();
+      const {rerender} = render(<SelectionTable />);
+
+      await user.click(screen.getAllByLabelText('Select row')[0]);
+      expect(screen.getAllByRole('row')[2].style.backgroundColor).toBe('');
+      expect(screen.getAllByRole('row')[2]).not.toHaveAttribute(
+        'aria-selected',
+      );
+
+      rerender(<SelectionTable hasRowHighlight={false} />);
+      expect(screen.getAllByRole('row')[2].style.backgroundColor).toBe('');
+      expect(screen.getAllByRole('row')[2]).not.toHaveAttribute(
+        'aria-selected',
+      );
+    });
+  });
+
   it('unsubscribes detached row refs instead of accumulating listeners', () => {
     const getIsItemSelected = vi.fn(() => false);
     const {result, rerender} = renderHook(() =>