fix(trace-viewer): use button elements for network filter tabs

[triemerge]

Rationale

The trace viewer's NetworkFilters is still using <div> elements for the resource type tabs (All, Fetch, JS, CSS, etc.) which aren't keyboard focusable. this converts them to <button> and adds :focus-visible styling, same approach as #41434.

[github-actions]

Test results for "MCP"

5 failed
❌ [chrome] › mcp/http.spec.ts:349 › client should receive list roots request @mcp-ubuntu-latest-chrome
❌ [chromium] › mcp/http.spec.ts:349 › client should receive list roots request @mcp-ubuntu-latest-chromium
❌ [firefox] › mcp/http.spec.ts:349 › client should receive list roots request @mcp-ubuntu-latest-firefox
❌ [webkit] › mcp/http.spec.ts:349 › client should receive list roots request @mcp-macos-latest-webkit
❌ [webkit] › mcp/http.spec.ts:349 › client should receive list roots request @mcp-ubuntu-latest-webkit

7404 passed, 1132 skipped

---

Merge workflow run.

[github-actions]

Test results for "tests 1"

3 failed
❌ [chromium-library] › library/browsercontext-add-init-script.spec.ts:28 › should work without navigation, after all bindings @chromium-ubuntu-22.04-arm-node20
❌ [chromium-library] › library/browsercontext-expose-function.spec.ts:77 › should be callable from-inside addInitScript @chromium-ubuntu-22.04-arm-node20
❌ [playwright-test] › playwright.trace.spec.ts:346 › should retain traces for interrupted tests @windows-latest-node22

3 flaky

⚠️ [chromium-library] › library/video.spec.ts:645 › screencast › should capture full viewport `@chromium-ubuntu-22.04-node20`
⚠️ [chromium-library] › library/video.spec.ts:680 › screencast › should capture full viewport on hidpi `@chromium-ubuntu-22.04-node22`
⚠️ [playwright-test] › ui-mode-trace.spec.ts:480 › should filter actions tab on double-click `@windows-latest-node22`

49096 passed, 1156 skipped

---

Merge workflow run.