@astryxdesign/core 0.7.5 → 0.7.6-canary.00146a7

package/src/TreeList/__tests__/TreeList.a11y.chromium.spec.ts

@@ -1,138 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y scope ^(internal/a11y-spec/src/patterns/tree-view|internal/a11y-spec/src/harness|packages/core/src/TreeList/|packages/core/src/hooks/useTreeFocus|apps/storybook/stories/TreeListTreeViewA11y)
-
-/**
- * @file TreeList.a11y.chromium.spec.ts
- * @input Built TreeList tree-view stories and TREE_VIEW_PATTERN in real Chromium
- * @output Browser evidence for every tree-view expectation across the binding's states
- * @position Chromium lane of the TreeList tree-view binding (component:TreeList AR1)
- */
-
-import {
-  expect,
-  test,
-  type CDPSession,
-  type Locator,
-  type Page,
-} from '@playwright/test';
-import {
-  TREE_VIEW_PATTERN,
-  blockingResults,
-  checkAccessibilitySpec,
-  formatFailures,
-  neverExercised,
-  summarize,
-  type BindingResult,
-} from '@astryxdesign/a11y-spec';
-import {
-  createChromiumHarness,
-  holdMotionStill,
-} from '@astryxdesign/a11y-spec/chromium';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-import {
-  TREE_LIST_BINDING_STATES,
-  type TreeListBindingState,
-} from './TreeList.a11y.states';
-
-let storybook: StaticServer;
-
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-function storyUrl(storyId: string): string {
-  return `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`;
-}
-
-function rowLocator(page: Page, id: string): Locator {
-  return page.locator(
-    `#storybook-root [role="treeitem"][data-tree-id="${id}"]`,
-  );
-}
-
-async function mountState(
-  page: Page,
-  state: TreeListBindingState,
-): Promise<{subject: Locator; related: Record<string, Locator>}> {
-  await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
-  await holdMotionStill(page);
-  const subject = rowLocator(page, state.subject);
-  await subject.waitFor({state: 'attached'});
-  const root = page.locator('#storybook-root');
-  const related: Record<string, Locator> = {
-    tree: root.getByRole('tree'),
-    before: root.getByRole('button', {name: 'Before the tree'}),
-    after: root.getByRole('button', {name: 'After the tree'}),
-    group: subject.locator('[role="group"]'),
-  };
-  for (const [name, id] of Object.entries(state.relations)) {
-    related[name] = rowLocator(page, id);
-  }
-  return {subject, related};
-}
-
-async function runState(
-  page: Page,
-  cdp: CDPSession,
-  state: TreeListBindingState,
-): Promise<BindingResult> {
-  return checkAccessibilitySpec({
-    spec: TREE_VIEW_PATTERN,
-    binding: 'TreeList',
-    state: state.id,
-    facts: state.facts,
-    mount: async () => {
-      const {subject, related} = await mountState(page, state);
-      return createChromiumHarness({page, cdp, subject, related});
-    },
-  });
-}
-
-// Checking coverage runs every state again, which on a loaded runner nears
-// the per-test timeout as one test. It runs as one serial part per state,
-// sharing their results, then one check over all of them.
-test.describe('every tree-view expectation is exercised by a TreeList state', () => {
-  test.describe.configure({mode: 'serial'});
-  const results: BindingResult[] = [];
-
-  for (const state of TREE_LIST_BINDING_STATES) {
-    test(`runs ${state.id}`, async ({page}) => {
-      const cdp = await page.context().newCDPSession(page);
-      results.push(await runState(page, cdp, state));
-    });
-  }
-
-  test('no expectation is left unexercised', () => {
-    // Every part ran in this worker; this test alone proves nothing.
-    expect(results.map(result => result.state).sort()).toEqual(
-      TREE_LIST_BINDING_STATES.map(state => state.id).sort(),
-    );
-    expect(neverExercised(results)).toEqual([]);
-  });
-});
-
-for (const state of TREE_LIST_BINDING_STATES) {
-  test(`TreeList [${state.id}] — ${state.summary}`, async ({page}) => {
-    const cdp = await page.context().newCDPSession(page);
-    const result = await runState(page, cdp, state);
-    const report = summarize(TREE_VIEW_PATTERN, [result]);
-    expect(formatFailures(blockingResults([result]))).toBe('');
-    expect(
-      result.results.filter(
-        row => row.status !== 'pass' && row.status !== 'not-applicable',
-      ),
-    ).toEqual([]);
-    expect(report.unrunLayers).toEqual([]);
-    expect(report.counts.unexpectedPass).toBe(0);
-  });
-}

