Can't use tab for options in the middle

[AntoineAugusti]

In the prod version, on https://covid-prestations.alpha.canada.ca/fr/province, I can't tab multiple times to select an option. Only the first and last options are tabbable.

User agent: Chrome 81, macOS

[CalvinRodo]

This is the same functionality that exists for the Web Experience Toolkit

https://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html

It's also the same behaviour that GDS uses for it's Radio Buttons.

https://design-system.service.gov.uk/components/radios/

I'm going to assume that Tabbing to the first item and then using the arrow keys to navigate is the expected behaviour for Radio Buttons, I'll follow up with some a11y experts to make sure.

[JuliannaR]

Radio buttons should be used when only one option from a group can be selected. Where a user is expected to only select one option the keyboard use pattern is usually the arrow keys. Tab should be used when the expectation is to select more than one item. Like with a checkbox where you select all that apply.

There are two expected patterns for behaviour of the interaction:

1. Use arrows: ↑/↓ or ←/→ - select an option.
2. Tab - move to the next element.

Resources: Webaim Keyboard techniques: https://webaim.org/techniques/keyboard/ W3C Working Examples of interaction: https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/radio/radio-1/radio-1.html

[CalvinRodo]

Closing this issue as it is working as expected.

[AntoineAugusti]

Oh, I didn't know that! That's for taking the time to explain it 👌

[CalvinRodo]

No problem, thanks for the issue.