Issue Summary

On “NPM status” page, interactive element i.e (tooltip) available just after "www.npmjs.com website ” heading text is inaccessible for keyboard only and screen reader users.

Steps to Reproduce

1. Open URL: https://status.npmjs.org/ and sign in with valid credentials.
2. Navigate to the various controls of npm status page.
3. Navigate to the info icon under the 'www.npmjs.com website' section.
4. Very whether the '?' icon is not accessible with keyboard or not.
5. Try to access tooltip element with keyboard. Observe it is missing keyboard support.

Screenshot

Actual Results

The mentioned interactive element (tooltip) is used to convey crucial information. These interactive element is coded inappropriately in <span> element which makes tooltip functionality inaccessible for keyboard-only and screen reader users as the elements do not receive keyboard focus on traversal thereby missing the crucial information. Moreover, the information is only present on mouse hover.This made it difficult for keyboard-only and screen reader users to access the tooltip content associated with mentioned element

Expected Results

The mentioned tooltip should be accessible for keyboard-only and screen reader users.
Make the tooltip accessible by performing the following steps →

• Replace the tooltip element with the native <button> element in the source code so that it receives keyboard focus on traversal.
• Provide a unique "ID" attribute to tooltip content in a <div> element containing role="tooltip” .
• Control the visibility of this <div> element using CSS depending on whether the button is in the 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 loses focus.

Lastly, provide "aria-describedby" attribute to the <button> and pass the ID of the <div> element as its value. This will read out the content of the tooltip to the screen readers when the button is focused.

Follow this link for working example of accessible tooltips → https://pauljadam.com/demos/tooltip.html

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 14.7.1 (23H222)
Chrome - Version 131.0.6778.265 (Official Build) (arm64)
Firefox- Version 112.0. 1
Safari- Version 18.2
JAWS- Version 2024
NVDA- Version 2024