You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.)
For sighted users, having tooltips pop up on every item is pretty annoying, and not normal... for a context menu, for example.
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.
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).
The text was updated successfully, but these errors were encountered:
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?
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:
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).
The text was updated successfully, but these errors were encountered: