Devographics / Devographics/Monorepo
"Compare Date" button in charts is inaccessible to keyboard users
- Dominant language
- TypeScript
- Stars
- 178
- Forks
- 55
- Avg merge
- 1m
- Merged PRs (30d)
- 2
Description
## Describe the bug
When navigating the chart view via keyboard I cannot put focus on nor activate the "Compare Data" control.
## Browser
* Firefox 116
* Chrome 116
* Safari 16.5.1
## Steps to reproduce the bug
1. Navigate to [People](https://2023.stateofcss.com/en-US/resources/#people) on the [Resources](https://2023.stateofcss.com/en-US/resources/) page.
2. Choose the "Other Answers" tab.
3. Navigate through the nested tabs ("Chart", "Data", "Share").
4. Press arrow keys, `Tab↹`, or any other key to get to the "Compare Data" control.
5. Observe it is inaccessible with keyboard alone.
## Expected Behavior
* I can navigate to the "Compare Data" control with arrow keys, as if it were another tab.
* Failing that, I can `Tab↹` to the "Compare Data" control.
## Actual Behavior
* I _cannot_ navigate to the "Compare Data" control with arrow keys.
* I _cannot_ `Tab↹` to the "Compare Data" control.
## Related code
The chart is made up of this elided HTML:
```HTML
Compare Data
```
Note there is a click handler on the wrapper `
Also note that the nested `` has a `data-state` attribute, which itself has no meaning to browsers.
Also also note that the SVG is not hidden from AT.
## Additional Context
The code as shown violates the following WCAG 2.1 Success Criteria:
* [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html) (because it is inoperable by keyboard);
* [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) (because the SVG has no text alternative);
* [4.1.2 Name, Role Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) (because the control does not programmatically convey that it opens a dialog).
Consider merging the `
For the nested SVG, add `aria-hidden="true"` so it is not exposed to screen readers.
Instead of the `data-state` attribute, consider adding [`aria-haspopup="dialog"`](https://www.w3.org/TR/wai-aria/#aria-haspopup) to the ``, as [support is improving](https://html5accessibility.com/stuff/2023/06/20/aria-haspopup-less-is-more/) now that [NVDA has a fix coming](https://github.com/nvaccess/nvda/pull/14709).
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.