Accessibility issues in devtools #9818
Description
Describe the bug
using tanstack/query-devtools 5.90.2
During an internal accessibility audit, we uncovered some accessibility issues in the devtools panel.
- Settings menu Button does not have discernible text
- Screen reader does not correctly announce selected theme in settings controls
- Screen reader does not announce associated label information in explorer inputs
- Screen reader does not announce when query/data is expanded or collapsed
- Screen reader does not announce status updates when fetching/idle/etc state changes
These seem like they are resolvable using improved component options (radios for selection), aria labelling and other aria/html attributes
Your minimal, reproducible example
No minimal example, since this is just the devtools panel and not anything else
Steps to reproduce
Use a screen reader to focus on a Query control
Observe that the screen reader does not announce whether the Query is expanded or collapsed
Verify whether screen reader is announcing the associated label information for 'edit fields' control or not.
Observe that the screen reader announces selected theme information or not.
Verify whether Button does not have discernible text or not.
Click invalidate - Verify screen read doesn't read status changes
Expected behavior
As a user with a screen reader, I can correctly understand the items above
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
query-devtools 5.90.2
Tanstack Query adapter
None
TanStack Query version
5.90.2
TypeScript version
No response
Additional context
No response