Carbon: [TooltipDefinition] Internal button should support disabled property

Created on 11 Mar 2020  ·  3Comments  ·  Source: carbon-design-system/carbon

Summary

The TooltipDefinition component is using undercover a button (see line 76: https://github.com/carbon-design-system/carbon/blob/master/packages/react/src/components/TooltipDefinition/TooltipDefinition.js) in order to display the tooltip.

Doing so means that the TooltipDefinition is clickable and therefore focusable (and selectable using the TAB key).

Supporting the button's disabled attribute will allow to make the button unfocusable and unselectable.

Justification

In our product we use the TooltipDefinition to display additional info on the meaning of some status icons and also to help when the text is truncated on low resolutions.

Design team ask us to remove the focus outline + pointer as there is no action when you click on a
TooltipDefinition.

Disabling the button will also remove it from the TAB key navigation.

discussion 💬 question ❓

All 3 comments

showing that the component is interactable and supporting keyboard navigation are requirements for tooltips that we are trying to meet. if you would like to remove the visual styles you can do so with CSS in your application stylesheet, but I don't believe we will support disabled tooltip triggers to remove the tab stop

Yeah, agreed with @emyarod in that this is an affordance provided for accessibility. Supporting disabled in particular would mean that keyboard and screen reader users would be unable to interact with the control 😞

This article may be helpful to share within the team to better understand tooltips and their requirements: https://inclusive-components.design/tooltips-toggletips/

Let us know if you have any further questions!

Hi @emyarod @joshblack thanks for your time. I understand your point and I think we can close this issue. And thanks for the really instructive article.

Was this page helpful?
0 / 5 - 0 ratings