microsoft / microsoft/playwright
HTML report and trace viewer: clickable elements aren't keyboard accessible
Nobody has claimed this yet.
- 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 chipspackages/trace-viewer/src/ui/tag.tsx, the tag chipspackages/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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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