Radio Button keyboard navigation doesn't work as expected when a group contains disabled options

[eriklharper]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When using calcite-radio-buttons in a grouping with some disabled options, unexpected behavior occurs:

• Round robin selection fails to work (moves between the first and last items when the appropriate key is pressed).
• Disabled options are not skipped over when navigating with the keyboard.

All of these bugs happen with or without a parent calcite-radio-button-group.

Expected Behavior

Within a group of radios that share the same name and also include some disabled options:

• "Round robin" keyboard selection should still work where pressing ArrowLeft on the first option selects the last non-disabled option and vice versa.
• When navigating around the group, the disabled one should always be skipped so that the next selectable option is able to be selected with the keyboard.

Reproduction Sample

https://codepen.io/eriklharper/pen/dyxxPQa?editors=1010

Reproduction Steps

See codepen for instructions.

Reproduction Version

v2

Relevant Info

No response

Regression?

Yes, unknown

Priority impact

impact - p1 - need for current milestone

Impact

This affects keyboard user accessibility.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)