Accessibility of Tooltip with disabled items

[joshkel]

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.

[siriwatknp]

@michaldudak Would focusableWhenDisabled solves this use case?

[michaldudak]

It could, yes as it works by replacing the disabled attribute with aria-disabled. It's not available yet in Material UI, though.

[emlai]

We're running into this issue as well, and accessibility is very important to us. Is there a workaround for this?

[zhaowh3613]

any update for this issue？

[sag1v]

@joshkel A11y wise, is there a spec on how to deal with tooltips of disabled buttons?

[joshkel]

@sag1v I'm not aware of any:

• The latest WCAG draft describes what tooltips ought to do if they appear on hover, but it doesn't say anything about when or whether tooltips should appear on hover.
• MDN says it should be handled by keyboard focus events and mouse events.
• Draft tooltip design pattern w3c/aria-practices#128 indicates that how to handle tooltips on disabled controls is still a matter of discussion. There's a suggestion there to use aria-disabled rather than disabled.
• Additional resources: ARIA Authoring Practices Guide's tooltip pattern (the source for MDN) and practices for keyboard interfaces for disabled controls (the updated link for discussions from w3c/aria-practices#128)

Based on that, it sounds like the suggestion above of using focusableWhenDisabled / aria-disabled could work.

However, to clarify, my issue is less "MUI's Tooltip isn't accessible when used with a disabled item," it's more "MUI's recommendation for letting Tooltip work with a disabled item interferes with accessibility, even if the item is enabled." In other words, I'm okay with accessibility of disabled items being not ideal (since it's not well-specified and there are significant tradeoffs in how to handle it), but it seems undesirable for core accessibility features of enabled items to suffer in the process. Personally, if Tooltip had some sort of wrap or allowedDisabled or disabled option that allowed it to render the equivalent of

    <IconButton aria-label="Delete" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
      <DeleteIcon />
    </IconButton>

for enabled components and

<span onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
    <IconButton aria-label="Delete" disabled>
      <DeleteIcon />
    </IconButton>
</span>

for disabled components, I'd be happy. (E.g., maybe Tooltip could gain its own disabled prop that causes it to render a span itself while continuing to forward aria-label, etc. to its child button, instead of making the caller provide a span that Tooltip has to treat as opaque.)

This is all my personal opinion - I'm not an a11y expert and could easily be missing considerations.