Devographics / Devographics/Monorepo
CSS Survey radio buttons do not work with keyboard alone
- Dominant language
- TypeScript
- Stars
- 178
- Forks
- 55
- Avg merge
- 1m
- Merged PRs (30d)
- 2
Description
Filling out State of CSS Survey 2023:
https://survey.devographics.com/en-US/survey/state-of-css/2023/hfg5V70I2tPvW2i5wgy1V/13
**To reproduce:**
1. navigate to _About You_ page
2. using just your keyboard, navigate to any set of radio buttons with more than 4 choices
3. attempt to choose the third choice
4. attempt to select any choice that is not the first two or last two
**What should happen:** I can select any radio button.
**What actually happens:** I can only choose the first two or last two from a set of radio buttons.
**More detail:**
I confirmed the `name` attributes are appropriate for each group using the following XPath to match the count of visible radios:
```XSLT
//*[@name="css2023__user_info__age__choices"]
//*[@name="css2023__user_info__company_size__choices"]
//*[@name="css2023__user_info__yearly_salary__choices"]
//*[@name="css2023__user_info__higher_education_degree__choices"]
//*[@name="css2023__user_info__gender__choices"]
```
**Platform:** Firefox 114 / Windows 11
**WCAG failure:** This constitutes a [WCAG SC 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html) (Level A) failure.
**Video demonstration:**
The following video shows me trying to get to a radio option in the middle of the set by repeatedly pressing `↓`, which cycles between the first two radios, or by pressing `↑`, which cycles between the last two radios. If I click a radio in the middle and use the arrow keys, I am moved to the first or last pair of radios again.
https://github.com/Devographics/Monorepo/assets/1376607/d4a289ec-bc7e-419a-bc5a-e9d92113a514
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.