Tooltip doesn't show when button is disabled

[MikeyZat]

When button is in disabled state, the tooltip doesn't show anymore

What package(s) are you using?

• carbon-components: 10.29.0
• carbon-components-react: 7.29.0

Detailed description

Issue is visible in storybook: https://react.carbondesignsystem.com/?path=/story/components-button--playground

I would expect the tooltip to show even if button is disabled (this was working before). We often use that option to indicate why the button is disabled.

Steps to reproduce the issue

1. Create iconOnly button
2. set it to disabled state (disable props)
3. See that the tooltip with description doesn't show anymore

Additional information

This is a regression, it was working before

[tw15egan]

@MikeyZat Do you know which version we had disabled tooltips on Icon Only buttons? I've created a CodeSandbox going back to 7.6.0 which is almost 2 years old and I'm not seeing any tooltips when the Button is disabled

https://codesandbox.io/s/happy-cloud-j7n6k?file=/src/index.js

Tooltips on disabled buttons are inherently inaccessible, as keyboard and screen reader users will not be able to focus them, leaving the content and information hidden.

[MikeyZat]

@tw15egan I am not able to find correct version which shows tooltips on disabled buttons but I'm almost sure it worked on some.

Anyway, are there any plans to add that functionality? It could be another prop like disabledButtonDescription. It would be very helpful in cases we want to inform the user why he can't submit some action.

I can make a PR if given a green light for that.

[tw15egan]

@MikeyZat there are no current plans for adding support for tooltips on disabled Buttons. @dakahn, is there any possible workaround for this functionality, or is this pattern inaccessible?

[dakahn]

the button could be visually/stylistically disabled but not have the disabled attribute. Leaving it in the tab ring and keyboard accessible.

That said I would never advise a tooltip be the lone method of feedback for a disabled button.

[leximarie]

@tay1orjones @dakahn Can we re-open this issue? There is definitely a use case for this. I want a tooltip on an edit icon button to tell the user why they can't edit. This could be a separate prop.

[jomaresch]

I agree with @leximarie. We face the same problem.
In my option this type of user feedback is very elegant and it's even used by Github:

That said I would never advise a tooltip be the lone method of feedback for a disabled button.

@dakahn What is the intended way to indicate to the user why a button is disabled?

[tay1orjones]

@leximarie Yes, I think it makes sense to reopen. Here's an overview of the status of this:

The core of this issue is that buttons marked disabled aren't focusable. In order for tooltip contents to be surfaced to keyboard and screenreader users, tooltips must only be associated with interactive/focusable elements. This is how Carbon Popover, Tooltip, ToggleTip, etc work.

In the example from GitHub, the "approve" button is disabled and the tooltip only appears on hover. This is problematic because a keyboard user will never see that message. The tooltip contents is also not read by screenreaders for the same reason.

We're exploring the feasibility of allowing focus on buttons that are functionally disabled in #14646. I'm not confident that it's an accessible pattern though. We're reviewing it as a team, with IBM's Accessibility team, and internally (slack thread) with product teams.

All this said, the most valid thing that must be solved is what @jomaresch already outlined:

What is the intended way to indicate to the user why a button is disabled?

We do not have a good solution for this right now. It's highly dependent on context of the type of button, placement in the overall UI, and the button's function. If we can't land #14646, I think we should identify and document alternative ways to describe disabled elements through design.

[tay1orjones]

In the example from GitHub, the "approve" button is disabled and the tooltip only appears on hover. This is problematic because a keyboard user will never see that message. The tooltip contents is also not read by screenreaders for the same reason.

GitHub recently updated the behavior described above and no longer has the tooltip on hover. Additionally, the text previously in the tooltip is now re-worded and provided inline below the radio buttons. An interesting and elegant solution for sure 👍

[tay1orjones]

After a lot of consideration and review, we're not going to land #14646 for a variety of reasons.

I know this isn't the outcome many folks wanted, but our team is committed to evaluating the root issue and providing more robust guidance around disabled elements. This work will be aimed at extending the disabled states pattern already present on the website. This and more is outlined in the issue I opened today:

• Improve disabled states documentation carbon-website#3758

[tay1orjones]

Closing this as a lack of tooltips on disabled buttons is intended behavior