Use Carbon tooltip instead of browser generated title tooltip for components

Environment

Operating system: MacOS Big Sur (11.4)

Browser: Chrome 91

Testing Tool: Manual

Detailed description

What version of the Carbon Design System are you using?

carbon-components: 10.38.0 carbon-components-react: 7.38.0

What did you expect to happen?

The MultiSelect.Filterable, ToastNotification, InlineNotification, and NumberInput Carbon React components each take prop inputs for text to be displayed in the default browser tooltip (internally using the title attribute). Some components just take a string while others take a function that returns a string (to allow for translation messages for singular/plural). These tooltips contain information that is not displayed elsewhere, so they should be resized when the browser is zoomed-in to allow those with varying levels of vision to read the text.

What happened instead?

The default browser tooltips do not resize as the browser is zoomed-in. This means that when you go from 100% to 200% zoom on a webpage, the browser tooltip remains the same size. Because these tooltips are generated by the browser and merely generated from a title attribute, there is no workaround to force these tooltips to resize. This problem is noted in the MDN Web Docs for the title attribute which notes that “if a tooltip effect is desired, it is better to use a more accessible technique” instead of this built-in tooltip. For Carbon, a more accessible technique could come in the form of integrating the custom Carbon tooltip into these components.

What WCAG 2.1 checkpoint does the issue violate?

Success Criterion 1.4.4 Resize Text

Steps to reproduce the issue

1. Use the InlineNotification component as an example (though there are others).
2. Input a string for the iconDescription prop.
3. Build and view the webpage.
4. Zoom the browser to 200%.
5. The tooltip on the InlineNotification close button does not resize.

CodeSandbox: https://codesandbox.io/s/carbon-tooltip-issue-n91ng?file=/src/index.js

Additional information

Screenshot at 100% Zoom:

Screenshot at 200% Zoom:

[mbgower]

@sstrubberg asked me to have a look at this.

I would not disagree that improvements on the user agent default “title” tooltip behaviour are worth pursuing. Many of us have been waiting for user agent ‘fixes’ for decades. Desired changes include:

• ability to increase text with browser zoom (Resize text)
• ability to appear on keyboard focus (Keyboard)
• ability to dismiss with Esc (Content on Hover or Focus)
• persistence until dismissed (Content on Hover or Focus)

Those are all things that meet various WCAC requirements (as noted in parentheses).

Carbon piggybacking on the title functionality doesn’t create a new problem. One can argue that it is a browser bug – not something Carbon needs to solve. But like a lot of really annoying ‘established’ user agent behaviour there is no sign of browsers chomping at the bit to alter the status quo.

So if Carbon has an established way of achieving improved, consistent tooltip behaviour on its components, I think it is definitely something to pursue.

PS In an ideal world, Carbon would have a way of letting users set preferences and let them decide on how they want tooltips to behave. If Carbon ever pursues personalization, this would definitely be a feature to consider.

[tay1orjones]

Thanks for the suggestion here @griffindvs! I marked this as a proposal for the team to discuss and consider moving forward because as you note, there’s not really a way for us to impact the browser generated elements like title hover/tooltips.