Issue Summary

On the “Incident history” page, the “Filter components” button does not have keyboard support.

Steps to Reproduce

1. Open URL: https://status.npmjs.org/ and sign in with valid credentials.
2. Navigate to the npm status page and reach 'View historical uptime' link, select it.
3. Navigate to the tab item incidents and select it.
4. Observe that the button does not have keyboard support.

Screenshot

Actual Results

The “Filter components” button does not receive keyboard focus. As a result, Keyboard-only and screen reader users will not be able to interact with the button.

Expected Results

All interactive elements should be focusable and operable with a keyboard. Use native <button> elements that have keyboard support by default.

If this is not possible, use custom role="button" and tabindex="0" to make sure that this button receives keyboard focus and have an interactive role.

Code snippet

<button aria-expanded="false">Filter components</button>
<!-- or -->
<span tabindex="0" role="button" aria-expanded="false">Filter components</span>

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