[a11y]: Improve information icons on Form label with tooltip

[mbgower]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

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

React version

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

Automated testing tool and ruleset

n/a

Assistive technology

yes, any screen reader

Description

Carbon has done a good job of incorporating the information icon into a form input. The label for the input is made the label for the information button. Nice!

However, there are a few implementation details that could be altered to make this a better experience for a screen reader user.
The basic challenge is that because the button precedes the form field, the user may not have context on what it is for (even with the button having the input name). For instance, will a user understand or misinterpret what the Password button is for?

The simple suggestion is to give the icon a title of "information", that way a user will hear "Password information button" (or possibly "password button, information". The following screen shot shows the accessibility tree before and after this change. In the first, the button is 'Form label'. In the second, it has picked up the button title and is 'Form label information'

---

I'll mention that the react implementation shows a one-time tooltip for the button on focus called "provide more information about a field". I cannot see where that text is coming from, but my suspicion is that the title "information" would be exposed in this similar manner

WCAG 2.1 Violation

I'm not sure I'd call it a failure, but it is relevant to 1.3.1 Info and Relationships

Reproduction/example

reproducible from react library

Steps to reproduce

1. Go to https://react.carbondesignsystem.com/?path=/story/components-formlabel--with-tooltip
2. Press tab and then Enter on Skip to canvas
3. Press tab again to put the focus on the i icon

add title="information" or "informational" to the div with the role of button.

Repeat with screen reader, if you need to understand the lack of context.

Code of Conduct

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

[tay1orjones]

The usage for this component was outdated in storybook, it was updated in #11779 and should fix this issue since it now uses the tooltip appropriately.