Merge pull request #951 from mryunt02/feat/radio-a11y

feat(radio, radio-group): Enhance accessibility with arrow key navigation and aria attributes
Trendyol · Mar 10, 2025 · 78beaed · 78beaed
2 parents 16590a9 + d778a5b
commit 78beaed
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 9 deletions.
diff --git 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`<div>
+        <input id="previnput" /><bl-radio-group label="Payment Type" name="pt" value="cc">
+          <bl-radio value="cc">Credit Card</bl-radio>
+          <bl-radio value="ch">Cash</bl-radio> </bl-radio-group
+        ><input id="nextinput" />
+      </div>`
+    );
+
+    await elementUpdated(el);
+
+    el.querySelector<HTMLInputElement>("#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`<div>
+        <input id="previnput" /><bl-radio-group label="Payment Type" name="pt" value="cc">
+          <bl-radio value="cc">Credit Card</bl-radio>
+          <bl-radio value="ch">Cash</bl-radio> </bl-radio-group
+        ><input id="nextinput" />
+      </div>`
+    );
+
+    await elementUpdated(el);
+
+    el.querySelector<HTMLInputElement>("#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
@@ -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
@@ -19,7 +19,7 @@ describe("bl-radio", () => {
       `<div
         aria-disabled="false"
         aria-labelledby="label"
-        aria-readonly="false"
+        aria-checked="false"
         class="wrapper"
         role="radio"
        >

diff --git 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}
     >