package/src/TreeList/__tests__/TreeList.a11y.renders.tsx

@@ -1,44 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file TreeList.a11y.renders.tsx
- * @input One TreeList tree-view binding state
- * @output The React tree every lane renders for that state (the jsdom test directly, the story through Storybook)
- * @position Shared fixture for the TreeList tree-view binding
- */
-
-import type {ReactElement} from 'react';
-import {TreeList} from '../TreeList';
-import type {TreeListItemData} from '../TreeListTypes';
-import {
-  TREE_LIST_LABEL,
-  type TreeListBindingState,
-} from './TreeList.a11y.states';
-
-export function renderTreeListState(
-  state: Pick<TreeListBindingState, 'expanded' | 'disabled' | 'direction'>,
-): ReactElement {
-  const expanded = (id: string) => state.expanded.includes(id);
-  const disabled = (id: string) => state.disabled?.includes(id) ?? false;
-  const items: TreeListItemData[] = [
-    {
-      id: 'docs',
-      label: 'Documents',
-      isExpanded: expanded('docs'),
-      isDisabled: disabled('docs'),
-      children: [
-        {id: 'annual', label: 'Annual report'},
-        {id: 'budget', label: 'Budget'},
-      ],
-    },
-    {id: 'photos', label: 'Photos', isDisabled: disabled('photos')},
-    {id: 'trash', label: 'Trash', isDisabled: disabled('trash')},
-  ];
-  return (
-    <div dir={state.direction ?? 'ltr'}>
-      <button type="button">Before the tree</button>
-      <TreeList aria-label={TREE_LIST_LABEL} items={items} />
-      <button type="button">After the tree</button>
-    </div>
-  );
-}

package/src/TreeList/__tests__/TreeList.a11y.states.ts

