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", () => {
`
diff --git a/src/components/radio-group/radio/bl-radio.ts b/src/components/radio-group/radio/bl-radio.ts
index 99d02e25..1c44c77d 100644
--- a/src/components/radio-group/radio/bl-radio.ts
+++ b/src/components/radio-group/radio/bl-radio.ts
@@ -121,7 +121,7 @@ export default class BlRadio extends LitElement {
role="radio"
aria-labelledby="label"
aria-disabled=${this.disabled}
- aria-readonly=${this.disabled}
+ aria-checked=${this.selected}
@blur=${this.blur}
@click=${this.select}
>