microsoft / microsoft/playwright

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

Open
#42,559 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

P3-collecting-feedback
Dominant language
TypeScript
Stars
96.3k
Forks
6.5k
Avg merge
1d 6h
Merged PRs (30d)
180

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the clickable elements in packages/html-reporter/src/labels.tsx, packages/trace-viewer/src/ui/tag.tsx, and packages/web/src/components/gridView.tsx, checking how label chips, tag chips, and sortable headers are rendered. Review the contributing guide and existing component patterns before making changes. Done means these controls can be focused and operated from the keyboard, are announced correctly by screen readers, and retain their intended visual appearance.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.