Skip to content

fix(web): make clickable tag and label chips keyboard accessible - #42472

Open
Miodrag Obradovic (Kjubikstronk) wants to merge 1 commit into
microsoft:mainfrom
Kjubikstronk:chips-keyboard-accessible
Open

fix(web): make clickable tag and label chips keyboard accessible#42472
Miodrag Obradovic (Kjubikstronk) wants to merge 1 commit into
microsoft:mainfrom
Kjubikstronk:chips-keyboard-accessible

Conversation

@Kjubikstronk

Copy link
Copy Markdown

Two clickable chips render as <span> with an onClick and no role, tabIndex or key handler, so neither can be reached or activated from the keyboard.

  • TagView in the trace viewer, used for the tags in UI mode's test list. Its own tooltip says "Click to filter by tag", so it is unambiguously a control.
  • The label chip in the HTML reporter, in the case where it has a click handler.

Same class as #42310, #42311, #42335 and #42336, so this uses a real <button> rather than role="button" on a span, and takes the focus ring from each package's own convention: --vscode-focusBorder in the trace viewer to match .network-filters-resource-type, and --color-accent-fg in the reporter to match .chip-header.

Both keep their previous markup when they are not interactive. TagView without an onClick stays a span, and for labels the button is used only when there is a click handler and no href, since the href case is already wrapped in an anchor and nesting a button inside it would be invalid.

One test in ui-mode-test-filters.spec.ts, written like the one added in #42449: focus the tag, confirm focus, press Enter, assert the filter box receives @smoke. It sits next to the existing "should display native tags and filter by them on click", which covers the mouse path. Without the change there is no button to focus and it fails.

Verified locally on chromium: ui-mode-test-filters.spec.ts passes 13/13, and everything matching label passes 34/34, which covers the reporter's label filtering, meta/ctrl-click handling and the speedboard click behaviour. tsc reports nothing in the touched packages and eslint is clean.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant