[Bug]: Missing keyboard navigation in `NetworkFilters` component (trace viewer)

[triemerge]

Version

1.61.0-next (main branch, HEAD)

Steps to reproduce

1. Clone the Playwright repository: git clone https://github.com/microsoft/playwright
2. npm ci && npm run build
3. Run any test with tracing: npm run ctest -- --trace on tests/library/browsercontext-fetch.spec.ts
4. Open the trace: npx playwright show-trace test-results/<test-folder>/trace.zip
5. Click the "Network" tab in the trace viewer
6. The resource type filter bar appears (All, Fetch, HTML, JS, CSS, Font, Image)
7. Try to Tab-focus on any resource type filter button
8. Try pressing ArrowRight or ArrowLeft to navigate between filters
9. Try pressing Enter or Space to activate a filter

Expected behavior

The NetworkFilters resource type buttons should support the ARIA Tabs keyboard interaction pattern (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/):

• ArrowRight: Move focus to next filter tab (with wrapping)
• ArrowLeft: Move focus to previous filter tab (with wrapping)
• Home: Move focus to first tab
• End: Move focus to last tab
• Enter/Space: Activate the focused filter

Actual behavior

Keyboard navigation is completely non-functional on the NetworkFilters resource type buttons. Users can only interact with them using mouse clicks.

The component already has the correct ARIA attributes:

• role="tablist" on the container
• role="tab" on each resource type button
• aria-selected on resource type buttons
• aria-multiselectable="true" on the container

But it is missing:

• tabIndex on filter items (not keyboard-focusable)
• onKeyDown handler (no arrow key navigation)
• Enter/Space activation
• aria-selected on the "All" button

File: packages/trace-viewer/src/ui/networkFilters.tsx

Additional context

This is the same class of bug that was fixed for the TabbedPane component in:

• Issue: [Bug]: Missing Keyboard Navigation in TabbedPane Component #41005
• PR: fix(html-reporter): add keyboard navigation to TabbedPane component #41042

The TabbedPane fix added keyboard navigation following the WAI-ARIA Tabs pattern.
The NetworkFilters component has the same gap ; it has role="tablist" and role="tab" attributes but no keyboard event handlers.

Environment

System:
  OS: Linux 6.17 Ubuntu 24.04.4 LTS 24.04.4 LTS (Noble Numbat)
  CPU: (4) x64 11th Gen Intel(R) Core(TM) i3-1115G4 @ 3.00GHz
Binaries:
  Node: 24.15.0
  npm: 11.12.1
npmPackages:
  playwright: 1.61.0-next (main branch)

[triemerge]

I would like to work on this fix. The implementation will follow the same pattern as PR #41042 (roving tabindex + onKeyDown handler for arrow keys, Home, End).