Uh oh!
There was an error while loading. Please reload this page.
fix(web): make expandable section headers keyboard operable - #42264
Closed
Ayaan Gazali (ayaangazali) wants to merge 1 commit into
Closed
fix(web): make expandable section headers keyboard operable#42264Ayaan Gazali (ayaangazali) wants to merge 1 commit into
Ayaan Gazali (ayaangazali) wants to merge 1 commit into
Conversation
The title rendered with expandOnTitleClick carries role="button", aria-expanded and aria-controls, but it is a div with no tabIndex, so it never takes focus. In the trace viewer that means no attachment and no section of network details can be expanded without a mouse. Render it as a native button, the same way tabs and chips were converted in microsoft#41434 and microsoft#42149. Consumers put links and buttons in the title, which cannot be nested inside a button, so those move to a titleChildren slot rendered next to the toggle.
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 freeto 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.
Rationale
Expandable's title carriesrole="button",aria-expandedandaria-controls, but it is adivwith notabIndex(packages/web/src/components/expandable.tsx:40-49). It tells assistive tech there is a button and then never takes focus, so in the trace viewer no attachment header and no section of network details can be expanded without a mouse. On main, focusing the realRequest Headersheader fails withtoBeFocusedreceivinginactive.The fix is the one already used for tab strips in #41434 and html-reporter chips in #42149: a native
<button>plus a:focus-visiblering, no key handlers, Enter and Space come from the platform.The plain div-to-button swap does not work here on its own. Both call sites render interactive content inside the title, the attachments tab a
downloadlink and network details the pretty-print toggle. A link or button nested inside a button is invalid and hides those controls from the accessibility tree, so they move to atitleChildrenslot rendered next to the toggle rather than inside it.The chevron-only variant (
expandOnTitleClickunset, used by the UI mode filter panel) is left alone. Its title is an<input>and an icon-only toggle would need a label invented for it, which felt like a separate decision rather than something to fold in here.Layout is unchanged. I measured the bounding boxes of the section header, the pretty-print button, the attachment name and the download link before and after, each against its own rebuilt bundle, and they are identical.
Test
expandable.spec.tsgets the keyboard case, plus a check thattitleChildrenstays outside the toggle. On current main the first one fails withtoBeFocusedreceivinginactive, and the second fails because the link ends up nested in the button.Fixes#42263
apologies if anything here is off, I worked through the fix with my own reasoning and used claude code as a sounding board for the design calls, especially the nested-interactive-content part. if I have got something wrong I would genuinely like to hear it. freshman in college trying to contribute something useful :)