Test: Run interaction tests in Vitest Browser Mode

[ciampo]

What?

Follow-up to #80855.

TL;DR: Move the interaction suites that benefit from a real browser into the Chromium-backed Vitest Browser project, run them with real CSS and native keyboard/pointer behavior, and replace safe remaining Ariakit test helpers with Vitest or Testing Library user events.

This moves nine baseline test files into Browser Mode. Together with the pilot, the browser project now owns 10 files and 190 tests.

Why?

jsdom and @ariakit/test emulate browser behavior. That is useful for most unit tests, but it can hide browser-specific focus, keyboard, pointer, portal, layout, and CSS behavior. These suites exercise those behaviors directly and are better evidence when run in Chromium.

How?

• Give the Browser project its own setup, real stylesheet loading, Playwright screenshots, and retained failure traces.
• Route Button, CircularOptionPicker, CustomSelectControl, SearchControl, Snackbar, TabPanel, and Global Styles inheritance tests to Browser Mode.
• Use vitest/browser user events and Browser locators for native interactions and retryable assertions where applicable.
• Keep the jsdom and Node projects on the existing CSS module proxy.
• Replace safe @ariakit/test rendering and interaction helpers in related jsdom suites with Testing Library equivalents.
• Extend routing and ESLint configuration so Browser ownership and Browser-specific Testing Library conventions remain explicit.
• Match the taxonomy fixture's completed Core Data resolution to the component's exact private query key and mock its unrelated REST boundary.
• Mark the seeded Core Data entity record resolved so its fixture cannot enqueue a background REST request.

Native-browser follow-ups intentionally left out of this PR

The remaining Ariakit-assisted suites need product-behavior investigation rather than mechanical event replacement:

• AlignmentMatrixControl: native Tab initially focuses the top-left item instead of the configured center.
• Composite, legacy and current: native focus does not match the configured active/current item.
• Tabs: native Tab initially focuses the first tab instead of the selected tab.
• Tooltip: native hover-out timing, accessible-name, Escape, and focus behavior differ from the emulated test.
• ToggleGroupControl: the snapshot transformer differs, and Chromium correctly rejects clicks on disabled controls.
• ColorPicker: real pointer capture and settling require a pointer-native test rewrite.

Testing Instructions

1. Run npm run test:unit:routing.
2. Run npm run test:unit:conventions.
3. Run npm run test:unit:vitest -- --project browser --run.
4. Run the affected jsdom suites:
   npm run test:unit:vitest -- --project vitest --run packages/block-editor/src/components/colors-gradients/test/control.jsx packages/block-editor/src/components/global-styles/test/color-panel.jsx packages/block-editor/src/components/global-styles/test/typography-panel-core.jsx packages/block-editor/src/components/global-styles/test/typography-panel.jsx packages/components/src/font-size-picker/test/font-size-picker-select.tsx packages/components/src/font-size-picker/test/font-size-picker-toggle-group.tsx packages/components/src/font-size-picker/test/index.tsx packages/components/src/palette-edit/test/index.tsx
5. Run npm run lint:pkg-json, npm run lint:lockfile, and npm run lint:tsconfig.

The CI partitions that exposed the late resolver requests pass locally after the fixture isolation: shard 2 passes 21,266 tests (3 skipped) and shard 4 passes 4,210 tests (5 skipped), with no unhandled errors.

Testing Instructions for Keyboard

There is no production UI change. The Browser project directly exercises the affected Tab, Arrow, Enter, Escape, and focus behavior in Chromium.

Screenshots or screencast

Not applicable; this changes test infrastructure only. Failure screenshots and Playwright traces are retained as CI artifacts.

Use of AI Tools

This PR was authored with Codex. The generated changes were reviewed against the existing test intent and verified with the routing validators, linting, affected jsdom tests, and the complete Browser project.

[github-actions]

Size Change: 0 B

Total Size: 7.76 MB

_{compressed-size-action}

[github-actions]

Flaky tests detected in 3eec742.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/30600327887
📝 Reported issues:

• [Flaky Test] should paste block styles using keyboard #78759 in /test/e2e/specs/editor/various/list-view.spec.js