[a11y]: toggletip implementation bugs

[mbgower]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

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

React version

No response

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

There are four primary challenges:

1. None of the toggletips should be visible in storybook until activated. Instead, they are all showing before the i icon is triggered
2. When the toggletip is expanded and has a tabstop inside it, tabbing out of the toggletip should collapse the tip. This is not happening in the playground or default views
3. If the focus is in the toggletip when the Esc is pressed, the focus should return to the trigger. Instead, it is unclear where it goes. There is no other place that makes sense except the toggle tip, IMO.
4. There is something called a "Toggletip label" that appears in front of the i icon button. AFAIK, this cannot exist and has no place in the component. It is not listed in the anatomy of the component on the Usage page, for example. Maybe it's meant to demonstrate that the toggletip icon may follow the label for another component, but it is very confusing and should be revamped.
   

WCAG 2.1 Violation

Focus Order

Reproduction/example

https://react.carbondesignsystem.com/iframe.html?args=defaultOpen:true&id=components-toggletip--playground&viewMode=story

Steps to reproduce

1. Go to https://react.carbondesignsystem.com/iframe.html?args=defaultOpen:true&id=components-toggletip--playground&viewMode=story
2. Use a keyboard to navigate to it. The tip will already be open although it has yet to be activated (first issue)
3. On an expanded tip with a tabstop inside it, tab into the tip and keep tabbing until the focus leaves the tip. The tip is not collapsed (second issue)
4. On an expanded tip with a tabstop inside it, tab into the tip and press Esc. The trigger will not get focus (third issue)

Code of Conduct

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

[tay1orjones]

Thanks for opening this! I'll try to hit each piece individually here:

1. None of the toggletips should be visible in storybook until activated. Instead, they are all showing before the i icon is triggered

Yeah this is intentional - we set the open prop to true by default in the story so the toggletip internal styling is shown for our automated visual snapshot testing.

2. When the toggletip is expanded and has a tabstop inside it, tabbing out of the toggletip should collapse the tip. This is not happening in the playground or default views

Yes, this needs to be addressed.

3. If the focus is in the toggletip when the Esc is pressed, the focus should return to the trigger. Instead, it is unclear where it goes. There is no other place that makes sense except the toggle tip, IMO.

Yes, this needs to be addressed.

4. There is something called a "Toggletip label" that appears in front of the i icon button. AFAIK, this cannot exist and has no place in the component. It is not listed in the anatomy of the component on the Usage page, for example. Maybe it's meant to demonstrate that the toggletip icon may follow the label for another component, but it is very confusing and should be revamped.

The style documentation/spec does show a label and specifies it's typography tokens. @carbon-design-system/design Just to confirm, the intention is that Toggletip can be used with ToggletipLabel, FormLabel, or no label (as shown in the usage/anatomy on the site)

One thing we did find additionally is that we need to update ToggletipLabel to be using body01

[mbgower]

thanks @tay1orjones

Yeah this is intentional - we set the open prop to true by default in the story so the toggletip internal styling is shown for our automated visual snapshot testing.

Maybe it's possible to have one that does this that is ID'ed as doing that for that reason, and the rest behave as expected (not pre-opened)?

Just to confirm, the intention is that Toggletip can be used with ToggletipLabel, FormLabel, or no label (as shown in the usage/anatomy on the site)

That's interesting. I can certainly see a situation where the i icon ends up at the end of a form label (thought I think that would be a separate thing outside the label name, right, since it's in the tab order independently? There's not need to have it announced as part of the input?)
However, I'm having difficulty imagining someone putting in something like:

Seems pretty redundant. Why not just make the button say "info"?
Here's what that would look like as a ghost button

and as a tertiary

Not recommending that, but you see where I'm going, right? A button has a built-in label. A button with a label external to the button is almost a new one.
Like having a B button with the word 'Bold" in front of it.