Skip to content

USWDS - Enhancement: Tooltip needs to announce "tooltip" for context #5891

Description

@amycole501

Describe the bug

The tooltip component the word "tooltip" isn't announced as a label.

The element that serves as the tooltip container should have a role tooltip.

Screen reader users are not able to discern the purpose of elements with role="tooltip" that do not have an accessible name. Aria tooltip elements must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users.

From w3c: Authors SHOULD ensure that elements with the role tooltip are referenced through the use of aria-describedby before or at the time the tooltip is displayed.

Steps to reproduce the bug

  1. Go to the tooltip component page
  2. Listen to the example buttons using assistive technology (in my case I used JAWS and NVDA)
  3. You hear the tooltip wording announced ("show on top button; top") but it's not declaring it as a tooltip. Currently it sounds like the button is repeating itself.

Expected Behavior

Listen to the tooltip example on Deque's website. You can hear "tooltip colon" then the tooltip wording.

Ideally on our component examples you would hear "Tooltip colon: Top. Show on top".

Screenshots

No response

System setup

PC, Chrome, JAWS, NVDA

Additional context

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct.
  • I checked the current issues for duplicate bug reports.

Metadata

Metadata

Assignees

No one assigned

    Fields

    No fields configured for Enhancement.

    Projects

    Status
    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions