[Bug]: UI Mode filter summary is mouse-only #42439

Version

1.63.0-next (reproduced on main at 20e2f50)

Steps to reproduce

No external repository is needed; this reproduces in UI Mode itself.

1. Run any test project with npx playwright test --ui.
2. In the left sidebar, locate the filter summary below the search input. It displays values such as Status: all and Projects: all.
3. Click the summary with a mouse. It expands or collapses the status and project filter controls.
4. Press Tab through the same area and try to reach the summary.
5. Try to toggle it with Enter or Space.

The adjacent chevron is keyboard-accessible, but the summary remains a separate clickable target that is only operable with a pointer.

As a runnable check against tests/playwright-test/ui-mode-fixtures, this fails on main:

const { page } = await runUITest(basicTestTree);
const summary = page.locator('.filter-summary');

await expect(summary).toHaveRole('button');
await summary.focus();
await expect(summary).toBeFocused();

await summary.press('Enter');
await expect(page.getByTestId('status-filters')).toBeVisible();

Expected behavior

The clickable summary should take focus and Enter or Space should toggle the filter controls, matching its mouse behavior. Its expanded state should also be exposed to assistive technology.

Alternatively, if the summary is intended to remain informational text, it should not have separate click behavior.

Actual behavior

Tab skips the summary, Enter and Space cannot activate it, and screen readers expose it as ordinary text rather than an expandable control.

packages/trace-viewer/src/ui/uiModeFiltersView.tsx currently renders it as a plain div with an onClick handler:

<div
  className='filter-summary'
  title={...}
  onClick={() => setExpanded(!expanded)}
>
  <span className='filter-label'>Status:</span> {statusLine}
  <span className='filter-label'>Projects:</span> {projectsLine}
</div>

It has no native button semantics, focusability, keyboard behavior, or aria-expanded state.

Additional context

The existing integration coverage in tests/playwright-test/ui-mode-test-filters.spec.ts exercises this target only through a mouse click:

await page.getByText('Status:').click();

This appears to be the same class of issue addressed for expandable section headers in #42263, the image diff mode switcher in #42266, and the remaining mouse-only controls in #42323.

I have a small fix and regression test ready locally. The proposed change preserves the current mouse behavior by using a native button, exposing aria-expanded, adding a :focus-visible ring, and covering both Enter and Space. The full ui-mode-test-filters.spec.ts suite passes locally, along with ESLint and TypeScript checks.

I would be happy to submit the change if this is suitable for a community contribution and can be assigned to me.

Environment

System:
  OS: macOS 26.6.2
  Architecture: arm64
Binaries:
  Node: 22.22.2
  npm: 10.9.7
npmPackages:
  playwright monorepo at main (1.63.0-next)