[a11y]: Tooltip examples and behaviour need to be updated

[mbgower]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

https://react.carbondesignsystem.com/?path=/story/components-tooltip--default

React version

No response

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

The interaction of various tip examples is inconsistent and contradictory between tooltip and toggletip..
1) The Live demo example on the usage page makes no sense. When the focus lands on the i icon, nothing happens. Then I tab again, and focus remains on the 'i' and suddenly it has a tip. Focus should immediately trigger thte tip to appear.
2) In the same Live demo section, changing the Variant selector to be definition tooltip also shows an implementation problem. The definition never appears on focus/hover but instead appears exclusively on click/activate. It is implemented as a TOGGLETIP instead of as a tooltip.
3) In storybook, the definition tooltip is under its own "D" heading instead of being under tooltip. It is less likely to be discovered there, and should be under tooltip, as is the case with variants of other components
4) Further the definition tooltip is again implemented as a toggletip instead of a tooltip. The difference in behaviour makes no sense. As mentioned in carbon-design-system/carbon-website#3332, the definition tooltip should always expose on hover/focus.
5) The playground for tooltip has the tooltip appearing before it has focus. Same for the playground for the definition tooltip. This should obviously not be happening
6) As mentioned in the website issue, all the uses of the information icon ('i') for tooltips should be expunged from the storybook and from the Figma kits

7) A challenge for Carbon is that while the tooltip component has a requirement for text, the icon-only button does not, nor does the ghost button, yet they both need a tooltip to provide context. So guidance in both Carbon and storybook and in Figman's buttons should be revamped so that the label/name attribute is populated -- except in some very limited cases where there is a reason that the tip should not be exposed on focus/hover.

Tasks

Preview Give feedback

1. [tooltip] live demo has bugs carbon-website#3712
   area: component-demo component: tooltip role: dev 🤖 type: bug 🐛 +4
2. [Tooltip a11y]: Playground implementation
3. [Figma] tooltip info icon needs to be updated carbon-design-kit#721
   kit: figma role: design ✏️ type: enhancement 💡 +3
   

WCAG 2.1 Violation

No response

Reproduction/example

https://carbondesignsystem.com/components/tooltip/usage#live-demo

Steps to reproduce

Go to both the live demo and the storybook examples

• https://carbondesignsystem.com/components/tooltip/usage#live-demo
• https://react.carbondesignsystem.com/?path=/story/components-definitiontooltip--default
• https://react.carbondesignsystem.com/?path=/story/components-tooltip--default

Using a keyboard

1. attempt to have tooltips display on focus (tab to them without having to activate)
2. attempt to dismiss using Esc

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[mbgower]

@sstrubberg IMO issues 4 and 5 should be treated as higher severity.

[sstrubberg]

@mbgower Any chance you could break issues 4 and 5 into separate tickets that we can triage and prioritize against a sprint? Also happy to have you come back to refinement so we can do it together :)

[mbgower]

Also happy to have you come back to refinement so we can do it together :)

@sstrubberg Happy to. Can you please add me to invite

[sstrubberg]

Blocked until we handle carbon-design-system/carbon-website#3332

[laurenmrice]

Addressing mentioned above items

1. The Live demo example on the usage page makes no sense. When the focus lands on the i icon, nothing happens. Then I tab again, and focus remains on the 'i' and suddenly it has a tip. Focus should immediately trigger thte tip to appear.

2. In the same Live demo section, changing the Variant selector to be definition tooltip also shows an implementation problem. The definition never appears on focus/hover but instead appears exclusively on click/activate. It is implemented as a TOGGLETIP instead of as a tooltip.

• Points 1 and 2: Made an issue about the live demo problems in the carbon-website repo. #3712

---

3. In storybook, the definition tooltip is under its own "D" heading instead of being under tooltip. It is less likely to be discovered there, and should be under tooltip, as is the case with variants of other components.

4. Further the definition tooltip is again implemented as a toggletip instead of a tooltip. The difference in behavior makes no sense. As mentioned in [a11y]: Tooltip documentation changes necessary carbon-website#3332, the definition tooltip should always expose on hover/focus.

5. The playground for tooltip has the tooltip appearing before it has focus. Same for the playground for the definition tooltip. This should obviously not be happening.

6. As mentioned in the website issue, all the uses of the information icon ('i') for tooltips should be expunged from the storybook and from the Figma kits

• Points 3, 4, 5, and 6 are dev tasks.
  • For the fourth bullet point, definition tooltip can optionally open on click, this should be a prop or optional implementation.
  • For the sixth bullet point, the figma portion of this will be tracked in an issue in the carbon-design-kit repo. #721

[tay1orjones]

We've updated the live demo on the website, so I crossed out the first two items in the list.

[tay1orjones]

#3 - This will be covered by #13189

#4 - They're always able to be invoked on click, we have a prop for disabling the hover interaction though. We do need to update DefinitionTooltip to open on focus. Definition tooltips are not intended to contain interactive elements, so I think they should always open on focus. I don't think this would be problematic to change the default behavior to always open definition tooltips on focus. There is still some difference in behavior between tooltip and definition tooltip though (click to open/close, mouseout closes the tooltip, etc). We need some design consultation on this to get it all ironed out. We should also review the determination with CAG.

#5 - We can remove defaultOpen from the playground stories for all tooltips

So #4 and #5 are the only actionable pieces left for this issue. We can handle those together in one PR, once done we can close this issue.