Tab into radio group handles disabled groups differently

[Dayna-A]

Describe the bug

In some cases, tabbing through focusable items on a page will fail to skip disabled radio groups.

To Reproduce

Steps to reproduce the behavior:

1. run the demo page in auro-radio
2. tab through the page
3. notice the focus lands on the first element in the disabled radio group.
4. HOWEVER in other pages it sometimes skips it.(see two attached videos)

Expected behavior

Disabled radio buttons/groups are not focusable.

Screenshots

In repo demo page -> https://drive.google.com/file/d/13eODKqjOAX1c2_UctUdCPOZGFXkx-wjC/view

In demo docs page ->

Screen.Recording.2021-07-12.at.12.03.58.PM.mov

Desktop (please complete the following information):

• OS: macOS Big Sur 11.2.3
• Browser: Chrome 91.0.4472.114

[blackfalcon]

This issue persists with the concept of disabling the whole radio group.

The error is specifically with the disabled at the auro-radio-group element. The issue does not appear if the individual auro-radio elements have the disabled attribute and the group does not.

A potential re-work is to have the element place the disabled attribute on the individual elements in the slot versus trying to manage the disabled concept from an outer element.

While this is not an issue with auro-menu (yet), the same situation exists. AlaskaAirlines/auro-menu#65

[blackfalcon]

Moving this to READY FOR WORK as the issue does exist and there is a strong potential for a memory leak when the disabled attribute is used at the group level.

Similar work is being done with auro-menu that may help shed light on the solution for this issue.

[blackfalcon]

There is an opportunity to refactor some of the moving logic for this element based on what was learned with this PR to auro-menu

AlaskaAirlines/auro-menu#81

[blackfalcon]

This doesn't need to be a part of a RC. Bugs can go straight to main for release.

[fajar-apri-alaska]

I believe this could be fixed by adding a condition inside resetRadio function handler when setting the tabIndex like so:

// src/auro-radio-group.js

resetRadio() {
  ...

  if (!this.disabled) {
    this.items[this.index].tabIndex = 0;
  }
}

[blackfalcon]

@fajar-apri-alaska feel free to submit a PR with that fix. Thanks for the feedback.

[fajar-apri-alaska]

@fajar-apri-alaska feel free to submit a PR with that fix. Thanks for the feedback.

I did already, in #109