fix(trace-viewer): add keyboard navigation to NetworkFilters component

[triemerge]

Rationale

The NetworkFilters resource type buttons in the trace viewer have role="tablist" and role="tab" ARIA attributes but lack keyboard navigation, making them inaccessible to keyboard-only users.

Fixes #41175

Changes

packages/trace-viewer/src/ui/networkFilters.tsx now implements the ARIA Tabs keyboard interaction pattern:

Key	Behavior
ArrowRight	Move focus to next filter tab (wraps around)
ArrowLeft	Move focus to previous filter tab (wraps around)
Home	Move focus to first tab
End	Move focus to last tab

The "All" button was also missing role="tab" and aria-selected, both are now set.

All tabs use the roving tabIndex pattern ; selected tabs have tabIndex={0}, unselected have tabIndex={-1}.

Implementation Notes

• keyboard handler placed on the role="tablist" container via onKeyDown + ref
• uses document.activeElement to find the focused tab index
• e.preventDefault() on handled keys to prevent page scroll
• no dependency changes

Tests

Added a test in tests/playwright-test/ui-mode-test-network-tab.spec.ts covering ArrowRight, ArrowLeft, Home, End, and wraparound navigation.

[triemerge]

@microsoft-github-policy-service agree