WB-2148 ActionMenu in Classroom: Ensure implicit list markup is avoided - #3173
Draft
khan-actions-bot wants to merge 1 commit into
Draft
WB-2148 ActionMenu in Classroom: Ensure implicit list markup is avoided#3173khan-actions-bot wants to merge 1 commit into
khan-actions-bot wants to merge 1 commit into
Conversation
Render the dropdown menu/listbox using semantic list markup so items are exposed as a list to assistive technologies. The DropdownCore container is now a <ul> element and each item is wrapped in a presentational <li> (role="none"), which keeps the existing menu/menuitem and listbox/option ARIA roles intact. This affects ActionMenu, SingleSelect, and MultiSelect (all of which use DropdownCore). The virtualized list path is left unchanged since react-window manages its own container structure. Key: WB-2148
🦋 Changeset detectedLatest commit: 2ca767f The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
Size Change: +64 B (+0.05%) Total Size: 131 kB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (96eac02) and published all packages with changesets to npm. You can install the packages in ./dev/tools/deploy_wonder_blocks.js --tag="PR3173"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR3173 |
Contributor
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-roqntvbaay.chromatic.com/ Chromatic results:
|
jandrade
marked this pull request as draft
August 12, 2026 21:32
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
2 participants
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.
Summary
Accessibility fix for WB-2148. An audit of the Classroom Teacher experience found that the
ActionMenuitems (e.g. the class links "Algebra1 - Lowe" and "Writing - Lowe") appear as a list but were not using list markup, so screen reader users had difficulty understanding the content was a list (WCAG 1.3.1 – Info and Relationships).The dropdown menu was rendered as a
<div role="menu">containing baremenuitemelements. This change renders the dropdown using semantic list markup:<ul>element (previously a<div>).<li>(role="none").menu/menuitemandlistbox/optionARIA roles are preserved, so behavior and the menu-button interaction pattern are unchanged. Therole="none"on the<li>keeps the widget role's required parent/child relationship intact.This matches the WAI-ARIA Menu Button links pattern that
ActionMenualready follows.Scope
The change lives in the shared
DropdownCorecomponent, so it also improvesSingleSelectandMultiSelect(which render alistboxofoptions) in the same way. The virtualized list path (used only for 125+ items viareact-window) is intentionally left unchanged, sincereact-windowmanages its own container/item DOM structure; the ARIA roles remain correct there.Changes
dropdown-core.tsx: container rendered as<ul>(non-virtualized case) and each item wrapped in a presentational<li role="none">.dropdown-core.test.tsxandaction-menu.test.tsxverifying the container is a<ul>and items are wrapped in<li>.action-menu.accessibility.mdx.@khanacademy/wonder-blocks-dropdown).Testing
pnpm jest packages/wonder-blocks-dropdown— all tests pass (including new tests).birthday-pickertests (consumer ofSingleSelect) pass.Accessibility notes
menu/menuitemandlistbox/optionroles are unchanged, so assistive technology still announces the widget correctly.<li role="none">is presentational so themenustill owns itsmenuitemchildren (andlistboxitsoptionchildren), satisfyingaria-required-children.<li>(onlyrole="none"is applied).Key: WB-2148
Co-authored by Claude agent for Jira.