From 3585474e34fd595c29432febced10cdd9e73f6db Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 26 May 2023 18:00:15 -0500 Subject: [PATCH 01/12] fix(radio-group): user can select text in radio group --- src/components/radio-button-group/radio-button-group.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/radio-button-group/radio-button-group.tsx b/src/components/radio-button-group/radio-button-group.tsx index 0bac67fa7bd..abeaf71fed6 100644 --- a/src/components/radio-button-group/radio-button-group.tsx +++ b/src/components/radio-button-group/radio-button-group.tsx @@ -19,9 +19,7 @@ import { Layout, Scale } from "../interfaces"; @Component({ tag: "calcite-radio-button-group", styleUrl: "radio-button-group.scss", - shadow: { - delegatesFocus: true - } + shadow: true }) export class RadioButtonGroup { //-------------------------------------------------------------------------- From f70b1a10377d7ed076259544f3186d414d5cf70c Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 31 May 2023 18:19:54 -0500 Subject: [PATCH 02/12] add setFocus for radio button group --- .../radio-button-group.e2e.ts | 18 ++++++- .../radio-button-group/radio-button-group.tsx | 52 ++++++++++++++++++- 2 files changed, 68 insertions(+), 2 deletions(-) diff --git a/src/components/radio-button-group/radio-button-group.e2e.ts b/src/components/radio-button-group/radio-button-group.e2e.ts index d911653cac1..e931c9342bb 100644 --- a/src/components/radio-button-group/radio-button-group.e2e.ts +++ b/src/components/radio-button-group/radio-button-group.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests"; +import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; describe("calcite-radio-button-group", () => { @@ -20,6 +20,22 @@ describe("calcite-radio-button-group", () => { ]); }); + describe("is focusable", () => { + focusable( + html` + + + Flowers + + + + Trees + + `, + { focusTargetSelector: "calcite-radio-button" } + ); + }); + describe("honors hidden attribute", () => { hidden("calcite-radio-button"); diff --git a/src/components/radio-button-group/radio-button-group.tsx b/src/components/radio-button-group/radio-button-group.tsx index abeaf71fed6..70c75271dc8 100644 --- a/src/components/radio-button-group/radio-button-group.tsx +++ b/src/components/radio-button-group/radio-button-group.tsx @@ -6,12 +6,20 @@ import { h, Host, Listen, + Method, Prop, + State, VNode, Watch } from "@stencil/core"; import { createObserver } from "../../utils/observers"; import { Layout, Scale } from "../interfaces"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; /** * @slot - A slot for adding `calcite-radio-button`s. @@ -21,7 +29,7 @@ import { Layout, Scale } from "../interfaces"; styleUrl: "radio-button-group.scss", shadow: true }) -export class RadioButtonGroup { +export class RadioButtonGroup implements LoadableComponent { //-------------------------------------------------------------------------- // // Element @@ -89,6 +97,8 @@ export class RadioButtonGroup { mutationObserver = createObserver("mutation", () => this.passPropsToRadioButtons()); + @State() radioButtons: HTMLCalciteRadioButtonElement[] = []; + //-------------------------------------------------------------------------- // // Lifecycle @@ -100,6 +110,14 @@ export class RadioButtonGroup { this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); } + componentWillLoad(): void { + setUpLoadableComponent(this); + } + + componentDidLoad(): void { + setComponentLoaded(this); + } + disconnectedCallback(): void { this.mutationObserver?.disconnect(); } @@ -115,6 +133,7 @@ export class RadioButtonGroup { this.selectedItem = Array.from(radioButtons).find((radioButton) => radioButton.checked) || null; if (radioButtons.length > 0) { radioButtons.forEach((radioButton) => { + this.radioButtons.push(radioButton); radioButton.disabled = this.disabled || radioButton.disabled; radioButton.hidden = this.hidden; radioButton.name = this.name; @@ -124,6 +143,16 @@ export class RadioButtonGroup { } }; + getFocusableRadioButton(): HTMLCalciteRadioButtonElement | null { + let index = 0; + let focusableEle = this.radioButtons[index]; + while (index < this.radioButtons.length && focusableEle.disabled) { + index++; + focusableEle = this.radioButtons[index]; + } + return focusableEle.disabled ? null : focusableEle; + } + //-------------------------------------------------------------------------- // // Events @@ -135,6 +164,27 @@ export class RadioButtonGroup { */ @Event({ cancelable: false }) calciteRadioButtonGroupChange: EventEmitter; + //-------------------------------------------------------------------------- + // + // Public Method + // + //-------------------------------------------------------------------------- + + /** Sets focus on the fist focusable `calcite-radio-button` element in the component. */ + @Method() + async setFocus(): Promise { + await componentLoaded(this); + if (this.selectedItem && !this.selectedItem.disabled) { + this.selectedItem.setFocus(); + return; + } + + const focusableRadioButton = this.getFocusableRadioButton(); + if (this.radioButtons.length > 0 && focusableRadioButton !== null) { + focusableRadioButton.setFocus(); + } + } + //-------------------------------------------------------------------------- // // Event Listeners From b15ff52ef4274b432fd9db36f8edc41f05035adb Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 1 Jun 2023 12:55:15 -0500 Subject: [PATCH 03/12] simplify logic --- .../radio-button-group/radio-button-group.tsx | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/src/components/radio-button-group/radio-button-group.tsx b/src/components/radio-button-group/radio-button-group.tsx index 70c75271dc8..1e39d6df008 100644 --- a/src/components/radio-button-group/radio-button-group.tsx +++ b/src/components/radio-button-group/radio-button-group.tsx @@ -129,11 +129,11 @@ export class RadioButtonGroup implements LoadableComponent { //-------------------------------------------------------------------------- private passPropsToRadioButtons = (): void => { - const radioButtons = this.el.querySelectorAll("calcite-radio-button"); - this.selectedItem = Array.from(radioButtons).find((radioButton) => radioButton.checked) || null; - if (radioButtons.length > 0) { - radioButtons.forEach((radioButton) => { - this.radioButtons.push(radioButton); + this.radioButtons = Array.from(this.el.querySelectorAll("calcite-radio-button")); + this.selectedItem = + Array.from(this.radioButtons).find((radioButton) => radioButton.checked) || null; + if (this.radioButtons.length > 0) { + this.radioButtons.forEach((radioButton) => { radioButton.disabled = this.disabled || radioButton.disabled; radioButton.hidden = this.hidden; radioButton.name = this.name; @@ -146,11 +146,15 @@ export class RadioButtonGroup implements LoadableComponent { getFocusableRadioButton(): HTMLCalciteRadioButtonElement | null { let index = 0; let focusableEle = this.radioButtons[index]; - while (index < this.radioButtons.length && focusableEle.disabled) { + while (focusableEle.disabled) { index++; - focusableEle = this.radioButtons[index]; + if (index < this.radioButtons.length) { + focusableEle = this.radioButtons[index]; + } else { + return null; + } } - return focusableEle.disabled ? null : focusableEle; + return focusableEle; } //-------------------------------------------------------------------------- @@ -179,9 +183,9 @@ export class RadioButtonGroup implements LoadableComponent { return; } - const focusableRadioButton = this.getFocusableRadioButton(); - if (this.radioButtons.length > 0 && focusableRadioButton !== null) { - focusableRadioButton.setFocus(); + if (this.radioButtons.length > 0) { + const focusableRadioButton = this.getFocusableRadioButton(); + focusableRadioButton !== null && focusableRadioButton.setFocus(); } } From 2753186f6e2748d37d1ca72bc1306f3fc67df8a4 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 1 Jun 2023 14:23:46 -0500 Subject: [PATCH 04/12] remove white space --- src/components/radio-button-group/radio-button-group.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/radio-button-group/radio-button-group.tsx b/src/components/radio-button-group/radio-button-group.tsx index 1e39d6df008..f121af78387 100644 --- a/src/components/radio-button-group/radio-button-group.tsx +++ b/src/components/radio-button-group/radio-button-group.tsx @@ -182,7 +182,6 @@ export class RadioButtonGroup implements LoadableComponent { this.selectedItem.setFocus(); return; } - if (this.radioButtons.length > 0) { const focusableRadioButton = this.getFocusableRadioButton(); focusableRadioButton !== null && focusableRadioButton.setFocus(); From 4b5ca375e4ce134a4dcbb999c1260a7c540a99e4 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 1 Jun 2023 15:01:12 -0500 Subject: [PATCH 05/12] add more e2e tests --- .../radio-button-group.e2e.ts | 49 +++++++++++++++++++ .../radio-button-group/radio-button-group.tsx | 2 +- 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/src/components/radio-button-group/radio-button-group.e2e.ts b/src/components/radio-button-group/radio-button-group.e2e.ts index e931c9342bb..87628774f91 100644 --- a/src/components/radio-button-group/radio-button-group.e2e.ts +++ b/src/components/radio-button-group/radio-button-group.e2e.ts @@ -1,6 +1,7 @@ import { newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { getFocusedElementProp } from "../../tests/utils"; describe("calcite-radio-button-group", () => { describe("renders", () => { @@ -468,4 +469,52 @@ describe("calcite-radio-button-group", () => { expect(changeEvent).toHaveReceivedEventTimes(3); expect(await getSelectedItemValue()).toBe("three"); }); + + it("should focus the checked radio-button on setFocus()", async () => { + const page = await newE2EPage(); + await page.setContent(html` + + + + Trees + + + + Shrubs + + + + Flowers + + + `); + const group = await page.find("calcite-radio-button-group"); + await group.callMethod("setFocus"); + await page.waitForChanges(); + expect(await getFocusedElementProp(page, "id")).toBe("flowers"); + }); + + it("should focus the first focusable radio-button on setFocus()", async () => { + const page = await newE2EPage(); + await page.setContent(html` + + + + Trees + + + + Shrubs + + + + Flowers + + + `); + const group = await page.find("calcite-radio-button-group"); + await group.callMethod("setFocus"); + await page.waitForChanges(); + expect(await getFocusedElementProp(page, "id")).toBe("shrubs"); + }); }); diff --git a/src/components/radio-button-group/radio-button-group.tsx b/src/components/radio-button-group/radio-button-group.tsx index f121af78387..dee93d769e5 100644 --- a/src/components/radio-button-group/radio-button-group.tsx +++ b/src/components/radio-button-group/radio-button-group.tsx @@ -143,7 +143,7 @@ export class RadioButtonGroup implements LoadableComponent { } }; - getFocusableRadioButton(): HTMLCalciteRadioButtonElement | null { + private getFocusableRadioButton(): HTMLCalciteRadioButtonElement | null { let index = 0; let focusableEle = this.radioButtons[index]; while (focusableEle.disabled) { From 082cb9c7d643cd7bfa76bdd35c7a43ce525ac415 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 1 Jun 2023 17:26:22 -0500 Subject: [PATCH 06/12] clean up --- src/components/radio-button-group/radio-button-group.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/radio-button-group/radio-button-group.tsx b/src/components/radio-button-group/radio-button-group.tsx index dee93d769e5..453e3cd9b7b 100644 --- a/src/components/radio-button-group/radio-button-group.tsx +++ b/src/components/radio-button-group/radio-button-group.tsx @@ -183,8 +183,7 @@ export class RadioButtonGroup implements LoadableComponent { return; } if (this.radioButtons.length > 0) { - const focusableRadioButton = this.getFocusableRadioButton(); - focusableRadioButton !== null && focusableRadioButton.setFocus(); + this.getFocusableRadioButton()?.setFocus(); } } From c389f18b27ff6cd78a94fc70d4521910196be760 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 2 Jun 2023 15:22:43 -0500 Subject: [PATCH 07/12] focus first focusable item on tab --- src/components/radio-button/radio-button.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx index f91f42fa86d..825a5fbdec2 100644 --- a/src/components/radio-button/radio-button.tsx +++ b/src/components/radio-button/radio-button.tsx @@ -179,9 +179,12 @@ export class RadioButton ) as HTMLCalciteRadioButtonElement[]; }; - isDefaultSelectable = (): boolean => { + isFocusable = (): boolean => { const radioButtons = this.queryButtons(); - return !radioButtons.some((radioButton) => radioButton.checked) && radioButtons[0] === this.el; + return ( + !radioButtons.some((radioButton) => radioButton.checked) && + !radioButtons.some((radioButton) => radioButton.tabIndex === 0) + ); }; check = (): void => { @@ -275,7 +278,7 @@ export class RadioButton if (this.disabled) { return undefined; } - return this.checked || this.isDefaultSelectable() ? 0 : -1; + return this.checked || this.isFocusable() ? 0 : -1; } //-------------------------------------------------------------------------- From cffff6d326feb323760efeccc257b6ac343f5eb1 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Mon, 5 Jun 2023 11:14:32 -0500 Subject: [PATCH 08/12] update focus algorithm --- src/components/radio-button/radio-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx index 825a5fbdec2..a315263625e 100644 --- a/src/components/radio-button/radio-button.tsx +++ b/src/components/radio-button/radio-button.tsx @@ -183,7 +183,7 @@ export class RadioButton const radioButtons = this.queryButtons(); return ( !radioButtons.some((radioButton) => radioButton.checked) && - !radioButtons.some((radioButton) => radioButton.tabIndex === 0) + (radioButtons[0] === this.el || radioButtons[0].disabled) ); }; From f7f25d711ac5dc57bec7c940e0f91224ff34f676 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Mon, 5 Jun 2023 13:03:03 -0500 Subject: [PATCH 09/12] fix test error --- .../src/components/radio-button/radio-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx index a315263625e..ab1ab76665e 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.tsx +++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx @@ -183,7 +183,7 @@ export class RadioButton const radioButtons = this.queryButtons(); return ( !radioButtons.some((radioButton) => radioButton.checked) && - (radioButtons[0] === this.el || radioButtons[0].disabled) + (radioButtons[0] === this.el || radioButtons[0]?.disabled) ); }; From 55c201842edc68498a6872950b518c6ec4dd4907 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Mon, 5 Jun 2023 18:13:32 -0500 Subject: [PATCH 10/12] cleanup --- .../radio-button-group/radio-button-group.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx index 453e3cd9b7b..0aa00e713dc 100644 --- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx +++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx @@ -144,17 +144,8 @@ export class RadioButtonGroup implements LoadableComponent { }; private getFocusableRadioButton(): HTMLCalciteRadioButtonElement | null { - let index = 0; - let focusableEle = this.radioButtons[index]; - while (focusableEle.disabled) { - index++; - if (index < this.radioButtons.length) { - focusableEle = this.radioButtons[index]; - } else { - return null; - } - } - return focusableEle; + const index = this.radioButtons.findIndex((radiobutton) => !radiobutton.disabled); + return index >= 0 ? this.radioButtons[index] : null; } //-------------------------------------------------------------------------- From 0510a882d64119a0c1a1631640eb92e5eb59931b Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 6 Jun 2023 18:17:23 -0500 Subject: [PATCH 11/12] refactor --- .../radio-button-group/radio-button-group.tsx | 3 +- .../radio-button/radio-button.e2e.ts | 56 +++++++++++++++++++ .../components/radio-button/radio-button.tsx | 23 ++++++-- 3 files changed, 74 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx index 0aa00e713dc..9c5b6bc6f35 100644 --- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx +++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx @@ -144,8 +144,7 @@ export class RadioButtonGroup implements LoadableComponent { }; private getFocusableRadioButton(): HTMLCalciteRadioButtonElement | null { - const index = this.radioButtons.findIndex((radiobutton) => !radiobutton.disabled); - return index >= 0 ? this.radioButtons[index] : null; + return this.radioButtons.find((radiobutton) => !radiobutton.disabled) ?? null; } //-------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts index d71b8e85ffa..e66dc995b8b 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts +++ b/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` + + + + Trees + + + + Shrubs + + + + Flowers + + + submit + `); + const group = await page.find("calcite-radio-button-group"); + await group.press("Tab"); + await page.waitForChanges(); + expect(await getFocusedElementProp(page, "id")).toBe("shrubs"); + await group.press("Tab"); + expect(await getFocusedElementProp(page, "id")).toBe("submit"); + }); + + it("focuses checked item on Tab", async () => { + const page = await newE2EPage(); + await page.setContent(html` + + + + Trees + + + + Shrubs + + + + Flowers + + + submit + `); + const group = await page.find("calcite-radio-button-group"); + await group.press("Tab"); + await page.waitForChanges(); + expect(await getFocusedElementProp(page, "id")).toBe("flowers"); + await group.press("Tab"); + expect(await getFocusedElementProp(page, "id")).toBe("submit"); + }); }); diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx index ab1ab76665e..690edb7b79e 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.tsx +++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx @@ -171,6 +171,7 @@ export class RadioButton selectItem = (items: HTMLCalciteRadioButtonElement[], selectedIndex: number): void => { items[selectedIndex].click(); + items[selectedIndex].focused = true; }; queryButtons = (): HTMLCalciteRadioButtonElement[] => { @@ -181,16 +182,16 @@ export class RadioButton isFocusable = (): boolean => { const radioButtons = this.queryButtons(); - return ( - !radioButtons.some((radioButton) => radioButton.checked) && - (radioButtons[0] === this.el || radioButtons[0]?.disabled) - ); + const firstFocusable = radioButtons.find((radiobutton) => !radiobutton.disabled); + const checked = radioButtons.find((radiobutton) => radiobutton.checked); + return firstFocusable === this.el && !checked; }; check = (): void => { if (this.disabled) { return; } + this.el.tabIndex = 0; this.uncheckAllRadioButtonsInGroup(); this.checked = true; this.focused = true; @@ -202,7 +203,6 @@ export class RadioButton if (this.disabled) { return; } - this.check(); }; @@ -274,11 +274,22 @@ export class RadioButton }); } + private updateTabIndexOfOtherRadioButtonsInGroup(): void { + const radioButtons = this.queryButtons(); + const otherRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid); + otherRadioButtons.forEach((radiobutton) => (radiobutton.tabIndex = -1)); + } + private getTabIndex(): number | undefined { if (this.disabled) { return undefined; } - return this.checked || this.isFocusable() ? 0 : -1; + if (this.checked || this.isFocusable()) { + this.updateTabIndexOfOtherRadioButtonsInGroup(); + return 0; + } else { + return -1; + } } //-------------------------------------------------------------------------- From 2a0cc427baec79a6e07e6112d4f8947b410a9bef Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 7 Jun 2023 10:48:53 -0500 Subject: [PATCH 12/12] revert changes to radio-button --- .../radio-button/radio-button.e2e.ts | 56 ------------------- .../components/radio-button/radio-button.tsx | 22 ++------ 2 files changed, 4 insertions(+), 74 deletions(-) diff --git a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts index e66dc995b8b..d71b8e85ffa 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts +++ b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts @@ -10,8 +10,6 @@ import { reflects, renders } from "../../tests/commonTests"; -import { html } from "../../../support/formatting"; -import { getFocusedElementProp } from "../../tests/utils"; describe("calcite-radio-button", () => { describe("renders", () => { @@ -454,58 +452,4 @@ 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` - - - - Trees - - - - Shrubs - - - - Flowers - - - submit - `); - const group = await page.find("calcite-radio-button-group"); - await group.press("Tab"); - await page.waitForChanges(); - expect(await getFocusedElementProp(page, "id")).toBe("shrubs"); - await group.press("Tab"); - expect(await getFocusedElementProp(page, "id")).toBe("submit"); - }); - - it("focuses checked item on Tab", async () => { - const page = await newE2EPage(); - await page.setContent(html` - - - - Trees - - - - Shrubs - - - - Flowers - - - submit - `); - const group = await page.find("calcite-radio-button-group"); - await group.press("Tab"); - await page.waitForChanges(); - expect(await getFocusedElementProp(page, "id")).toBe("flowers"); - await group.press("Tab"); - expect(await getFocusedElementProp(page, "id")).toBe("submit"); - }); }); diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx index 690edb7b79e..f91f42fa86d 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.tsx +++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx @@ -171,7 +171,6 @@ export class RadioButton selectItem = (items: HTMLCalciteRadioButtonElement[], selectedIndex: number): void => { items[selectedIndex].click(); - items[selectedIndex].focused = true; }; queryButtons = (): HTMLCalciteRadioButtonElement[] => { @@ -180,18 +179,15 @@ export class RadioButton ) as HTMLCalciteRadioButtonElement[]; }; - isFocusable = (): boolean => { + isDefaultSelectable = (): boolean => { const radioButtons = this.queryButtons(); - const firstFocusable = radioButtons.find((radiobutton) => !radiobutton.disabled); - const checked = radioButtons.find((radiobutton) => radiobutton.checked); - return firstFocusable === this.el && !checked; + return !radioButtons.some((radioButton) => radioButton.checked) && radioButtons[0] === this.el; }; check = (): void => { if (this.disabled) { return; } - this.el.tabIndex = 0; this.uncheckAllRadioButtonsInGroup(); this.checked = true; this.focused = true; @@ -203,6 +199,7 @@ export class RadioButton if (this.disabled) { return; } + this.check(); }; @@ -274,22 +271,11 @@ export class RadioButton }); } - private updateTabIndexOfOtherRadioButtonsInGroup(): void { - const radioButtons = this.queryButtons(); - const otherRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid); - otherRadioButtons.forEach((radiobutton) => (radiobutton.tabIndex = -1)); - } - private getTabIndex(): number | undefined { if (this.disabled) { return undefined; } - if (this.checked || this.isFocusable()) { - this.updateTabIndexOfOtherRadioButtonsInGroup(); - return 0; - } else { - return -1; - } + return this.checked || this.isDefaultSelectable() ? 0 : -1; } //--------------------------------------------------------------------------