From cbab621b9a4528e19c2e54de24fa21e1df99d247 Mon Sep 17 00:00:00 2001
From: Askholm88 <49338157+Askholm88@users.noreply.github.com>
Date: Wed, 29 Jan 2025 13:46:14 +0100
Subject: [PATCH] Image Banner: add option for aria-label for image banner
 dismiss button (#3771)

---
 .../angular/image-banner/src/image-banner.component.html   | 1 +
 .../angular/image-banner/src/image-banner.component.ts     | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/libs/extensions/angular/image-banner/src/image-banner.component.html b/libs/extensions/angular/image-banner/src/image-banner.component.html
index a358192ecd..4e9f5cb2bf 100644
--- a/libs/extensions/angular/image-banner/src/image-banner.component.html
+++ b/libs/extensions/angular/image-banner/src/image-banner.component.html
@@ -85,6 +85,7 @@
       [attentionLevel]="backgroundBlur === 'none' ? '3' : '2'"
       [showIconOnly]="true"
       size="xs"
+      [attr.aria-label]="translations.get('close') + ' ' + title"
     >
       <kirby-icon name="close"></kirby-icon>
     </button>
diff --git a/libs/extensions/angular/image-banner/src/image-banner.component.ts b/libs/extensions/angular/image-banner/src/image-banner.component.ts
index 1721aed232..7d577b77fe 100644
--- a/libs/extensions/angular/image-banner/src/image-banner.component.ts
+++ b/libs/extensions/angular/image-banner/src/image-banner.component.ts
@@ -1,12 +1,13 @@
-import { CommonModule, NgClass } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
 import { CardModule } from '@kirbydesign/designsystem/card';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
 import { IconModule } from '@kirbydesign/designsystem/icon';
+import { TranslationService } from '@kirbydesign/designsystem/shared';
 
 @Component({
   selector: 'kirby-x-image-banner',
-  imports: [CardModule, ButtonComponent, IconModule, NgClass, CommonModule],
+  imports: [CardModule, ButtonComponent, IconModule, CommonModule],
   templateUrl: './image-banner.component.html',
   styleUrl: './image-banner.component.scss',
 })
@@ -53,6 +54,8 @@ export class ImageBannerComponent {
    */
   @Output() dismissClick = new EventEmitter<Event>();
 
+  constructor(public translations: TranslationService) {}
+
   public bannerClicked(event: Event) {
     const eventTarget = event.target as HTMLElement;
     const dismissButtonClicked = eventTarget.closest('.dismiss');