@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx

@@ -296,9 +296,10 @@ describe('useTableRowExpansion (detail panel)', () => {
       for (const cell of cellsOf('Ada')) {
         expect(cell).toHaveStyle({borderBottomWidth: '0'});
       }
-      expect(panelCell()).toHaveStyle({
-        borderBottomWidth: 'var(--border-width)',
-      });
+      // The token width, unless the row hands down its own.
+      expect(getComputedStyle(panelCell()).borderBottomWidth).toMatch(
+        /var\(--_table-panel-divider-width,\s*var\(--border-width\)\)/,
+      );
     });
 
     it('leaves collapsed rows keeping their own divider', () => {
@@ -310,16 +311,97 @@ describe('useTableRowExpansion (detail panel)', () => {
 
     it('draws no panel divider on a table without row dividers', () => {
       render(<Harness initialExpanded={new Set(['a'])} dividers="none" />);
-      expect(panelCell()).not.toHaveStyle({
-        borderBottomWidth: 'var(--border-width)',
-      });
+      expect(getComputedStyle(panelCell()).borderBottomWidth).not.toMatch(
+        /--border-width/,
+      );
+    });
+
+    it('reads the colour mode once per table, however many panels are open', () => {
+      const original = window.matchMedia;
+      const listeners = (open: Set<string>) => {
+        let count = 0;
+        window.matchMedia = (query: string) => {
+          const list = original
+            ? original(query)
+            : ({matches: false, media: query} as MediaQueryList);
+          return {
+            ...list,
+            matches: list.matches,
+            media: query,
+            addEventListener: () => {
+              count += 1;
+            },
+            removeEventListener: () => {},
+            addListener: () => {
+              count += 1;
+            },
+            removeListener: () => {},
+          } as MediaQueryList;
+        };
+        const {unmount} = render(<Harness initialExpanded={open} />);
+        unmount();
+        return count;
+      };
+      try {
+        expect(listeners(new Set(['a', 'b', 'c']))).toBe(
+          listeners(new Set(['a'])),
+        );
+      } finally {
+        window.matchMedia = original;
+      }
+    });
+
+    it("carries the row's own divider onto the panel (Table FR14)", () => {
+      render(<Harness />);
+      const row = cellsOf('Ada')[0].parentElement as HTMLTableRowElement;
+      // An app's (or a theme's) border on the row's cells.
+      for (const cell of row.cells) {
+        cell.style.borderBottomColor = 'rgb(255, 0, 0)';
+        cell.style.borderBottomStyle = 'dashed';
+      }
+      fireEvent.click(screen.getAllByRole('button', {name: /expand/i})[0]);
+      const cell = panelCell();
+      expect(cell.style.getPropertyValue('--_table-panel-divider-color')).toBe(
+        'rgb(255, 0, 0)',
+      );
+      expect(cell.style.getPropertyValue('--_table-panel-divider-style')).toBe(
+        'dashed',
+      );
+      // The panel keeps its own width (a value, never inherited from a panel
+      // around it) while the row's own border does not win.
+      expect(cell.style.getPropertyValue('--_table-panel-divider-width')).toBe(
+        'initial',
+      );
+      // A width set on the row's cells is the divider's too.
+      for (const rowCell of row.cells) {
+        rowCell.style.borderBottomWidth = '3px';
+      }
+      fireEvent.click(screen.getAllByRole('button', {name: /expand/i})[0]);
+      expect(cell.style.getPropertyValue('--_table-panel-divider-width')).toBe(
+        '3px',
+      );
+      fireEvent.click(screen.getAllByRole('button', {name: /collapse/i})[1]);
+      for (const rowCell of row.cells) {
+        rowCell.style.borderBottomWidth = '';
+      }
+      // An app's wider border on the row itself wins; the next commit
+      // (opening another row) reads it.
+      row.style.borderBottom = '3px solid rgb(0, 0, 255)';
+      fireEvent.click(screen.getAllByRole('button', {name: /expand/i})[0]);
+      expect(cell.style.getPropertyValue('--_table-panel-divider-width')).toBe(
+        '3px',
+      );
+      expect(cell.style.getPropertyValue('--_table-panel-divider-color')).toBe(
+        'rgb(0, 0, 255)',
+      );
     });
 
     it('draws the panel divider under grid dividers too', () => {
       render(<Harness initialExpanded={new Set(['a'])} dividers="grid" />);
-      expect(panelCell()).toHaveStyle({
-        borderBottomWidth: 'var(--border-width)',
-      });
+      // The token width, unless the row hands down its own.
+      expect(getComputedStyle(panelCell()).borderBottomWidth).toMatch(
+        /var\(--_table-panel-divider-width,\s*var\(--border-width\)\)/,
+      );
     });
   });
 

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -18,7 +18,13 @@
  * - /packages/core/src/Table/useTableRowExpansion.doc.mjs
  */
 
-import {useMemo, useRef, type ReactNode} from 'react';
+import {
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  type ReactNode,
+  type RefObject,
+} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   spacingVars,
@@ -29,6 +35,8 @@ import {
   easeVars,
 } from '../../../theme/tokens.stylex';
 import {tableRowMarker} from '../../table.stylex';
+import {panelDividerFor} from '../../rowDivider';
+import {useTheme, useThemeName} from '../../../theme/useTheme';
 import {Icon} from '../../../Icon';
 import {VisuallyHidden} from '../../../VisuallyHidden';
 import {resolveContextActions} from '../../tableContextMenu';
@@ -216,16 +224,19 @@ const dividerStyles = stylex.create({
   expandedRowCell: {
     borderBottomWidth: 0,
   },
+  // The row's divider, carried down: its row's themed or app-set border
+  // reaches the panel through `--_table-panel-divider-*` on the panel's cell
+  // (set after each commit, see ExpansionPanelCell), the tokens otherwise.
   panelCell: {
     borderBottomWidth: {
-      default: borderVars['--border-width'],
+      default: `var(--_table-panel-divider-width, ${borderVars['--border-width']})`,
       // Same rule TableCell uses: no trailing line under the last row of the
       // table. Scoped to the marker so <tbody>, also a :last-child, does not
       // match and suppress every panel's border.
       [stylex.when.ancestor(':last-child', tableRowMarker)]: '0',
     },
-    borderBottomStyle: 'solid',
-    borderBottomColor: colorVars['--color-border'],
+    borderBottomStyle: 'var(--_table-panel-divider-style, solid)',
+    borderBottomColor: `var(--_table-panel-divider-color, ${colorVars['--color-border']})`,
   },
 });
 
@@ -336,6 +347,73 @@ function ExpansionChevron({
   );
 }
 
+const PANEL_DIVIDER_PROPERTIES = [
+  '--_table-panel-divider-width',
+  '--_table-panel-divider-style',
+  '--_table-panel-divider-color',
+] as const;
+
+/**
+ * Carries the row's divider onto a panel cell where an override makes it
+ * differ from what the panel paints on its own (the divider tokens, in CSS),
+ * and carries nothing otherwise, so a later token or theme change reaches
+ * the panel the way it reaches the row.
+ */
+function carryPanelDivider(cell: HTMLTableCellElement): void {
+  const row = cell.parentElement?.previousElementSibling;
+  const edge = row == null ? null : panelDividerFor(row);
+  if (edge == null) {
+    return;
+  }
+  // What the panel paints with nothing carried.
+  const carried = PANEL_DIVIDER_PROPERTIES.map(name =>
+    cell.style.getPropertyValue(name),
+  );
+  if (carried.some(value => value !== '')) {
+    for (const name of PANEL_DIVIDER_PROPERTIES) {
+      cell.style.removeProperty(name);
+    }
+  }
+  const own = getComputedStyle(cell);
+  const isOverride =
+    edge.color !== own.borderBottomColor ||
+    edge.style !== own.borderBottomStyle ||
+    (edge.width !== 'initial' && edge.width !== own.borderBottomWidth);
+  if (!isOverride) {
+    return;
+  }
+  const next = [edge.width, edge.style, edge.color];
+  PANEL_DIVIDER_PROPERTIES.forEach((name, index) => {
+    cell.style.setProperty(name, next[index]);
+  });
+}
+
+/**
+ * One per table: when the colour mode or the theme changes (a Theme's, or
+ * the operating system's mode under `system`) the open panels' carried
+ * dividers are read again. The panels register their cells with the hook.
+ */
+function PanelDividerModeWatch({
+  cellsRef,
+}: {
+  cellsRef: RefObject<Set<HTMLTableCellElement>>;
+}) {
+  const {mode} = useTheme();
+  const themeName = useThemeName();
+  const lastRef = useRef({mode, themeName});
+  useLayoutEffect(() => {
+    const last = lastRef.current;
+    if (last.mode === mode && last.themeName === themeName) {
+      return;
+    }
+    lastRef.current = {mode, themeName};
+    for (const cell of cellsRef.current) {
+      carryPanelDivider(cell);
+    }
+  }, [mode, themeName, cellsRef]);
+  return null;
+}
+
 /**
  * The detail panel's cell. A component rather than a bare `<td>` so it can
  * read the table's density and divider mode off the context — to indent itself
@@ -345,15 +423,39 @@ function ExpansionChevron({
  */
 function ExpansionPanelCell({
   colSpan,
+  cellsRef,
   children,
 }: {
   colSpan: number;
+  cellsRef: RefObject<Set<HTMLTableCellElement>>;
   children: ReactNode;
 }) {
   const ctx = useTableContext();
   const hasRowDividers = ctx?.dividers === 'rows' || ctx?.dividers === 'grid';
+  const cellRef = useRef<HTMLTableCellElement>(null);
+  // The panel carries its row's divider (a theme's `table-cell` border or an
+  // app's own never reach this cell, which is not one of the row's cells).
+  // Read after each commit, and on a colour-mode change by the table's one
+  // PanelDividerModeWatch.
+  useLayoutEffect(() => {
+    if (hasRowDividers && cellRef.current != null) {
+      carryPanelDivider(cellRef.current);
+    }
+  });
+  useLayoutEffect(() => {
+    const cell = cellRef.current;
+    if (cell == null || !hasRowDividers) {
+      return;
+    }
+    const cells = cellsRef.current;
+    cells.add(cell);
+    return () => {
+      cells.delete(cell);
+    };
+  }, [cellsRef, hasRowDividers]);
   return (
     <td
+      ref={cellRef}
       colSpan={colSpan}
       {...stylex.props(
         expansionStyles.expandedCell,
@@ -414,6 +516,8 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
   // Final rendered column count, captured in transformColumns (pipeline step
   // 1) and read in transformBodyRow for the detail panel's colSpan.
   const columnCountRef = useRef(1);
+  // The open panels' cells, for the table's one colour-mode watch.
+  const panelCellsRef = useRef(new Set<HTMLTableCellElement>());
 
   const expansionColumn = useMemo(
     (): TableColumn<T> => ({
@@ -448,6 +552,15 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
 
   return useMemo(
     (): TablePlugin<T> => ({
+      // One colour-mode watch per table for the open panels' dividers.
+      transformTableContext(children: ReactNode): ReactNode {
+        return (
+          <>
+            {children}
+            <PanelDividerModeWatch cellsRef={panelCellsRef} />
+          </>
+        );
+      },
       transformColumns(columns: TableColumn<T>[]) {
         const withExpansion = [expansionColumn, ...columns];
         columnCountRef.current = withExpansion.length;
@@ -591,7 +704,9 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
               tableRowMarker,
               panelVariant === 'muted' && expansionStyles.expandedRow,
             )}>
-            <ExpansionPanelCell colSpan={columnCountRef.current}>
+            <ExpansionPanelCell
+              colSpan={columnCountRef.current}
+              cellsRef={panelCellsRef}>
               {renderExpanded(item)}
             </ExpansionPanelCell>
           </tr>

package/src/Table/plugins/sortable/__tests__/useTableSortable.a11y.test.tsx

@@ -0,0 +1,174 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/** @vitest-environment jsdom */
+
+/**
+ * @file useTableSortable.a11y.test.tsx
+ * @input Uses the sort module contract and plain-HTML positive and mutation fixtures
+ * @output Self-tests for the sort module's `table.sort.exposed` expectation
+ * @position Testing; proves the module contract the Table binding composes for sorted states
+ */
+
+import {afterEach, describe, expect, it} from 'vitest';
+import {
+  TABLE_PATTERN,
+  checkAccessibilitySpec,
+  createJsdomHarness,
+  type TableStateFacts,
+} from '@astryxdesign/a11y-spec';
+import {
+  TABLE_SORTABLE_PATTERN,
+  TABLE_SORT_MODULE,
+  type TableSortFacts,
+} from './useTableSortable.a11y';
+
+const COLUMNS = ['Name', 'Role', 'Location'] as const;
+const ADA = ['Ada', 'Engineer', 'London'] as const;
+const GRACE = ['Grace', 'Admiral', 'Arlington'] as const;
+const SORTED: TableSortFacts['sort'] = [{column: 0, direction: 'descending'}];
+
+interface Fixture {
+  readonly id: string;
+  readonly facts: TableStateFacts & TableSortFacts;
+  readonly html: string;
+}
+
+/** A labelled data table; `ariaSort` is authored per column header index. */
+function html(
+  ariaSort: Readonly<Record<number, string>>,
+  rows: ReadonlyArray<ReadonlyArray<string>>,
+): string {
+  const headers = COLUMNS.map((column, index) => {
+    const sort =
+      ariaSort[index] == null ? '' : `aria-sort="${ariaSort[index]}"`;
+    return `<th data-header scope="col" ${sort}>${column}</th>`;
+  }).join('');
+  const body = rows
+    .map(row => `<tr>${row.map(value => `<td>${value}</td>`).join('')}</tr>`)
+    .join('');
+  return `<table data-table aria-label="Team members"><thead><tr>${headers}</tr></thead><tbody>${body}</tbody></table>`;
+}
+
+const facts = (sort: TableSortFacts['sort']): Fixture['facts'] => ({
+  label: 'Team members',
+  columnHeaders: [...COLUMNS],
+  rows: 3,
+  rowHeaders: [],
+  cells: 0,
+  sort,
+});
+
+// The sorted fixtures render Grace before Ada, so the rows follow the
+// descending Name sort they declare; the violating twins keep those rows so
+// only the exposed state is wrong.
+const CONFORMING: ReadonlyArray<Fixture> = [
+  {
+    id: 'conforming-sorted',
+    facts: facts(SORTED),
+    html: html({0: 'descending', 2: 'none'}, [GRACE, ADA]),
+  },
+  {id: 'conforming-unsorted', facts: facts([]), html: html({}, [ADA, GRACE])},
+];
+const VIOLATING: ReadonlyArray<Fixture> = [
+  {
+    id: 'violating-sort-missing',
+    facts: facts(SORTED),
+    html: html({}, [GRACE, ADA]),
+  },
+  {
+    id: 'violating-sort-direction',
+    facts: facts(SORTED),
+    html: html({0: 'ascending'}, [GRACE, ADA]),
+  },
+  {
+    id: 'violating-sort-stale',
+    facts: facts([]),
+    html: html({1: 'ascending'}, [ADA, GRACE]),
+  },
+];
+
+afterEach(() => document.body.replaceChildren());
+
+async function sortResult(fixture: Fixture) {
+  const container = document.createElement('div');
+  document.body.append(container);
+  const run = await checkAccessibilitySpec({
+    spec: TABLE_SORTABLE_PATTERN,
+    binding: 'fixture',
+    state: fixture.id,
+    facts: fixture.facts,
+    mount: async () => {
+      container.innerHTML = fixture.html;
+      const related: Record<string, Element> = {};
+      container.querySelectorAll('[data-header]').forEach((header, index) => {
+        related[`column-header-${index}`] = header;
+      });
+      return createJsdomHarness({
+        subject: container.querySelector('[data-table]')!,
+        related,
+      });
+    },
+    unmount: () => {
+      container.innerHTML = '';
+    },
+  });
+  const result = run.results.find(
+    row => row.expectation === 'table.sort.exposed',
+  );
+  if (result == null) {
+    throw new Error(`no table.sort.exposed result for ${fixture.id}`);
+  }
+  return result;
+}
+
+describe('the sort module contract', () => {
+  it('composes into the table pattern without changing the base', () => {
+    expect(TABLE_SORTABLE_PATTERN.pattern).toBe('table');
+    expect(
+      TABLE_SORTABLE_PATTERN.expectations.map(expectation => expectation.id),
+    ).toEqual([
+      ...TABLE_PATTERN.expectations.map(expectation => expectation.id),
+      'table.sort.exposed',
+    ]);
+    expect(
+      TABLE_PATTERN.expectations.map(expectation => expectation.id),
+    ).not.toContain('table.sort.exposed');
+    expect(TABLE_SORT_MODULE.module).toBe('useTableSortable');
+  });
+
+  it.each(CONFORMING.map(fixture => [fixture.id, fixture] as const))(
+    'passes against %s',
+    async (_id, fixture) => {
+      const result = await sortResult(fixture);
+      expect(result.status, result.detail ?? '').toBe('pass');
+    },
+  );
+
+  it.each(VIOLATING.map(fixture => [fixture.id, fixture] as const))(
+    'fails against %s, which removes its outcome',
+    async (_id, fixture) => {
+      const result = await sortResult(fixture);
+      expect(result.status).toBe('fail');
+      expect(result.detail ?? '').not.toBe('');
+    },
+  );
+
+  it.each(
+    [...CONFORMING, ...VIOLATING]
+      .filter(fixture => fixture.facts.sort.length > 0)
+      .map(fixture => [fixture.id, fixture] as const),
+  )('%s renders its rows in the declared order', (_id, fixture) => {
+    const container = document.createElement('div');
+    container.innerHTML = fixture.html;
+    for (const {column, direction} of fixture.facts.sort) {
+      const values = [...container.querySelectorAll('tbody > tr')].map(
+        row => row.children[column]?.textContent ?? '',
+      );
+      const ordered = [...values].sort();
+      if (direction === 'descending') {
+        ordered.reverse();
+      }
+      expect(values.length).toBeGreaterThan(1);
+      expect(values).toEqual(ordered);
+    }
+  });
+});

package/src/Table/plugins/sortable/__tests__/useTableSortable.a11y.ts

@@ -0,0 +1,86 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useTableSortable.a11y.ts
+ * @input The shared Table contract's module seam and the APG Table pattern's sort-state requirement
+ * @output TABLE_SORT_MODULE, TableSortFacts, TableSortDirection, and TABLE_SORTABLE_PATTERN — the accessibility semantics the sort module adds to a table: `aria-sort` on exactly the sorted column headers
+ * @position Module contract owned beside useTableSortable; a Table binding composes it only for states rendered with the sort module (`spec:AST-020/FR15`)
+ */
+
+import {
+  TABLE_AST_020_FR15,
+  composeTablePattern,
+  tableApgRequirement,
+  type TableModuleContract,
+} from '@astryxdesign/a11y-spec';
+
+const APG_SORT = tableApgRequirement(
+  'If the table contains sortable columns or rows, aria-sort is set to an appropriate value on the header cell element for the sorted column or row as described in the Grid and Table Properties Practice.',
+);
+
+const TABLE_ACCESSIBILITY = {
+  standard: 'astryx',
+  id: 'component:Table',
+  clause: 'Accessibility contract',
+  url: 'https://github.com/facebook/astryx/blob/6d4f178a24a8fee1f201911a55f595db9e5ae117/packages/core/src/Table/Table.spec.md#L216-L218',
+  requirement:
+    'Native table semantics, column-header scope, sort `aria-sort`, selection `aria-selected`, CheckboxInput labels, and expansion `aria-expanded` remain unchanged.',
+} as const;
+
+/** The two directions a sorted header can expose. */
+export type TableSortDirection = 'ascending' | 'descending';
+
+/** What a binding knows about the sort state of one table. */
+export interface TableSortFacts {
+  /** The sorted columns, by index into `columnHeaders`. Empty when unsorted. */
+  readonly sort: ReadonlyArray<{
+    readonly column: number;
+    readonly direction: TableSortDirection;
+  }>;
+}
+
+export const TABLE_SORT_MODULE: TableModuleContract<TableSortFacts> = {
+  module: 'useTableSortable',
+  scope: 'the sort state on its column headers.',
+  expectations: [
+    {
+      id: 'table.sort.exposed',
+      outcome:
+        'The header of each sorted column states its sort direction and no other header claims one, so people know how the rows are ordered.',
+      sources: [TABLE_AST_020_FR15, APG_SORT, TABLE_ACCESSIBILITY],
+      wcagOutcome:
+        'Supports WCAG 2.2 1.3.1 Info and Relationships by making the order the rows are presented in programmatically available.',
+      covers: ['1.3.1-info-and-relationships', 'apg-interaction'],
+      appliesWhen: {
+        condition: 'the binding designates column headers',
+        test: facts => facts.columnHeaders.length > 0,
+      },
+      evidenceLayer: 'dom',
+      enforcement: 'required',
+      run: async ({harness, facts}) => {
+        for (const [index, title] of facts.columnHeaders.entries()) {
+          const header = await harness.related(`column-header-${index}`);
+          const sort = await header.attribute('aria-sort');
+          const expected =
+            facts.sort.find(entry => entry.column === index)?.direction ?? null;
+          if (expected == null) {
+            if (sort != null && sort !== 'none') {
+              throw new Error(
+                `the unsorted "${title}" header claims aria-sort="${sort}"`,
+              );
+            }
+          } else if (sort !== expected) {
+            throw new Error(
+              `the "${title}" header is sorted ${expected} but exposes ${
+                sort == null ? 'no aria-sort' : `aria-sort="${sort}"`
+              }`,
+            );
+          }
+        }
+      },
+    },
+  ],
+};
+
+/** The table contract for states rendered with the sort module. */
+export const TABLE_SORTABLE_PATTERN = composeTablePattern(TABLE_SORT_MODULE);

package/src/Table/plugins/sortable/useTableSortable.test.tsx

@@ -421,18 +421,6 @@ describe('useTableSortable', () => {
       expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
     });
 
-    it('sets aria-sort="descending" on sorted descending th', () => {
-      render(
-        <SortableTable
-          initialSort={[{sortKey: 'name', direction: 'descending'}]}
-        />,
-      );
-
-      const headers = screen.getAllByRole('columnheader');
-      const nameHeader = headers.find(h => h.textContent?.includes('Name'));
-      expect(nameHeader).toHaveAttribute('aria-sort', 'descending');
-    });
-
     it('does not set aria-sort on unsorted columns', () => {
       render(
         <SortableTable

package/src/Table/plugins/stickyColumns/useTableStickyColumns.test.tsx

@@ -13,7 +13,7 @@
  * jsdom-visible, plugin-owned signal that a column is pinned and at what offset.
  */
 
-import {describe, it, expect} from 'vitest';
+import {afterEach, describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Table} from '../../Table';
 import {useTableStickyColumns} from './useTableStickyColumns';
@@ -281,4 +281,54 @@ describe('useTableStickyColumns', () => {
       expect(getHeaderCell('team').style.position).toBe('');
     });
   });
+
+  describe('the scroll container attaches once', () => {
+    afterEach(() => {
+      vi.unstubAllGlobals();
+    });
+
+    it.each([true, false])(
+      'keeps one attach across renders with column resize composed (resize first: %s)',
+      resizeFirst => {
+        let observers = 0;
+        vi.stubGlobal(
+          'ResizeObserver',
+          class {
+            constructor() {
+              observers += 1;
+            }
+            observe() {}
+            unobserve() {}
+            disconnect() {}
+          },
+        );
+        function Harness({tick}: {tick: number}) {
+          const sticky = useTableStickyColumns<Row>({startKeys: ['name']});
+          const resize = useTableColumnResize<Row>({
+            columns: columns as TableColumn<Record<string, unknown>>[],
+          });
+          return (
+            <Table
+              data={data}
+              columns={columns}
+              idKey="id"
+              aria-describedby={`tick-${tick}`}
+              plugins={
+                resizeFirst
+                  ? {resize, stickyColumns: sticky}
+                  : {stickyColumns: sticky, resize}
+              }
+            />
+          );
+        }
+        const {rerender} = render(<Harness tick={0} />);
+        const attached = observers;
+        rerender(<Harness tick={1} />);
+        rerender(<Harness tick={2} />);
+        rerender(<Harness tick={3} />);
+        // Three plain re-renders: no plugin's scroll container re-attaches.
+        expect(observers).toBe(attached);
+      },
+    );
+  });
 });