Issue Summary

In the ‘Package installation’ section of the npm status page, the controls (represented as <rect> elements) lack the proper ARIA parent role (role="tablist") to define their relationship. As a result, screen readers and other assistive technologies fail to properly interpret the structure and context of these elements, leading to a poor user experience for users relying on assistive devices.

Steps to Reproduce

1. Open the following URL: https://status.npmjs.org/
2. Log in with valid credentials (if needed).
3. Scroll to the ‘Package installation’ section where the uptime information is displayed.
4. Open Developer Tools in your browser (F12).
5. Enable Axe DevTools (or another accessibility tool of choice).
6. Run the accessibility audit on the page.
7. Observe the error message for missing ARIA parent roles on the controls under the ‘Package installation’ section.

Screenshot

Actual Results

The <rect> elements representing days of uptime are marked with role="tab", but they are not within a parent container with role="tablist".
As a result, assistive technologies cannot properly interpret these elements as part of a tab structure, and screen reader users are not able to understand the relationships between these elements.

Expected Results

ARIA roles should reflect accurate relationships between elements for screen readers to convey correct structure and meaning.
Recommended Fixes:

• If these elements are meant to function as tabs:
• Wrap them in a parent container with role="tablist".
• Ensure each tab element has aria-selected, aria-controls, and appropriate tabindex values.

Alternatively, if not meant to be tabs:

• Remove role="tab" and instead implement a list structure using:
• role="list" for the parent container
• role="listitem" for each <rect> element
• This semantic approach aligns better with how the information is visually and functionally presented.

Code snippet

<svg role="List" class="availability-time-line-graphic" id="uptime-component-mvm98gtxvb9b" preserveAspectRatio="none" height="34" viewBox="0 0 448 34">
<rect height="34" width="3" x="0" y="0"
  fill="#28a745"
  role="listitem"
  class="uptime-day component-mvm98gtxvb9b day-0"
  tabindex="0"
aria-describedby="uptime-tooltip">
</rect>

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

Workaround

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