fix(radio-button): focuses first focusable radio-button element in group.

packages/calcite-components/src/components/radio-button/radio-button.e2e.ts

@@ -10,6 +10,8 @@ import {
   reflects,
   renders
 } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { getFocusedElementProp } from "../../tests/utils";
 
 describe("calcite-radio-button", () => {
   describe("renders", () => {
@@ -452,4 +454,58 @@ describe("calcite-radio-button", () => {
   describe("is form-associated", () => {
     formAssociated("calcite-radio-button", { testValue: true, inputType: "radio" });
   });
+
+  it("focuses first focusable item on Tab", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <div>
+        <calcite-label layout="inline">
+          <calcite-radio-button value="trees" disabled id="trees" name="Options"></calcite-radio-button>
+          Trees
+        </calcite-label>
+        <calcite-label layout="inline">
+          <calcite-radio-button value="shrubs" id="shrubs" name="Options"></calcite-radio-button>
+          Shrubs
+        </calcite-label>
+        <calcite-label layout="inline">
+          <calcite-radio-button value="flowers" id="flowers" name="Options"></calcite-radio-button>
+          Flowers
+        </calcite-label>
+        <calcite-button id="submit">submit</calcite-button>
+      </div>
+    `);
+    const container = await page.find("div");
+    await container.press("Tab");
+    await page.waitForChanges();
+    expect(await getFocusedElementProp(page, "id")).toBe("shrubs");
+    await container.press("Tab");
+    expect(await getFocusedElementProp(page, "id")).toBe("submit");
+  });
+
+  it("focuses checked item on Tab", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <div>
+        <calcite-label layout="inline">
+          <calcite-radio-button value="trees" disabled id="trees" name="Options"></calcite-radio-button>
+          Trees
+        </calcite-label>
+        <calcite-label layout="inline">
+          <calcite-radio-button value="shrubs" id="shrubs" name="Options"></calcite-radio-button>
+          Shrubs
+        </calcite-label>
+        <calcite-label layout="inline">
+          <calcite-radio-button value="flowers" id="flowers" checked name="Options"></calcite-radio-button>
+          Flowers
+        </calcite-label>
+        <calcite-button id="submit">submit</calcite-button>
+      </div>
+    `);
+    const container = await page.find("div");
+    await container.press("Tab");
+    await page.waitForChanges();
+    expect(await getFocusedElementProp(page, "id")).toBe("flowers");
+    await container.press("Tab");
+    expect(await getFocusedElementProp(page, "id")).toBe("submit");
+  });
 });

packages/calcite-components/src/components/radio-button/radio-button.tsx

@@ -3,6 +3,7 @@ import {
   Element,
   Event,
   EventEmitter,
+  forceUpdate,
   h,
   Host,
   Listen,
@@ -179,9 +180,11 @@ export class RadioButton
     ) as HTMLCalciteRadioButtonElement[];
   };
 
-  isDefaultSelectable = (): boolean => {
+  isFocusable = (): boolean => {
     const radioButtons = this.queryButtons();
-    return !radioButtons.some((radioButton) => radioButton.checked) && radioButtons[0] === this.el;
+    const firstFocusable = radioButtons.find((radiobutton) => !radiobutton.disabled);
+    const checked = radioButtons.find((radiobutton) => radiobutton.checked);
+    return firstFocusable === this.el && !checked;
   };
 
   check = (): void => {
@@ -271,11 +274,26 @@ export class RadioButton
     });
   }
 
+  private updateTabIndexOfOtherRadioButtonsInGroup(): void {
+    const radioButtons = this.queryButtons();
+    const otherFocusableRadioButtons = radioButtons.filter(
+      (radioButton) => radioButton.guid !== this.guid && !radioButton.disabled
+    );
+    otherFocusableRadioButtons.forEach((radiobutton) => {
+      forceUpdate(radiobutton);
+    });
+  }
+
   private getTabIndex(): number | undefined {
     if (this.disabled) {
       return undefined;
     }
-    return this.checked || this.isDefaultSelectable() ? 0 : -1;
+    if (this.checked || this.isFocusable()) {
+      this.updateTabIndexOfOtherRadioButtonsInGroup();
+      return 0;
+    } else {
+      return -1;
+    }
   }
 
   //--------------------------------------------------------------------------