Accessibility of Tooltip with disabled items

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I'm having trouble figuring out how to make accessibility work well with a Tooltip with disabled items.

If I follow the docs:

<Tooltip title="Delete">
  <span>
    <IconButton disabled>
      <DeleteIcon />
    </IconButton>
  </span>
</Tooltip>

then Tooltip adds the label to the span instead of the button, and I get warnings from accessibility tools like Axe and Lighthouse that a span element probably shouldn't have an aria-label and that the button doesn't have an aria-label.

I can address the second issue by duplicating the label:

<Tooltip title="Delete">
  <span>
    <IconButton aria-label="Delete" disabled>
      <DeleteIcon />
    </IconButton>
  </span>
</Tooltip>

But then I'm having to duplicate text, and I have two elements with the same label, which may introduce other accessibility concerns. (For example, React Testing Library's screen.findByLabelText is no longer happy, and I assume some screen readers would read it twice.)

Is there a clean way of fixing this? The only solution I can think of is for Tooltip to add some sort of wrap or allowDisabled or WrapperComponent prop that would cause it to use a span wrapper itself; that way, it could know the "real" child and inject the label or description there, while still having the wrapper it needs to let it work with a disabled child.

Examples 🌈

See https://codesandbox.io/s/lucid-sound-oh0mnx?file=/src/App.tsx for an example.

Motivation 🔦

See above.