@@ -1,164 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file TreeList.a11y.states.ts
- * @input TreeList's representative tree-view states and the facts TREE_VIEW_PATTERN reads
- * @output TREE_LIST_BINDING_STATES, the shared item data, and the explicit ownership exclusions for this binding
- * @position Binding inventory shared by the jsdom test, the Chromium spec, and the story (component:TreeList AR1)
- */
-
-import type {TreeViewStateFacts} from '@astryxdesign/a11y-spec';
-
-export interface TreeListBindingState {
-  readonly id: string;
-  readonly summary: string;
-  readonly storyId: string;
-  /** `data-tree-id` of the subject row. */
-  readonly subject: string;
-  /** `data-tree-id` of each relation row the facts say exists. */
-  readonly relations: Readonly<
-    Partial<
-      Record<
-        'first-child' | 'parent' | 'next' | 'previous' | 'typeahead-target',
-        string
-      >
-    >
-  > & {readonly first: string; readonly last: string};
-  readonly facts: TreeViewStateFacts;
-  /** Which parent rows start expanded. */
-  readonly expanded: ReadonlyArray<string>;
-  /** Which rows are disabled. */
-  readonly disabled?: ReadonlyArray<string>;
-  readonly direction?: 'ltr' | 'rtl';
-}
-
-export const TREE_LIST_LABEL = 'Files';
-
-function facts(
-  overrides: Partial<TreeViewStateFacts> = {},
-): TreeViewStateFacts {
-  return {
-    hasChildren: true,
-    expanded: false,
-    disabled: false,
-    tabbable: true,
-    level: 1,
-    position: 1,
-    setSize: 3,
-    hasNext: true,
-    hasPrevious: false,
-    hasParent: false,
-    rtl: false,
-    typeaheadCharacter: 't',
-    enterToggles: true,
-    ...overrides,
-  };
-}
-
-const story = (id: string) => `a11y-treelist-tree-view--${id}`;
-
-export const TREE_LIST_BINDING_STATES = [
-  {
-    id: 'closed-parent-tab-stop',
-    summary: "the closed Documents parent, the tree's one Tab stop",
-    storyId: story('closed-parent-tab-stop'),
-    subject: 'docs',
-    relations: {
-      next: 'photos',
-      first: 'docs',
-      last: 'trash',
-      'first-child': 'annual',
-      'typeahead-target': 'trash',
-    },
-    facts: facts(),
-    expanded: [],
-  },
-  {
-    id: 'open-parent-tab-stop',
-    summary: 'the open Documents parent with its child group',
-    storyId: story('open-parent-tab-stop'),
-    subject: 'docs',
-    relations: {
-      next: 'annual',
-      first: 'docs',
-      last: 'trash',
-      'first-child': 'annual',
-      'typeahead-target': 'trash',
-    },
-    facts: facts({expanded: true}),
-    expanded: ['docs'],
-  },
-  {
-    id: 'end-node',
-    summary: 'the Photos end node, which is not the Tab stop',
-    storyId: story('end-node'),
-    subject: 'photos',
-    relations: {
-      next: 'trash',
-      previous: 'docs',
-      first: 'docs',
-      last: 'trash',
-      'typeahead-target': 'docs',
-    },
-    facts: facts({
-      hasChildren: false,
-      tabbable: false,
-      position: 2,
-      hasPrevious: true,
-      typeaheadCharacter: 'd',
-      enterToggles: false,
-    }),
-    expanded: [],
-  },
-  {
-    id: 'closed-parent-rtl',
-    summary: 'the closed Documents parent in a right-to-left tree',
-    storyId: story('closed-parent-rtl'),
-    subject: 'docs',
-    relations: {
-      next: 'photos',
-      first: 'docs',
-      last: 'trash',
-      'first-child': 'annual',
-      'typeahead-target': 'trash',
-    },
-    facts: facts({rtl: true}),
-    expanded: [],
-    direction: 'rtl',
-  },
-  {
-    id: 'disabled-end-node',
-    summary:
-      'the disabled Trash end node: exposed and positioned, not operable',
-    storyId: story('disabled-end-node'),
-    subject: 'trash',
-    relations: {previous: 'photos', first: 'docs', last: 'trash'},
-    facts: facts({
-      hasChildren: false,
-      disabled: true,
-      tabbable: false,
-      position: 3,
-      hasNext: false,
-      hasPrevious: true,
-      typeaheadCharacter: null,
-      enterToggles: false,
-    }),
-    expanded: [],
-    disabled: ['trash'],
-  },
-] as const satisfies ReadonlyArray<TreeListBindingState>;
-
-export const TREE_LIST_EXCLUSIONS = [
-  {
-    id: 'row-name-composition',
-    owner: 'component:TreeList AR1 and TreeList.test.tsx',
-    reason:
-      "This binding proves each row has a treeitem role and a non-empty name. Which text makes up that name — the label alone, without the chevron toggle, description, or start and end content — is the record's row-naming requirement, proven by TreeList's own name tests and browser evidence rather than by the shared pattern.",
-  },
-  {
-    id: 'selection-keyboard',
-    owner: 'component:TreeList AR1 and DEC-2',
-    reason:
-      'Selection is caller-owned (isSelected) with at most one row selected; the tree adopts no selection keyboard (Shift or Control combinations; Space is activation, covered by the contract) and not the optional * key, so the contract asserts only that the tree makes no multiselect claim.',
-  },
-] as const;

package/src/TreeList/__tests__/TreeList.a11y.test.tsx

