Skip to content

feat(web): canonical keyboard traversal and focus rings - #41434

Merged
Pavel Feldman (pavelfeldman) merged 1 commit into
microsoft:mainfrom
pavelfeldman:fix-41422
Jun 23, 2026
Merged

feat(web): canonical keyboard traversal and focus rings#41434
Pavel Feldman (pavelfeldman) merged 1 commit into
microsoft:mainfrom
pavelfeldman:fix-41422

Conversation

@pavelfeldman

Copy link
Copy Markdown
Member

Summary

  • Make TabbedPane tabs real <button>s so every header is a native Tab stop and Space/Enter selects — this also gives the snapshot Action/Before/After tablist the keyboard navigation it was missing.
  • Stop CodeMirror from capturing Tab/Shift-Tab, so focus is no longer trapped inside source/network/locator/aria editors.
  • Add keyboard-only :focus-visible rings to tabs, toolbar buttons, text/search inputs, toolbar selects, and CodeMirror editors.

Fixes#41422

Lean on native browser keyboard navigation across the trace viewer and
recorder UI:
- TabbedPane tabs become real <button>s: every header is a Tab stop,
Space/Enter selects. This also gives the snapshot Action/Before/After
tablist keyboard navigation, which it was missing.
- CodeMirror no longer captures Tab/Shift-Tab, so focus is not trapped in
source/network/locator/aria editors.
- Add :focus-visible rings (keyboard-only) to tabs, toolbar buttons,
text/search inputs, toolbar selects, and CodeMirror editors.
Fixesmicrosoft#41422
@github-actions

Copy link
Copy Markdown
Contributor

Test results for "MCP"

1 failed
❌ [firefox] › mcp/http.spec.ts:349 › client should receive list roots request @mcp-windows-latest-firefox

7379 passed, 1122 skipped


Merge workflow run.

@github-actions

Copy link
Copy Markdown
Contributor

Test results for "tests 1"

2 failed
❌ [chromium-library] › library/browsercontext-add-init-script.spec.ts:28 › should work without navigation, after all bindings @chromium-ubuntu-22.04-arm-node20
❌ [chromium-library] › library/browsercontext-expose-function.spec.ts:77 › should be callable from-inside addInitScript @chromium-ubuntu-22.04-arm-node20

3 flaky⚠️ [chromium-library] › library/har-websocket.spec.ts:235 › should attach websocket messages `@frozen-time-library-chromium-linux`
⚠️ [chromium-library] › library/chromium/chromium.spec.ts:211 › should intercept service worker requests (main and within) `@chromium-ubuntu-22.04-node22`
⚠️ [chromium-library] › library/video.spec.ts:645 › screencast › should capture full viewport `@chromium-ubuntu-22.04-node22`

49007 passed, 1142 skipped


Merge workflow run.

@pavelfeldman
Pavel Feldman (pavelfeldman) merged commit 72601df into microsoft:mainJun 23, 2026
46 of 48 checks passed
@triemerge

Copy link
Copy Markdown
Contributor

Nice approach, i think the html-reporter might have the same gap with its own TabbedPane still on <div role="tab">. wondering if it'd be worth a follow-up there too.

Sign up for freeto 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.

[Bug]: Snapshot tab (Action/Before/After) in trace viewer missing keyboard navigation

3 participants

@pavelfeldman@triemerge@dgozman