CSS Survey radio buttons do not work with keyboard alone

[aardrian]

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:

//*[@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 (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

[SachaG]

Thanks for the detailed report :)

[eric-burel]

On it, for the record this is Firefox specific (perhaps Safari), it works ok in Chrome

[Paiman-Rasoli]

tabindex attribute may solve the problem, as we explicitly set the order of tabs.

[eric-burel]

Interestingly enough, this happens in React yet the generated HTML behave as expected in Firefox: https://codesandbox.io/s/festive-faraday-z5l6zq?file=/src/index.html

I will try the tabindex but there might also be an issue with the component "key" or the inputs remounting/rerendering too much.

[aardrian]

tabindex attribute may solve the problem, as we explicitly set the order of tabs.

It will not. This is about arrow key navigation within a radio group, something over which tabindex has no influence.

Also, do not use tabindex values greater than zero anywhere. You are asking for a WCAGSC 2.4.3 Focus Order violation (F44 example). If you are using tabindex values greater than zero in any of your projects I encourage you to review them.

[eric-burel]

@aardrian @Paiman-Rasoli I confirm tabindex (or tabIndex in React) has no effect here, and the HTML seems correct, so the issue stems from the form itself.

I suspect that some component is rendering/mounting where it should not which a common cause of faulty focus. Chrome is perhaps more forgiveful here.

Much thanks for the detailed ticket and all insights that have been shared anyway. This is a deep issue that would need a full review of the form, something I'll probably only have the time to next year, unless we find another solution in between.

[aardrian]

Other than some problematic HTML nesting, the raw HTML pulled from the rendered DOM works fine (I yanked the disabled attributes): https://codepen.io/aardrian/pen/VwqWzLM

Since the form is no longer active, I cannot be sure what the event handlers are really doing. But there are a lot of functions attached to the keypress, keydown, keyup, focus, focusin, and focusout handlers. IMO, the simplest thing to do to make the radios work is to remove all that script.

[eric-burel]

I don't see event attached directly to the inputs but I'll keep that in mind, perhaps a bad interaction with another part of the app having such listener indeed.

[aardrian]

I have just started the State of HTML survey and can confirm the issue with radio buttons is still there (I am using Firefox).

[aardrian]

I made a video for https://github.com/Devographics/Monorepo/issues/307 which also shows the this issue.

https://github.com/Devographics/Monorepo/assets/1376607/d069f2b7-c262-42b4-aff3-d06ba57df43a

[SachaG]

I'm stumped on this one… @LeaVerou any idea what could cause this?

[LeaVerou]

I cannot reproduce this in Firefox, arrow keys within these radios seem to work fine for me. I'm having a different issue in Safari, where I cannot seem to tab through any radio or checkbox questions: tab focus just goes straight to the pain points. Is anyone else having this issue?

[eric-burel]

@LeaVerou interesting, which version of Firefox? I will dig this issue again later this week when working on the form. At least I can reproduce easily on FF 117 so it can be debugged

[LeaVerou]

@LeaVerou interesting, which version of Firefox? I will dig this issue again later this week when working on the form. At least I can reproduce easily on FF 117 so it can be debugged

118 (developer preview)

[aardrian]

What happens when you try in 117? Ideally using default settings (to better match survey participants).

[LeaVerou]

Oh wow, I can definitely reproduce in a fresh copy of Firefox 117! What a bizarre bug!

[backwardok]

Was also able to repro this in Firefox (I'm on a mac). I did notice, for some reason, that if you press the up arrow key you can get to some of the subsequent options, but then you're again stuck on 2 options.