[Bug]: Missing Keyboard Navigation in TabbedPane Component

[Yugenjr]

Version

1.41.1+

Steps to reproduce

Clone https://github.com/microsoft/playwright/tree/main
Navigate to packages/html-reporter
Build: npm install && npm run build
Open any HTML report generated by Playwright tests (e.g., test-results/report.html)
View a test with multiple tabs (e.g., "Tests", "Attachments", "Metadata" tabs)
Click on a tab to focus it
Press Arrow Right key
Expected: Focus moves to next tab; Actual: Nothing happens

Expected behavior

The TabbedPane component should support WCAG 2.1 Tab pattern keyboard navigation:

Arrow Right: Move focus to next tab
Arrow Left: Move focus to previous tab
Home: Move focus to first tab
End: Move focus to last tab
Enter/Space: Activate selected tab

Actual behavior

Keyboard navigation is completely non-functional. Users can only interact with tabs using mouse clicks. This violates WCAG 2.1 Level AA standards for tab components (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).

Specifically, the

elements in tabbedPane.tsx are missing onKeyDown event handlers.

Additional context

The component already has proper ARIA attributes (role='tab', aria-selected)
Only keyboard event handlers are missing
This affects keyboard-only users and screen reader users significantly
The trace-viewer tabs component has the same issue

Environment

System:
  OS: Windows 11
  CPU: x64
Binaries:
  Node: 18.19.0
  npm: 10.2.3
npmPackages:
  playwright: latest (main branch)
  @playwright/test: 1.41.1