feat(radio, radio-group): Enhance accessibility with arrow key navigation and aria attributes

src/components/dialog/bl-dialog.test.ts

@@ -100,6 +100,7 @@ describe("bl-dialog", () => {
             <header>
               <bl-button
                 icon="close"
+                label="close"
                 kind="neutral"
                 size="small"
                 variant="tertiary"

src/components/dialog/bl-dialog.ts

@@ -183,6 +183,7 @@ export default class BlDialog extends LitElement {
       ? html`<bl-button
           @click="${() => this.closeDialog("close-button")}"
           icon="close"
+          label="close"
           variant="tertiary"
           kind="neutral"
           size="small"

src/components/drawer/bl-drawer.test.ts

@@ -30,6 +30,7 @@ describe("bl-drawer", () => {
             <div class="header-buttons">
               <bl-button
                 icon="close"
+                label="close"
                 variant="tertiary"
                 size="small"
                 kind="neutral"
@@ -73,6 +74,7 @@ describe("bl-drawer", () => {
               ></bl-button>
               <bl-button
                 icon="close"
+                label="close"
                 variant="tertiary"
                 size="small"
                 kind="neutral"

src/components/drawer/bl-drawer.ts

@@ -166,6 +166,7 @@ export default class BlDrawer extends LitElement {
           <bl-button
             @click="${this.closeDrawer}"
             icon="close"
+            label="close"
             size="small"
             variant="tertiary"
             kind="neutral"

src/components/progress-indicator/bl-progress-indicator.test.ts

@@ -24,6 +24,7 @@ describe("bl-progress-indicator", () => {
       <div
       class="progress-indicator"
       role="progressbar"
+      aria-label="progress indicator"
       aria-valuemax="100"
       aria-valuenow="0"
     ></div>

src/components/progress-indicator/bl-progress-indicator.ts

@@ -70,6 +70,7 @@ export default class BlProgressIndicator extends LitElement {
     return html`<div
       class="progress-indicator"
       role="progressbar"
+      aria-label="progress indicator"
       aria-valuemax="${this._max}"
       aria-valuenow="${this._value}"
     ></div>`;

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();
 

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"
        >

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