fix(web): make expandable section titles keyboard accessible by yury-s · Pull Request #42310 · microsoft/playwright

Yury Semikhatsky (yury-s) · 2026-08-19T15:31:15Z

Summary

Expandable titles were divs with role=button but no tabIndex or key handler, so trace viewer section headers (network details, attachments) could not be focused or toggled with the keyboard. They now render a native <button>, following feat(web): canonical keyboard traversal and focus rings #41434.
Interactive elements that cannot nest inside a button (attachment download link, payload format toggle) move to a new titleSuffix prop that renders them in the title row, outside the button.
The chevron-only variant gets a button too, which makes the UI mode filters panel keyboard-operable.

The Expandable title carried role=button but was a div with no tabIndex or key handler, so trace viewer section headers could not be focused or toggled with the keyboard. Render a native button instead, following the approach of microsoft#41434. Interactive elements in the title row (download link, format toggle) move outside the button via a new titleSuffix prop, and the chevron-only variant gets a button as well. Fixes: microsoft#42263

Pavel Feldman (pavelfeldman) · 2026-08-19T16:07:57Z

 user-select: none;
+}
+
+.expandable-title-button {


I can't believe we are getting new styles and are not losing old styles. Turning button into a span style-wise should be easier than this.

github-actions · 2026-08-19T16:26:09Z

Hi, I'm the Playwright bot and I took a first look at the CI failures here.

🔴 The one real failure looks caused by this PR

ui-mode-test-network-tab.spec.ts:64 › should filter network requests by multiple resource types (@windows-latest-node22) failed, and it's a rock-solid test — 0 failures across 4651 runs in the CI results DB, never rescued by a retry. It fails here on a PR that reworks the exact UI it drives (the UI-mode network tab filter panel / Expandable), so this doesn't read as a flake.

Details

Ignoring the 7 flaky tests (all passed on retry — nothing to triage there), there's a single hard failure, and the diff reaches it.

Caused by this PR

[playwright-test] › ui-mode-test-network-tab.spec.ts:64 › should filter network requests by multiple resource types — this test exercises the UI-mode network tab and its resource-type filter panel. The PR converts Expandable into a native <button> (including the chevron-only variant that, per the PR summary, "makes the UI mode filters panel keyboard-operable"), and also touches networkResourceDetails.tsx, attachmentsTab.tsx, common.css, and expandable.css — i.e. the panel this test clicks through. The test itself has a spotless history (0/4651 failed, 0 rescued), so a fresh failure on the PR that restructures this UI points at the change, not noise. My best guess at the mechanism is the <div role=button> → <button> rework shifting the accessible tree or toggle/focus state the test relies on, but I couldn't pull the exact error — the per-shard blob reports were already consumed by merge-reports, so I'm going on the test history + the diff overlap rather than the stack.

No pre-existing flake was proven for this test — the hard rule (same test failing where the PR can't be responsible) isn't met; it's the opposite, the test never fails elsewhere.

One caveat: the triggering run ended cancelled, so the merged counts are incomplete. That doesn't rescue this call, though — an incomplete run explains missing results, not a spurious failure on a test that has never failed before.

Worth a look: re-run the job to rule out a one-off, and if it reproduces, check whether the Expandable → <button> change altered how the network tab's filter labels ("Network", "JS", "CSS", …) resolve or toggle.

_{Triaged by the Playwright bot - agent run}

github-actions · 2026-08-19T22:18:45Z

Test results for "MCP"

1 failed
❌ [chrome] › mcp/cli-core.spec.ts:343 › snapshot depth @mcp-macos-latest-chrome

5611 passed, 931 skipped

Merge workflow run.

github-actions · 2026-08-19T22:18:59Z

Test results for "tests 1"

Warning

The triggering workflow run ended with status cancelled. Results below may be incomplete — blob reports from cancelled or timed-out shards are missing, so passing/failing counts do not reflect the full test suite.

11 flaky

⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/video.spec.ts:736 › screencast › should work with video+trace `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@chromium-ubuntu-22.04-node24`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@chromium-ubuntu-22.04-node24`
⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@chromium-ubuntu-22.04-node22`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@chromium-ubuntu-22.04-node22`
⚠️ [firefox-library] › library/global-fetch.spec.ts:293 › should return security details from response `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-library] › library/har.spec.ts:639 › should have security details `@firefox-ubuntu-22.04-node20`
⚠️ [webkit-library] › library/global-fetch.spec.ts:293 › should return security details from response `@webkit-ubuntu-22.04-node20`
⚠️ [webkit-library] › library/har.spec.ts:639 › should have security details `@webkit-ubuntu-22.04-node20`

31837 passed, 695 skipped

Merge workflow run.

github-actions · 2026-08-19T22:26:51Z

Hi, I'm the Playwright bot and I took a look at the CI failures here.

🟢 The one failure is a pre-existing flake — the PR is clear

mcp/cli-core.spec.ts:343 › snapshot depth (@mcp-macos-latest-chrome) is a timeout flake, not a regression. This PR only touches the trace-viewer/web Expandable UI, which the MCP snapshot path never runs. Everything else is flaky-passed-on-retry.

Details

The latest merged reports show one hard failure and only flaky tests otherwise, so there's a single group to triage.

Pre-existing flake / infra

[chrome] › mcp/cli-core.spec.ts:343 › snapshot depth (@mcp-macos-latest-chrome) — flake. In the CI results DB this test is 0 failed across 3,521 runs over all five browser projects (732 on chrome), and it flaked on this PR's own earlier run (32274835119, sha 0d489fa): it timed out and passed on retry. A timeout that a rerun rescues on the same code is a within-run flake by definition. The diff also can't reach it — the PR reworks packages/webExpandable and the trace-viewer network/attachments tabs, while snapshot depth exercises the MCP server's accessibility-snapshot depth option, a separate product area with no shared code path.

Not a concern

The 11 tests 1 entries (global-fetch.spec.ts:293 › should return security details, har.spec.ts:639 › should have security details, video.spec.ts) are all flaky — passed on retry, spread across chromium/firefox/webkit and unrelated to a trace-viewer accessibility change.

One caveat: the tests 1 run ended cancelled, so its counts are incomplete — but that only hides results, it doesn't manufacture the MCP failure.

_{Triaged by the Playwright bot.}

_{Triaged by the Playwright bot - agent run}

Pavel Feldman (pavelfeldman) reviewed Aug 19, 2026
View reviewed changes

fix(web): reset expandable button styles with all:unset
e1c8f96

This comment has been minimized.
Sign in to view

Yury Semikhatsky (yury-s) requested a review from Pavel Feldman (pavelfeldman)August 19, 2026 16:20

Pavel Feldman (pavelfeldman) approved these changes Aug 19, 2026
View reviewed changes

Yury Semikhatsky (yury-s) merged commit 08c8749 into microsoft:mainAug 19, 2026
28 of 43 checks passed

Yury Semikhatsky (yury-s) deleted the fix-42263 branch August 19, 2026 19:41

This was referenced Aug 20, 2026
[Bug]: remaining mouse-only controls in the html reporter and trace viewer #42323
Closed
fix(html): make remaining mouse-only controls keyboard accessible #42334
Closed

This was referenced Aug 20, 2026
fix(html-reporter): make settings and metadata controls keyboard accessible #42335
Merged
fix(trace-viewer): use ToolbarButton for Show all and the console badge #42336
Merged

Navigation Menu

Uh oh!

fix(web): make expandable section titles keyboard accessible - #42310

fix(web): make expandable section titles keyboard accessible#42310
Yury Semikhatsky (yury-s) merged 2 commits into
microsoft:mainfrom
yury-s:fix-42263

Yury Semikhatsky (yury-s) commented Aug 19, 2026

Uh oh!

Pavel Feldman (pavelfeldman)Aug 19, 2026

Uh oh!

Yury Semikhatsky (yury-s)Aug 19, 2026

Uh oh!

This comment has been minimized.

This comment has been minimized.

github-actionsBot commented Aug 19, 2026

Uh oh!

Uh oh!

github-actionsBot commented Aug 19, 2026

Uh oh!

github-actionsBot commented Aug 19, 2026

Uh oh!

github-actionsBot commented Aug 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Yury Semikhatsky (yury-s) commented Aug 19, 2026

Summary

Uh oh!

Pavel Feldman (pavelfeldman)Aug 19, 2026

Choose a reason for hiding this comment

Uh oh!

Yury Semikhatsky (yury-s)Aug 19, 2026

Choose a reason for hiding this comment

Uh oh!

This comment has been minimized.

This comment has been minimized.

github-actionsBot commented Aug 19, 2026

🔴 The one real failure looks caused by this PR

Uh oh!

Uh oh!

github-actionsBot commented Aug 19, 2026

Test results for "MCP"

Uh oh!

github-actionsBot commented Aug 19, 2026

Test results for "tests 1"

Uh oh!

github-actionsBot commented Aug 19, 2026

🟢 The one failure is a pre-existing flake — the PR is clear

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants