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

[a11y]: Tooltip documentation changes necessary #3332

Closed
mbgower opened this issue Jan 4, 2023 · 2 comments
Closed

[a11y]: Tooltip documentation changes necessary #3332

mbgower opened this issue Jan 4, 2023 · 2 comments

Comments

@mbgower
Copy link
Contributor

mbgower commented Jan 4, 2023

This is an omnibus ticket, summarizing key problems with the content of the Usage and Style pages for the Tooltip component. (Specific problems with tooltip implementation are captured in carbon-design-system/carbon#12921.)
Detailed considerations, edits and suggestions are captured in pdf exports of the pages: usage.pdf and style.pdf. These documents should be reviewed in detail.

The key considerations are:

  • It's critical to make users understand that tooltips are for exposing the names/information of things that ALREADY take focus (in other words, one cannot click to see the tip because clicking the trigger will cause another action to happen)
  • the information icon (i) should not be used with tooltips, but should be reserved exclusively for toggletip. The information on MDN supports this:

The tooltip is not the appropriate role for the more information "i" icon, ⓘ. A tooltip is directly associated with the owning element. The ⓘ isn't 'described by' detailed information; the tool or control is.

  • It is recommended that Carbon remove the “Standard tooltip” guidance entirely. It’s likely to confuse everyone and perpetuate the noise
  • reduce information on popover content (and on a related note, we suggest you make popover a pattern, not a component)
  • It is recommended that Carbon make the definition tooltip always display on hover and focus. You could consider making it also display on click/activation (since AFAIK there is not other action associated with a defn tooltip) but it would be less likely to muff people up if it was just hover/focus. Let's make tooltip consistent for interaction, regardless of the context.
  • This is a lesser priority, but Carbon could consider providing an example/implementation of a tooltip on an input. Option 4 in this demonstration provides a poor-ish example. The potential advantage of this is where you don't want the user to have to activate an inforamtion icon to toggle on more pronounced help. 👈 not a priority
@sstrubberg sstrubberg moved this to 🕵️‍♀️ Triage in Design System Feb 6, 2023
@sstrubberg sstrubberg moved this from 🕵️‍♀️ Triage to 🪆 Needs Refined in Design System Feb 6, 2023
@sstrubberg sstrubberg changed the title Tooltip documentation changes necessary [a11y]: Tooltip documentation changes necessary Feb 6, 2023
@sstrubberg
Copy link
Member

  • When not to use section: The "i's" aren't tooltips. We need to change the image and update the guidance based on the differences between Tooltip vs Toggletip
  • Variant section: needs reworked. Lots of Toggletip action in there.
  • Lots of popover references: needs to be reworked. It makes more sense for that to be in the popover area.
  • DefinitionTooltip should be default appear on hover on focus. Currently the prop has to be set to enable this.

@sstrubberg
Copy link
Member

closing in favor of tracking through carbon-design-system/carbon#13521

@sstrubberg sstrubberg closed this as not planned Won't fix, can't repro, duplicate, stale Apr 12, 2023
@github-project-automation github-project-automation bot moved this from ⏱ Backlog to ✅ Done in Design System Apr 12, 2023
@sstrubberg sstrubberg removed this from the 2023 Q2 milestone Apr 12, 2023
@laurenmrice laurenmrice mentioned this issue Jul 5, 2023
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants