-
-
Notifications
You must be signed in to change notification settings - Fork 198
Description
Hello! Thanks for maintaining a helpful reusable component!
The project
documentation reads (in part):
Accessibility
For accessibility purpose you can use the
id
prop to link your tooltip with another element. For example attaching it to an input element:<Tooltip ... id={this.props.name}> <input type="text" ... aria-describedby={this.props.name}/> </Tooltip>If you do it like this, a screenreader would read the content of your tooltip if you focus the input element.
NOTE:
role="tooltip"
is also added to expose the purpose of the tooltip element to a screenreader.
This accessible user experience is undermined by a subtle low-level behavior. Specifically: the tooltip element is not created until the user hovers over the target element with a pointing device. If a user is traversing the document using a keyboard, then the "tooltip" will never be created, so the aria-describedby
reference will be invalid.
To properly support folks using assitive technologies, the tooltip element should be present whenever they navigate to the target.
Thanks again!