Issue Summary
On the “Incident history” page, the “Filter components” button does not have a programmatically defined expandable state.
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 onto the mentioned instance and inspect the code.
4. Observe that the expandable state is not programmatically determined.
Screenshot
Actual Results
The “Filter components” expandable button does not have a programmatically defined expandable state. This button does not use aria-expanded attribute. As a result, users of assistive technologies found it challenging to understand the functionality associated with this element.
Expected Results
When elements expand or collapse a particular content, make sure that they have a programmatically defined expandable state. Use “aria-expanded” attribute on the expandable elements and update the “true” and “false” values appropriately. Make sure that the value is set to “true” when the element is expanded and “false” when it is collapsed.
Code Snippet
<button aria-expanded="false">
<span>Filter components</span>
</button>
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
Bug
High
Done by d6cd99910201 and validated by 153f1fd15216