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

Only add title attribute to item if item text has been truncated #8073

Closed
carmacleod opened this issue Mar 11, 2021 · 4 comments
Closed

Only add title attribute to item if item text has been truncated #8073

carmacleod opened this issue Mar 11, 2021 · 4 comments

Comments

@carmacleod
Copy link
Contributor

carmacleod commented Mar 11, 2021

Context menu, and other components that have items that may get truncated if the string is too long, have been using CSS to truncate the string and add an ellipsis, which is fine, but then a title is added to all items just to make sure that any truncated strings can be hovered to see the whole string. There are a couple of problems with this:

  1. Some screen readers read the text content as the item's name (the full text is available to them, so they read the whole thing), and then they read the title as the description, so the user gets to hear every item string twice. (Some screen readers don't read the description if it is identical to the name, but that is not universal.)
  2. For sighted users, having tooltips pop up on every item is pretty annoying, and not normal... for a context menu, for example.
  3. It doesn't even help sighted keyboard-only users see the full text of a truncated item, because title attribute cannot be opened with keyboard.

Please only add a tooltip if the text has actually been truncated.

#7768 may help with the logic for this issue.

Would be good to look at all Carbon components where long items are truncated, to see whether the code can be abstracted out and used for all such items.

In addition, consider whether you really want to use title, or whether Carbon's "Icon tooltip" (name should probably be more generic) might make for a more consistent "tooltip experience" across pages using Carbon. This would fix the keyboard-only problem (3). In addition, if you don't hook up aria-describedby, then you will fix the double-speak problem too (1) (because the item will have a name - which the screen reader can already see - but it won't have a description that just duplicates the name).

@emyarod
Copy link
Member

emyarod commented Mar 11, 2021

I believe #7768 should address this as you mentioned. based on the storybook preview in that PR are there any remaining components that have this issue aside from context menu?

@carmacleod
Copy link
Contributor Author

@emyarod I don't know. Haven't looked at #7768 yet. Does it use a custom tooltip?

@emyarod
Copy link
Member

emyarod commented Mar 11, 2021

currently it only applies title tooltips to truncated menu items, but I was targeting #6605 and #7451 after #7768 is merged

@tay1orjones
Copy link
Member

Duplicate of #9208

@tay1orjones tay1orjones marked this as a duplicate of #9208 Feb 6, 2023
@tay1orjones tay1orjones closed this as not planned Won't fix, can't repro, duplicate, stale Feb 6, 2023
@github-project-automation github-project-automation bot moved this from 🕵️‍♀️ Triage to ✅ Done in Design System Feb 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

No branches or pull requests

4 participants