[Bug]: Trace viewer section headers announce as buttons but cannot be focused or expanded with the keyboard

[ayaangazali]

Version

1.63.0-next (reproduced on main at d5a185a, also on 1.62.1)

Steps to reproduce

No external repo needed, this reproduces in the trace viewer itself.

1. Record any trace and open it, or use UI mode.
2. Select a network request, then open the Network or Payload tab in the details pane.
3. Try to reach the Request Headers / Response Headers / Request Body header with Tab and expand it with Enter.
4. Same thing in the Attachments tab with any text attachment header.

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

const panel = page.getByRole('tabpanel', { name: 'Network' });
const header = panel.getByRole('button', { name: 'Request Headers' });
await header.focus();
await expect(header).toBeFocused();

Expected behavior

The header takes focus and Enter or Space toggles the section, the same way the tab strips do since #41434 and the html-reporter chips do since #42149.

Actual behavior

Tab walks straight past every one of them, so none of these sections can be expanded without a mouse.

The check above fails with:

Error: expect(locator).toBeFocused() failed
Expected: focused
Received: inactive
locator resolved to <div id="_r_1c_" role="button" aria-expanded="true" aria-controls="_r_1d_" class="expandable-title">…</div>

The header comes from the shared Expandable component, packages/web/src/components/expandable.tsx:40-49:

<div
  id={titleId}
  role='button'
  aria-expanded={expanded}
  aria-controls={regionId}
  className='expandable-title'
  onClick={onClick}>

It carries the full button semantics, role="button" plus aria-expanded plus aria-controls, but it is a div with no tabIndex, so it never takes focus and there is no key handler either. Assistive tech is told there is a button and then it cannot be operated.

Additional context

Affects the trace viewer attachments tab (attachmentsTab.tsx:79) and every collapsible section in network details (networkResourceDetails.tsx:138), both of which pass expandOnTitleClick.

I have a fix ready that follows the same native-button approach as #41434 and #42149, with the one wrinkle that both call sites render a link or a button inside the title, which cannot be nested inside a button. Happy to send it if you want to assign this to me.

apologies if I have misread anything here, I did the digging myself and talked the design choices over with claude code. freshman in college, trying to be useful where I can :)

Environment

System:
  OS: macOS 26.5.2
  CPU: (10) arm64 Apple M4
  Memory: 277.83 MB / 16.00 GB
Binaries:
  Node: 26.0.0
  npm: 11.12.1
npmPackages:
  playwright monorepo at main (1.63.0-next)