From 3c65a6caed4da32868c8a667268ba07445f51109 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Oest=20Balmer?= <oestbalmer@gmail.com>
Date: Thu, 27 Feb 2025 13:43:22 +0100
Subject: [PATCH] Forward aria label from Kirby radio group to Ion radio group

---
 .../radio-group/radio-group.component.html    |  1 +
 .../radio-group/radio-group.component.spec.ts | 25 +++++++++++++++++++
 .../src/radio-group/radio-group.component.ts  | 10 +++++++-
 3 files changed, 35 insertions(+), 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
index 21a9b34286..97ab820fff 100644
--- 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
index f98518133d..8929aa84cd 100644
--- 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
index 900acf3c73..32276fdbcc 100644
--- 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 {