[Bug]: two trace viewer filter inputs have no accessible name, and the error source link is mouse-only

[ayaangazali]

Version

1.63.0-next (checked on main at de214f4)

Steps to reproduce

Two separate things in the trace viewer, both the same class as #42310, #42311, #42335, #42336 and
#42449.

1. Filter inputs announced with no name. Open a trace, focus the network tab's filter box or UI
mode's filter box with a screen reader running. Both are announced as an unlabelled edit field.

2. Error source location is mouse-only. Open the Errors tab on a failing trace and try to reach
the @ file:line link with Tab. It is skipped, so jumping to the source is only possible with a
mouse.

Expected behavior

The filter boxes carry an accessible name, and the source location can be focused and activated from
the keyboard.

Actual behavior

Inputs. Both rely on placeholder alone, which is not a reliable accessible name (assistive tech
treats it inconsistently, and it vanishes once the user types):

• packages/trace-viewer/src/ui/networkFilters.tsx:35

  <input type='search' placeholder='Filter network' spellCheck={false} ... />

• packages/trace-viewer/src/ui/uiModeFiltersView.tsx:49

  <input ref={inputRef} type='search' placeholder='Filter (e.g. text, @tag)' ... />

What makes this look like an oversight rather than a choice is that the same control is done
correctly three times elsewhere in this codebase:

file
html-reporter/src/headerView.tsx:79	aria-label='Search tests'
html-reporter/src/testResultView.tsx:142	aria-label='Filter steps'
trace-viewer/src/ui/workbench.tsx:336	aria-label='Filter actions'

Error source link. packages/trace-viewer/src/ui/errorsTab.tsx:76:

{location && <div className='action-location'>
  @ <span title={longLocation} onClick={() => revealInSource(error)}>{location}</span>
</div>}

A bare span with a click handler, so no role and no tab stop. Nothing announces it as a control.

Additional context

Full disclosure on where these came from: I found both while looking at this surface a fortnight ago
and did not file them at the time, which was a mistake on my part. The filter-summary item from the
same batch has since been fixed independently in #42449, so I would rather hand these over than sit
on them again.

I have not opened a PR. My last few here were closed over an unsigned CLA on my side, so it is more
useful to you as a report than as a patch I cannot get merged. If you would like it as a PR once that
is sorted, say the word, otherwise please treat this as yours to take.

sorry for the delay on these two, that one is on me. the input-labelling call is the part I am least
certain about, since placeholder-only is common in the wild even though it is not a real name.
freshman in college, still calibrating what is worth reporting :)

Environment

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

[scs0209]

I'd like to work on this — can I try?

[ayaangazali]

Please do, it is all yours. I filed it as a report precisely because I cannot get a PR merged here at the moment, so it is better in your hands.

A few things I learned the expensive way on the neighbouring fixes, in case they save you a round trip:

• Do not add tabIndex plus a hand-rolled onKeyDown to a div. That exact pattern was reverted in chore: revert bogus keyboard navigability attempts #41432 ("revert bogus keyboard navigability attempts"). The canonical approach here is a native element plus a :focus-visible ring, set out in feat(web): canonical keyboard traversal and focus rings #41434.
• Reuse the existing component where there is one. In fix(trace-viewer): use ToolbarButton for Show all and the console badge #42336 a maintainer replaced my hand-rolled buttons with ToolbarButton, which already carries the focus ring and hover styling, and deleted the extra CSS entirely.
• The focus-ring token differs per package: trace viewer uses --vscode-focusBorder, html reporter uses --color-accent-fg. Anything shared between them wants var(--vscode-focusBorder, var(--color-accent-fg)), as in fix(web): make image diff mode switcher keyboard accessible #42311.
• For errorsTab.tsx specifically, watch the surrounding row. When I made a control inside a tree row focusable, giving it an accessible name leaked that name into the row's own name. fix(trace-viewer): use ToolbarButton for Show all and the console badge #42336 solved the equivalent problem by stopping TreeView from accepting Enter when the event comes from a button inside the row.

Happy to answer anything on the repro side if it helps. Good luck with it.

[scs0209]

Opened a focused PR for this: #42469

Following the guidance in #42463 (comment) — native button + aria-labels + focus-visible, with regression tests. Happy to adjust if maintainers prefer to land #42465 instead.