@@ -1,138 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/** @vitest-environment jsdom */
-
-/**
- * @file TreeList.a11y.test.tsx
- * @input TREE_VIEW_PATTERN bound to TreeList's representative states
- * @output jsdom-lane proof of the DOM expectations and an honest "unrun" report for the browser layers
- * @position Binding test for component:TreeList AR1 (the Chromium spec covers the rest)
- */
-
-import {cleanup, render, screen} from '@testing-library/react';
-import {describe, expect, it} from 'vitest';
-import {
-  TREE_VIEW_PATTERN,
-  checkAccessibilitySpec,
-  createJsdomHarness,
-  expectAccessibilitySpec,
-  summarize,
-  type BindingResult,
-} from '@astryxdesign/a11y-spec';
-import {renderTreeListState} from './TreeList.a11y.renders';
-import {
-  TREE_LIST_BINDING_STATES,
-  TREE_LIST_EXCLUSIONS,
-  type TreeListBindingState,
-} from './TreeList.a11y.states';
-
-function row(id: string): Element {
-  const element = document.querySelector(
-    `[role="treeitem"][data-tree-id="${id}"]`,
-  );
-  if (element == null) {
-    throw new Error(`no treeitem row "${id}"`);
-  }
-  return element;
-}
-
-function relatedFor(
-  state: TreeListBindingState,
-): Readonly<Record<string, Element>> {
-  const related: Record<string, Element> = {
-    tree: screen.getByRole('tree'),
-    before: screen.getByRole('button', {name: 'Before the tree'}),
-    after: screen.getByRole('button', {name: 'After the tree'}),
-  };
-  for (const [name, id] of Object.entries(state.relations)) {
-    const element = document.querySelector(
-      `[role="treeitem"][data-tree-id="${id}"]`,
-    );
-    if (element != null) {
-      related[name] = element;
-    }
-  }
-  const group = row(state.subject).querySelector('[role="group"]');
-  if (group != null) {
-    related.group = group;
-  }
-  return related;
-}
-
-async function checkState(state: TreeListBindingState): Promise<BindingResult> {
-  return checkAccessibilitySpec({
-    spec: TREE_VIEW_PATTERN,
-    binding: 'TreeList',
-    state: state.id,
-    facts: state.facts,
-    mount: async () => {
-      render(renderTreeListState(state));
-      return createJsdomHarness({
-        subject: row(state.subject),
-        related: relatedFor(state),
-      });
-    },
-    unmount: cleanup,
-  });
-}
-
-describe('TreeList — tree-view pattern, jsdom lane', () => {
-  it.each(
-    TREE_LIST_BINDING_STATES.map(
-      state => [state.id, state.summary, state] as const,
-    ),
-  )('%s — %s', async (_id, _summary, state) => {
-    await expectAccessibilitySpec({
-      spec: TREE_VIEW_PATTERN,
-      binding: 'TreeList',
-      state: state.id,
-      facts: state.facts,
-      render: () => {
-        render(renderTreeListState(state));
-      },
-      subject: () => row(state.subject),
-      related: () => relatedFor(state),
-      cleanup,
-    });
-  });
-
-  it('runs the DOM layer and reports the browser-owned outcomes as unrun', async () => {
-    const results: BindingResult[] = [];
-    for (const state of TREE_LIST_BINDING_STATES) {
-      results.push(await checkState(state));
-    }
-    const report = summarize(TREE_VIEW_PATTERN, results);
-    expect(report.counts.pass).toBeGreaterThan(0);
-    expect(report.unrunLayers).toEqual(['accessibility-tree', 'real-browser']);
-    expect(report.counts.unexpectedPass).toBe(0);
-  });
-});
-
-describe('TreeList tree-view binding inventory', () => {
-  it('gives every representative state a distinct checked-in story', () => {
-    const stories = TREE_LIST_BINDING_STATES.map(state => state.storyId);
-    expect(new Set(stories).size).toBe(stories.length);
-  });
-
-  it('keeps row-name composition and selection ownership explicit', () => {
-    expect(TREE_LIST_EXCLUSIONS.map(exclusion => exclusion.id)).toEqual([
-      'row-name-composition',
-      'selection-keyboard',
-    ]);
-    for (const exclusion of TREE_LIST_EXCLUSIONS) {
-      expect(exclusion.owner.length, exclusion.id).toBeGreaterThan(20);
-      expect(exclusion.reason.length, exclusion.id).toBeGreaterThan(80);
-    }
-  });
-
-  it('renders the subject row, the tree, and the first/last rows for every state', () => {
-    for (const state of TREE_LIST_BINDING_STATES) {
-      render(renderTreeListState(state));
-      expect(row(state.subject), state.id).toBeTruthy();
-      const related = relatedFor(state);
-      expect(Object.keys(related), state.id).toEqual(
-        expect.arrayContaining(['tree', 'before', 'after', 'first', 'last']),
-      );
-      cleanup();
-    }
-  });
-});

