diff --git a/src/components/radio-group/bl-radio-group.test.ts b/src/components/radio-group/bl-radio-group.test.ts index 7656eb36..0a250127 100644 --- a/src/components/radio-group/bl-radio-group.test.ts +++ b/src/components/radio-group/bl-radio-group.test.ts @@ -259,4 +259,65 @@ describe("bl-radio-group", () => { //then expect(document.activeElement).to.equal(radioGroup?.options[0]); }); + + it("should wrap to first option when navigating past last option with arrow right", async () => { + //when + const el = await fixture( + html`
+ + Credit Card + Cash +
` + ); + + await elementUpdated(el); + + el.querySelector("#previnput")?.focus(); + + const radioGroup = el.querySelector("bl-radio-group"); + + //given + await sendKeys({ + press: "Tab", + }); + await sendKeys({ + press: "ArrowRight", + }); + await sendKeys({ + press: "ArrowRight", + }); + + //then + expect(document.activeElement).to.equal(radioGroup?.options[0]); + }); + + it("should wrap to last option when navigating before first option with arrow left", async () => { + //when + const el = await fixture( + html`
+ + Credit Card + Cash +
` + ); + + await elementUpdated(el); + + el.querySelector("#previnput")?.focus(); + + const radioGroup = el.querySelector("bl-radio-group"); + + //given + await sendKeys({ + press: "Tab", + }); + await sendKeys({ + press: "ArrowLeft", + }); + + //then + expect(document.activeElement).to.equal(radioGroup?.options[1]); + }); }); diff --git a/src/components/radio-group/bl-radio-group.ts b/src/components/radio-group/bl-radio-group.ts index 839edff4..ac5da598 100644 --- a/src/components/radio-group/bl-radio-group.ts +++ b/src/components/radio-group/bl-radio-group.ts @@ -76,10 +76,18 @@ export default class BlRadioGroup extends FormControlMixin(LitElement) { // Next option if (["ArrowDown", "ArrowRight"].includes(event.key)) { this.focusedOptionIndex++; + if (this.focusedOptionIndex >= this.availableOptions.length) { + this.focusedOptionIndex = 0; // Wrap around to the first option + } + this.availableOptions[this.focusedOptionIndex].select(); // Previous option } else if (["ArrowUp", "ArrowLeft"].includes(event.key)) { this.focusedOptionIndex--; + if (this.focusedOptionIndex < 0) { + this.focusedOptionIndex = this.availableOptions.length - 1; // Wrap around to the last option + } + this.availableOptions[this.focusedOptionIndex].select(); // Select option } else if ([" "].includes(event.key)) { @@ -90,17 +98,10 @@ export default class BlRadioGroup extends FormControlMixin(LitElement) { return; } - // Don't exceed array indexes - this.focusedOptionIndex = Math.max( - 0, - Math.min(this.focusedOptionIndex, this.availableOptions.length - 1) - ); - this.availableOptions[this.focusedOptionIndex].focus(); event.preventDefault(); } - connectedCallback(): void { super.connectedCallback(); diff --git a/src/components/radio-group/radio/bl-radio.test.ts b/src/components/radio-group/radio/bl-radio.test.ts index fc1afef1..54c4ca1b 100644 --- a/src/components/radio-group/radio/bl-radio.test.ts +++ b/src/components/radio-group/radio/bl-radio.test.ts @@ -19,7 +19,7 @@ describe("bl-radio", () => { `