Issue Summary

On "Your Work" page, the The tooltip content such as “This pull request has conflicts that need to be resolved before it can be merged." is not accessible for screen reader and keyboard-only users.

Steps to Reproduce

1. Open "Your Work" page.
2. Observe that the mentioned tooltip content appears on hover on "CONFLICT" text. 
3. Navigate page using keyboard and screen reader. 
4. Observe that the tooltip content is not accessible for keyboard and screen reader users. 

Screen Recording 

Screen Recording 2024-03-01 at 4.14.51 PM.mov

Actual Results

Tooltip content that becomes available when users hover with a mouse on the “CONFLICT" text,  a tooltip content becomes available visually which is not available for keyboard-only and screen reader users.

As a result, keyboard-only and screen reader users will not able to aware about the tooltip content.

Expected Results

The mentioned tooltip should be accessible for keyboard only and screen reader users.

Make the tooltip accessible by performing following steps:

1. Replace the <span> element with native <button> element in the source code so that it receives keyboard focus.
2. Place the tooltip content in a <div> element and provide a unique “ID” attribute to it. Additionally add role=”tooltip“ to the <div> element.
3. Control the visibility of this <div> element using CSS depending whether the button is in focussed state or not. Ensure that this <div> element does not get dismissed when hovered with mouse. However, the tooltip content can be dismissed on activating “Esc“ key or when it looses focus.
4. Lastly, provide "aria-labelledby" attribute to the <button> and pass the ID of the <div> element as its value. This will read out the content of tooltip to the screen readers when the button is focussed.

Refer this link for accessible tooltip working example → ARIA Tooltip

Workaround

 Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2021)
macOS Sonoma Version 14.1
Chrome - Version 119.0.6045.159 (Official Build) (arm64)
Firefox- Version 93.0 (32-bit)
Safari- Version 17.1 (19616.2.9.11.7)
JAWS- Version 2023
NVDA- Version 2020.3
Voiceover - Version Latest