[UI Components] Button component should support tooltip display

[huyenltnguyen]

Description

I think the Button component should support tooltip display. This helps communicate the purpose of the button better when the button content is only an icon.

Some usages in /learn are:

Button	Screenshot
Preview pop-out
Caption toggle
Language selection

Implementation notes

• I guess we could use Tooltip from radix-ui as a building block, and style the tooltip following our style guide (and we will need a design for this). Link to the doc: https://www.radix-ui.com/primitives/docs/components/tooltip.
• I think Button should accept a tooltip text as a prop. But we need to consider how tooltip would interact with aria-label if both are specified, having screen readers announcing both text might be excessive.

Expected behavior

• The tooltip prop is optional if the button has text content
• The tooltip prop is required if the button has icon-only content
• The tooltip shows up when the user hovers or focuses on the button
• If aria-label is not specified, the value of aria-label is the tooltip text (?)
• If both tooltip and aria-label are specified, display the tooltip for sighted users but hide it from non-sighted users (?)

[bbsmooth]

Tooltips are notoriously hard to make accessible. The Radix example you linked to does seem on the surface to be somewhat accessible, but if you test with a screen reader you will notice right away that it is not; there is no accessible name for the button. Maybe their example isn't intended to be completely accessible and they left it out? (Seems weird that they would do that, but you never know.) Also, I can't seem to get the tooltip to show on my phone at all (but I will admit that I'm not an advanced touch user so perhaps I am not doing something correctly).

The tooltips for these icon buttons should be used to display the accessible name for the button. For example, the current accessible name for the language picker button is "Change Language". Thus, the tooltip should display "Change Language". This gives everyone the same information about the button and potentially reduces the complexity of implementation since you have just one source for both the accessible name and the tooltip content.

Personally, I don't consider adding tooltips to the few icon-only buttons we have as essential for accessibility. I think most of the icons we are using are universally understood. And I have been pushing for the closed caption toggle to be changed to the universal CC icon (issue freeCodeCamp/freeCodeCamp#52771). But if we can manage to do it accessibly then I won't object 🙂