Image Banner: add option for aria-label for image banner dismiss butt…

…on (#3771)
kirbydesign · Jan 29, 2025 · cbab621 · cbab621
1 parent 31dc62d
commit cbab621
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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');