Skip to content

Tooltips on tabs are currently not accessible #6311

@jessiehuff

Description

@jessiehuff

Describe the issue. What is the expected and unexpected behavior?
When adding a tooltip to a Tab (both enabled and aria-disabled), if you use a keyboard to tab to the Tab component, the tooltip does not appear. You have to press enter to get the tooltip to appear for keyboard users. That seems extremely unexpected for the tooltip to appear on hover for mouse users but require interaction for keyboard users. Nicole had a good theory that there might be a discrepancy between where the tooltip is put (on the li) and where the focus is (on a button).
I also noticed that these tooltips do not get announced in a screen reader. We probably need an aria-describedby={tooltipId} like we have in our aria disabled button example.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

Try to interact with a Tab with a tooltip by keyboard and by screen reader. You'll notice that they don't appear on focus and aren't announced in VO.

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
Bug

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions