-
Notifications
You must be signed in to change notification settings - Fork 370
Description
Describe the problem
The truncated content in examples (e.g. controlling text example) cannot be navigated to via keyboard.
Additionally, a tooltip must trigger for truncated content, otherwise that content gets lost to users.
See how Alert handles truncation:
patternfly-react/packages/react-core/src/components/Alert/Alert.tsx
Lines 198 to 201 in a2cb155
<TitleComponent | |
{...(isTooltipVisible && { tabIndex: 0 })} | |
ref={titleRef} | |
className={css(styles.alertTitle, truncateTitle && styles.modifiers.truncate)} |
How do you reproduce the problem?
Go to the above example and notice that no tooltip triggers on mouse hover and that the truncated content cannot be focused.
Expected behavior
A tooltip triggers showing all of the text content via mouse hover and keyboard focus.
Is this issue blocking you?
List the workaround if there is one.
Screenshots
If applicable, add screenshots to help explain the issue.
What is your environment?
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
What is your product and what release date are you targeting?
Any other information?