Issue Summary

A tooltip appears on the “Ready to go” text is inaccessible for both keyboard only and screen reader users.

Steps to Reproduce

1. Navigate to the header section and activate the "Create" button.
2. Navigate to the "Ready to go" text and mouse hover on it. Observe one tooltip appears.
3. Try to navigate the tooltip with the keyboard.

Screenshot

Actual Results

On the page, an interactive element (tooltip) is used to convey crucial information present on the "Ready to go” text. This interactive element is coded inappropriately in <div> which makes tooltip functionality inaccessible for keyboard only and screen reader users as the element did not receive keyboard focus and thereby missing the crucial information. Moreover, the tooltip is only available on mouse hover.

Expected Results

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

Make the tooltip accessible by performing the following steps:

1. Replace the <div> elements with the native <button> element in the source code so that it receives keyboard focus.
2. Modify the script to make the tooltip information available on hover as well as on focus. In addition along with mouse specific event handlers, use keyboard specific event handlers, such as "onfocus", onblur", etc. to make the functionality accessible for keyboard-only users.

Refer to this link for an accessible tooltip working example → ARIA Tooltip

Workaround

Not available

Environment 

MacBook Pro (16-inch, 2019)
macOS 13.4.1 (c) (22F770820d)
Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
Firefox- Version 114.0 (64-bit)
Safari- Version 16.5.2 (18615.2.9.11.10)
JAWS- Version 2023.2306.28
NVDA- Version 2022.2.2
Voiceover - Version Latest