Forward aria label from Kirby radio group to Ion radio group

kirbydesign · Feb 27, 2025 · 3c65a6c · 3c65a6c
1 parent 9eb0fb1
commit 3c65a6c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/libs/designsystem/radio/src/radio-group/radio-group.component.html b/libs/designsystem/radio/src/radio-group/radio-group.component.html
@@ -3,6 +3,7 @@
   [value]="value"
   (ionChange)="_onChange($event.detail.value)"
   [attr.aria-invalid]="hasError"
+  [attr.aria-label]="_ariaLabel"
 >
   <ng-container *ngIf="!items || !items.length; else itemsTemplate">
     <ng-content></ng-content>

diff --git a/libs/designsystem/radio/src/radio-group/radio-group.component.spec.ts b/libs/designsystem/radio/src/radio-group/radio-group.component.spec.ts
@@ -739,6 +739,31 @@ describe('RadioGroupComponent', () => {
     });
   });
 
+  describe('aria attributes', () => {
+    let spectator: SpectatorHost<
+      RadioGroupComponent,
+      {
+        items: string[];
+      }
+    >;
+    let ionRadioGroupElement: HTMLIonRadioGroupElement;
+
+    beforeEach(async () => {
+      spectator = createHost(
+        `<kirby-radio-group aria-label="aria-test" [items]="['Bacon', 'Salami', 'Tenderloin']">
+        </kirby-radio-group>`,
+        {}
+      );
+
+      ionRadioGroupElement = spectator.query('ion-radio-group');
+      await TestHelper.whenReady(ionRadioGroupElement);
+    });
+    it('should set aria-label attribute on ion-radio-group', () => {
+      expect(ionRadioGroupElement.getAttribute('aria-label')).toEqual('aria-test');
+      expect(spectator.element.getAttribute('aria-label')).toBeNull();
+    });
+  });
+
   describe('implementing ControlValueAccessor interface', () => {
     const items = ['Bacon', 'Sausage', 'Onion'];
     const defaultSelectedIndex = 1;

diff --git a/libs/designsystem/radio/src/radio-group/radio-group.component.ts b/libs/designsystem/radio/src/radio-group/radio-group.component.ts
@@ -4,6 +4,7 @@ import {
   ChangeDetectorRef,
   ContentChild,
   ContentChildren,
+  ElementRef,
   EventEmitter,
   HostBinding,
   Output,
@@ -16,6 +17,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';
 import { FormFieldControl } from '@kirbydesign/designsystem/types';
 
+import { inheritAriaLabelText } from '@kirbydesign/designsystem/shared';
 import { RadioComponent } from '../radio.component';
 
 @Component({
@@ -35,10 +37,15 @@ import { RadioComponent } from '../radio.component';
 export class RadioGroupComponent
   implements AfterContentInit, ControlValueAccessor, FormFieldControl
 {
-  constructor(private changeDetectionRef: ChangeDetectorRef) {}
+  constructor(
+    private changeDetectionRef: ChangeDetectorRef,
+    private element: ElementRef<HTMLElement>
+  ) {}
 
   // #region public properties
 
+  _ariaLabel: string;
+
   get disabled(): boolean {
     return this._disabled;
   }
@@ -150,6 +157,7 @@ export class RadioGroupComponent
   ngAfterContentInit(): void {
     this.initSelectionStateFromProjectedContent();
     this.listenForProjectedRadiosChange();
+    this._ariaLabel = inheritAriaLabelText(this.element.nativeElement);
   }
 
   registerOnChange(fn: any): void {