HTML report and trace viewer: clickable elements aren't keyboard accessible

[Kjubikstronk]

Several clickable controls in the report UI are plain divs and spans with an onClick, so they can't be focused or activated from the keyboard, and screen readers don't announce them as controls.

Three I ran into:

• packages/html-reporter/src/labels.tsx, the label chips
• packages/trace-viewer/src/ui/tag.tsx, the tag chips
• packages/web/src/components/gridView.tsx, sortable column headers

So sorting a results table or filtering by a label is mouse only.

What I'd do is use a real <button> wherever there's an onClick, with all: unset so nothing changes visually, plus a :focus-visible outline. The label chips are the awkward one, since some of them render inside an anchor, so those would only become a button when there's an onClick and no href.

I had PRs up for these before I'd read the contributing guide properly (#42471 and #42472, both closed). Happy to redo them if you want this fixed, or to drop it.

[LeonxLJX]

I'd like to take this one. This is a clean a11y fix and the reporter even gave a starter plan. The bug is that <div onClick=...> without role="button" / tabindex / aria-pressed is invisible to keyboard users and screen readers, and sorting/filtering in the report UI is therefore mouse-only.

Root cause. Three files use <div onClick=...> or <span onClick=...> patterns where a native <button> would do: labels.tsx (label chips), tag.tsx (tag chips), gridView.tsx (sortable column headers). The reporter's plan — button { all: unset } plus :focus-visible outline — is the right call because it preserves the current visual treatment exactly while making the affordance native.

Alternatives I considered: (a) Add role="button" tabindex={0} onKeyDown={handleEnter} and stop using onClick semantically (no behavior change, but verbose). (b) Replace with <button type="button" style={{ all: 'unset' }}> everywhere (minimal code, what reporter suggests). (c) Refactor to a <Button as="div"> polymorphic component that drops onClick props when not a button (more general, but bigger refactor).

Suggestion to maintainer: (b) is the fastest path. Two open questions: (i) is all: unset a safe pattern given Playwright's own stylesheets inject --text-link etc — any conflicting rules? (ii) Do you want the same treatment in the trace viewer, or scope to the HTML report? I'd draft a PR against #42559 with both files touched + an a11y test that asserts each chip is reachable by keyboard. (claiming via LeonxLJX)

[Kjubikstronk]

LeonxLJX the code for this already exists. #42471 does the sortable grid column headers and #42472 the tag and label chips. Both were closed by Dmitry Gozman (@dgozman) because they arrived without an issue, which is why I opened this one.

If you would rather take it, go ahead and I will leave it alone. Otherwise I will resend those two against this issue.