Skip to content

fix(MenuItem): expose muted items as aria-disabled - #3359

Draft
Lisa18289 wants to merge 2 commits into
mainfrom
fix/menu-item-aria-disabled
Draft

Lisa18289 wants to merge 2 commits into
mainfrom
fix/menu-item-aria-disabled

Conversation

@Lisa18289

@Lisa18289 Lisa18289 commented Oct 1, 2026 •

Copy link
Copy Markdown
Member

A pending, succeeded, failed or aria-disabled MenuItem ignores presses, but react-aria drops aria-disabled from the DOM, so screen readers announced an enabled item. Muted items now render aria-disabled="true" through react-aria's render prop.

Muting also had gaps that become visible once the item is announced as disabled:

  • onAction was not stripped, so a pending item inside an Action could run again.
  • react-aria's click handler runs the ContextMenu's onAction, follows the href and toggles the selection. The muted render cancels the click.
  • A mouse release that started outside the item, on the trigger or another item, selects it on pointer up without a click. The muted render drops that handler.
  • Enter and Space toggle the selection on key down, so keyboard users could still select a muted item. The muted render swallows both keys; arrow navigation keeps working.

Like react-aria's own handlers, the muted ones stop the event. A click on a muted item no longer closes the menu, and a consumer's onClick, or onKeyDown for Enter and Space, no longer runs. Select all and Cmd+A still include muted items. The item stays focusable, as ARIA recommends for disabled menu items.

Consumer test suites notice the change, as with #3318: Playwright treats aria-disabled as disabled, so click() on a muted menu item waits until it is enabled again and times out.

Split out of #3318.

🤖 Generated with Claude Code

A pending, succeeded, failed or aria-disabled MenuItem ignored presses, but
react-aria dropped aria-disabled from the DOM, so the item was announced as
enabled. The muted item now renders aria-disabled through react-aria's render
prop. Muting also strips onAction, which Action uses, and cancels the item's
click, Enter and Space: react-aria runs the menu's onAction, follows the href
and toggles the selection on those.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@Lisa18289 Lisa18289 self-assigned this Oct 1, 2026
@github-actions

github-actions Bot commented Oct 1, 2026 •

Copy link
Copy Markdown
Contributor

Coverage Report for ./packages/components/

Status Category Percentage Covered / Total
🔵 Lines 78.12% 1314 / 1682
🔵 Statements 77.85% 1350 / 1734
🔵 Functions 72.46% 300 / 414
🔵 Branches 71.81% 698 / 972
File CoverageNo changed files found.
Generated in workflow #7174 for commit d220005 by the Vitest Coverage Report Action

@github-actions

github-actions Bot commented Oct 1, 2026

Copy link
Copy Markdown
Contributor

🚀 Preview Deployment

Preview environments are ready:

Type URL
docs pr-3359.docs.review.flow-components.de
storybook pr-3359.storybook.review.flow-components.de

Images:

  • docs: ghcr.io/mittwald/flow/docs:pr-3359
  • storybook: ghcr.io/mittwald/flow/storybook:pr-3359

- Ignore a mouse release on a muted item that started outside it, which
  selected the item on pointer up
- Stop propagation of muted clicks and Enter/Space, as React Aria does
- Test Enter on a muted link and a custom render function, and reset the
  location hash after each test

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

No deployments
Sign up for free to 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.

1 participant