Issue Summary

On "Find an issue" page, the tooltip content "In Progress This issue is being actively work..." available on "In progress" text is not accessible for screen reader users. 

Note : This issue is found on "Basic" and "Advanced" mode.

Steps to Reproduce

1. Open any project. 
2. Activate "Issues" button in the header section and select "Search for issues" option.
3. Navigate through page using VoiceOver. 
4. Observe that the when "In progress" text receives focus, the tooltip content appears. 
5. Observe that the tooltip content is not accessible for screen reader users. 

Screen Recording 

Screen Recording 2024-02-09 at 12.24.15 PM.mov

Screenshot

Actual Results

The tooltip content such as "In Progress This issue is being actively work..." is not accessible for screen reader users. As a result screen reader won't be able to interact with the functionality and Information.

Additionally the tooltip content is coded at the end of the source code inappropriately.

The tooltip content is accessible for keyboard users.

Expected Results

Make sure that the tooltip functionality is accessible for all users.

Apply following changes: 

1. Code "In progress" task as button using <button> or <div role="button" tabindex="0" ..> elements.
2. Specify role="tooltip" to the <div> element that contains the tooltip content.
3. Place tooltip content below tooltip button. 
4. Associate tooltip content with tooltip button using id="" and aria-describedby="" attributes. 

<button aria-describedby="tooltip1">In progress</button>
<div role="tooltip" id="tooltip1">In progress This issue being actively work...<div>

Workaround

Not 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