Devographics / Devographics/Monorepo

CSS Survey radio buttons do not work with keyboard alone

Open
#237 17 comments 5 reactions 1 assignee Claimed by @eric-burel View on GitHub
a11y surveyform tough one
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.