package/src/TreeList/__tests__/TreeListGuideAlignment.interaction.browser.spec.ts

@@ -1,127 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file TreeListGuideAlignment.interaction.browser.spec.ts
- * @input The built Fully Expanded TreeList story in a real browser
- * @output Proof that guides align to naturally placed chevrons without moving
- *   those controls between lineGuides and noGuides
- * @position Layout evidence for TreeList chevron and guide geometry
- */
-
-import {expect, test, type Page} from '@playwright/test';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-
-let storybook: StaticServer;
-
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-type Direction = 'ltr' | 'rtl';
-type Variant = 'lineGuides' | 'noGuides';
-
-interface Geometry {
-  chevronCenters: number[];
-  guideCenters: number[];
-  chevronStartOffsets: number[];
-}
-
-async function openStory(
-  page: Page,
-  direction: Direction,
-  variant: Variant,
-): Promise<void> {
-  const params = new URLSearchParams({
-    id: 'core-treelist--fully-expanded',
-    viewMode: 'story',
-    args: `variant:${variant}`,
-  });
-  await page.goto(`${storybook.origin}/iframe.html?${params}`);
-  await page.locator('.astryx-tree-list').waitFor();
-  await page.evaluate(dir => {
-    const tree = document.querySelector('.astryx-tree-list');
-    if (tree == null) {
-      throw new Error('TreeList root not found');
-    }
-    tree.setAttribute('dir', dir);
-  }, direction);
-  await page.evaluate(
-    async () =>
-      new Promise<void>(resolve => {
-        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
-      }),
-  );
-}
-
-async function measureGeometry(page: Page): Promise<Geometry> {
-  return page.evaluate(() => {
-    const chevrons = Array.from(
-      document.querySelectorAll<HTMLElement>('.astryx-tree-list-chevron'),
-    );
-    const guides = Array.from(
-      document.querySelectorAll<HTMLElement>('.astryx-tree-list-guide'),
-    );
-    const centerOf = (element: HTMLElement): number => {
-      const rect = element.getBoundingClientRect();
-      return rect.left + rect.width / 2;
-    };
-    const unique = (values: number[]): number[] =>
-      Array.from(new Set(values.map(value => Math.round(value * 2) / 2))).sort(
-        (a, b) => a - b,
-      );
-
-    return {
-      chevronCenters: unique(chevrons.map(centerOf)),
-      guideCenters: unique(guides.map(centerOf)),
-      chevronStartOffsets: chevrons.map(chevron => {
-        const content = chevron.parentElement;
-        if (content == null) {
-          throw new Error('Chevron has no content container');
-        }
-        const chevronRect = chevron.getBoundingClientRect();
-        const contentStyle = getComputedStyle(content);
-        const contentRect = content.getBoundingClientRect();
-        const paddingStart = Number.parseFloat(contentStyle.paddingInlineStart);
-        return contentStyle.direction === 'rtl'
-          ? contentRect.right - paddingStart - chevronRect.right
-          : chevronRect.left - contentRect.left - paddingStart;
-      }),
-    };
-  });
-}
-
-for (const direction of ['ltr', 'rtl'] as const) {
-  test(`guides align to unshifted chevrons in ${direction.toUpperCase()}`, async ({
-    page,
-  }) => {
-    await openStory(page, direction, 'lineGuides');
-    const geometry = await measureGeometry(page);
-
-    expect(geometry.chevronStartOffsets.length).toBeGreaterThan(0);
-    for (const offset of geometry.chevronStartOffsets) {
-      expect(offset).toBeCloseTo(0, 1);
-    }
-    expect(geometry.guideCenters).toEqual(geometry.chevronCenters);
-  });
-}
-
-test('guide visibility does not move chevrons', async ({page}) => {
-  await openStory(page, 'ltr', 'lineGuides');
-  const withGuides = await measureGeometry(page);
-
-  await openStory(page, 'ltr', 'noGuides');
-  const withoutGuides = await measureGeometry(page);
-
-  expect(withGuides.chevronCenters).toEqual(withoutGuides.chevronCenters);
-  expect(withoutGuides.guideCenters).toEqual([]);
-});

