Find an issue : Tooltip content inaccessible for keyboard and screen reader users

Issue Summary

The tooltip content such as “Showing 10 of 37  matching fields find more fields by typing in the search box“  and "These criteria are hidden because they are not applicable to the current project and/or issue type" is not accessible for screen reader and keyboard-only users.

Steps to Reproduce

1. Navigate to “Projects” menu pop-up link and activate it.
2. Navigate to “View all project” link and activate it
3. Navigate to "kanban" link present in data table and activate it.
4. Navigate to "View all issues and filter" link and activate it.
5. Navigate to "Order by" and "More" popup and activate it.
6. Navigate to the mentioned tooltip content using keyboard.
7. Turn on the screen reader and observe that tooltip content is not accessible.

Actual Result

Tooltip content that becomes available when users hover with a mouse on the “27 more feilds” and "Excluding 5 hidden" 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 Result

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

Screenshot

Workaround

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

Environment

MacBook Pro (13-inch, 2020)
macOs Ventura  13.3.1
Chrome - Version 108.0.5359.124 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.2 (18614.3.7.1.5)
JAWS- Version 2021
NVDA- Version 2021.2
Voiceover - Version Latest