fix(web): make clickable tag and label chips keyboard accessible - #42472
Open
Miodrag Obradovic (Kjubikstronk) wants to merge 1 commit into
Open
fix(web): make clickable tag and label chips keyboard accessible#42472Miodrag Obradovic (Kjubikstronk) wants to merge 1 commit into
Miodrag Obradovic (Kjubikstronk) wants to merge 1 commit into
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two clickable chips render as
<span>with anonClickand no role,tabIndexor key handler, so neither can be reached or activated from the keyboard.TagViewin 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.Same class as #42310, #42311, #42335 and #42336, so this uses a real
<button>rather thanrole="button"on a span, and takes the focus ring from each package's own convention:--vscode-focusBorderin the trace viewer to match.network-filters-resource-type, and--color-accent-fgin the reporter to match.chip-header.Both keep their previous markup when they are not interactive.
TagViewwithout anonClickstays a span, and for labels the button is used only when there is a click handler and nohref, since thehrefcase 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.tspasses 13/13, and everything matchinglabelpasses 34/34, which covers the reporter's label filtering, meta/ctrl-click handling and the speedboard click behaviour.tscreports nothing in the touched packages and eslint is clean.