package/src/TreeList/__tests__/TreeListRowNames.a11y.chromium.spec.ts

@@ -1,83 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y scope ^(packages/core/src/TreeList/|packages/core/src/hooks/useTreeFocus|apps/storybook/stories/TreeListA11y)
-
-/**
- * @file TreeListRowNames.a11y.chromium.spec.ts
- * @input The built TreeList row-names story in real Chromium
- * @output Proof that the browser names every treeitem by its label alone and describes it by its description — the chevron toggle and inner link/button do not leak into the row's name
- * @position Chromium evidence for component:TreeList AR1 (component:TreeList's row-naming implementation gap, closed)
- */
-
-import {expect, test, type Page} from '@playwright/test';
-import {
-  createChromiumHarness,
-  holdMotionStill,
-} from '@astryxdesign/a11y-spec/chromium';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-
-const STORY_ID = 'a11y-treelist-row-names--row-names';
-
-const ROWS = [
-  {id: 'docs', name: 'Documents', description: 'Shared with the team'},
-  // Carries start content and an end-content button: neither joins the name.
-  {id: 'budget', name: 'Budget', description: 'Updated yesterday'},
-  {id: 'report', name: 'Report', description: 'Opens the report'},
-  {id: 'export', name: 'Export', description: 'Downloads a file'},
-] as const;
-
-let storybook: StaticServer;
-
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-async function mount(page: Page): Promise<void> {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=${STORY_ID}&viewMode=story`,
-    {waitUntil: 'load'},
-  );
-  await holdMotionStill(page);
-  await page.locator('[role="tree"]').waitFor({state: 'attached'});
-}
-
-for (const row of ROWS) {
-  test(`the browser names the "${row.name}" row by its label and describes it by its description`, async ({
-    page,
-  }) => {
-    await mount(page);
-    const cdp = await page.context().newCDPSession(page);
-    const harness = createChromiumHarness({
-      page,
-      cdp,
-      subject: page.locator(`[role="treeitem"][data-tree-id="${row.id}"]`),
-    });
-    const computed = await (await harness.subject()).computed();
-    expect(computed.role).toBe('treeitem');
-    expect(computed.name).toBe(row.name);
-    expect(computed.description).toBe(row.description);
-  });
-}
-
-test('typing a letter matches the label, so a row whose text begins with start content is reachable', async ({
-  page,
-}) => {
-  await mount(page);
-  const docsRow = page.locator('[role="treeitem"][data-tree-id="docs"]');
-  await docsRow.focus();
-  // The Budget row's text begins with its start content ("3"), so a
-  // whole-text match never finds it under "b"; the label match does.
-  await page.keyboard.press('b');
-  await expect(
-    page.locator('[role="treeitem"][data-tree-id="budget"]'),
-  ).toBeFocused();
-});