Skip to content

Bug - Menu/menu-like - items with tooltips aren't linked correctly #11639

@thatblindgeye

Description

@thatblindgeye

Describe the problem
Menu items that have tooltips aren't linked to those tooltips as expected via aria-describedby on the menu item linking to the toolktip's ID.

Left a comment that goes into what the issue looks to be, that the way Tooltip tries to clone its children to auto-apply aria attributes doesn't work with MenuItem due to the first child being a fragment. Ideally we should try wrapping the Tooltip around the Component JSX (within the renderItem var), though we could also look into trying to auto-apply the aria-describedby and labelledby attributes when a ref is used as well (though not a priority for this issue since currently consumers need to handle that themselves).

How do you reproduce the problem?
Go to the Menu examples and add a tooltip to a MenuItem (or Dropdown or Select item on their pages) and notice that when the tooltip is triggered, there is not aria-describedby or aria-labelledby applied to the menu item that links to the tooltip's ID.

Note that the update made in #11567 uses a ref without wrapping the tooltip around the children anymore.

Expected behavior
Tooltips would auto-add aria attributes for MEnuItems like they would normally when wrapping children.

Is this issue blocking you?
List the workaround if there is one.

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

What is your product and what release date are you targeting?

Any other information?

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status

    Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions