Skip to content

Tooltip's lazy initialization undermines accessibility #496

@jugglinmike

Description

@jugglinmike

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions