Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI Components] Button component should support tooltip display #11

Open
huyenltnguyen opened this issue Jan 4, 2024 · 1 comment
Open
Labels
status: discussing Under discussion threads. Closed as stale after 60 days of inactivity. type: feature request New feature or request

Comments

@huyenltnguyen
Copy link
Member

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 Screenshot 2024-01-04 at 16 49 39
Caption toggle Screenshot 2024-01-04 at 16 51 41
Language selection Screenshot 2024-01-04 at 16 52 15

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
Copy link
Contributor

bbsmooth commented Jan 4, 2024

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 🙂

@raisedadead raisedadead transferred this issue from freeCodeCamp/freeCodeCamp Apr 4, 2024
@huyenltnguyen huyenltnguyen added type: feature request New feature or request status: discussing Under discussion threads. Closed as stale after 60 days of inactivity. labels Apr 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: discussing Under discussion threads. Closed as stale after 60 days of inactivity. type: feature request New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants