Skip to content

Add ActionMenu.IconButton and ActionMenu.Anchor child validation#7640

Draft
Copilot wants to merge 6 commits intomainfrom
copilot/fix-actionmenu-anchor-validation
Draft

Add ActionMenu.IconButton and ActionMenu.Anchor child validation#7640
Copilot wants to merge 6 commits intomainfrom
copilot/fix-actionmenu-anchor-validation

Conversation

Copy link
Contributor

Copilot AI commented Mar 9, 2026

ActionMenu.Anchor accepts arbitrary children, making it easy to wrap non-interactive elements (e.g., <div>) and produce inaccessible markup. The most common use case for ActionMenu.Anchor is wrapping IconButton, which should have a blessed shortcut.

This PR adds two things:

  1. ActionMenu.IconButton — syntactic sugar (like ActionMenu.Button) that correctly wires an IconButton as the menu anchor
  2. ActionMenu.Anchor child validation — dev-only warning when the anchor child is not an interactive element, following the same pattern used in Tooltip
// Before: manual wiring required
<ActionMenu>
  <ActionMenu.Anchor>
    <IconButton icon={KebabHorizontalIcon} aria-label="More actions" />
  </ActionMenu.Anchor>
  <ActionMenu.Overlay>...</ActionMenu.Overlay>
</ActionMenu>

// After: blessed shortcut
<ActionMenu>
  <ActionMenu.IconButton icon={KebabHorizontalIcon} aria-label="More actions" />
  <ActionMenu.Overlay>...</ActionMenu.Overlay>
</ActionMenu>

The validation warns on non-interactive anchors but skips submenu contexts where ActionList.Item is the expected anchor.

Changelog

New

  • ActionMenu.IconButton — shortcut for using IconButton as menu trigger, equivalent to wrapping it in ActionMenu.Anchor
  • ActionMenuIconButtonProps type export
  • Dev-only console.warn when ActionMenu.Anchor receives a non-interactive child element

Changed

  • ActionMenu.Anchor now uses useMergedRefs to combine an internal ref (for child validation) with the forwarded ref

Removed

None

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

  • New tests cover ActionMenu.IconButton (open/close, event handlers, id forwarding)
  • New tests verify the warning fires for non-interactive anchors (<div>) and does not fire for Button or IconButton
  • Submenu tests confirm no false-positive warnings for ActionList.Item anchors
  • Type tests validate ActionMenu.IconButton prop types

Merge checklist


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ActionMenu.Anchor should only accept button

3 participants