fix(core): translations for Notification component

libs/core/notification/notification-group-header/notification-group-header.component.ts

@@ -3,16 +3,18 @@ import {
     ChangeDetectionStrategy,
     Component,
     HostListener,
+    OnInit,
     ViewEncapsulation,
     computed,
     inject,
-    input,
     signal
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { KeyUtil, Nullable, RtlService } from '@fundamental-ngx/cdk/utils';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
 import { ContentDensityDirective } from '@fundamental-ngx/core/content-density';
 import { IconComponent } from '@fundamental-ngx/core/icon';
+import { FD_LANGUAGE, FdLanguage, TranslationResolver } from '@fundamental-ngx/i18n';
 import { NotificationGroupBaseDirective } from '../notification-utils/notification-group-base';
 import { FD_NOTIFICATION_GROUP_HEADER } from '../token';
 
@@ -45,12 +47,12 @@ import { FD_NOTIFICATION_GROUP_HEADER } from '../token';
         }
     ]
 })
-export class NotificationGroupHeaderComponent extends NotificationGroupBaseDirective {
+export class NotificationGroupHeaderComponent extends NotificationGroupBaseDirective implements OnInit {
     /**
      * Title for the group header
      * default value: "Expand/Collapse"
      */
-    title = input('Expand/Collapse');
+    title = signal<Nullable<string>>('');
 
     /**
      * id of the list element that the group header controls
@@ -69,6 +71,12 @@ export class NotificationGroupHeaderComponent extends NotificationGroupBaseDirec
     /** @hidden */
     private readonly _rtlService = inject(RtlService, { optional: true });
 
+    /** @hidden */
+    private readonly _lang$ = inject(FD_LANGUAGE);
+
+    /** @hidden */
+    private _translationResolver = new TranslationResolver();
+
     /** @hidden */
     @HostListener('keydown', ['$event'])
     keydownHandler(event: KeyboardEvent): void {
@@ -82,4 +90,11 @@ export class NotificationGroupHeaderComponent extends NotificationGroupBaseDirec
     toggleExpand(): void {
         this.expanded.update((expanded) => !expanded);
     }
+
+    /** @hidden */
+    ngOnInit(): void {
+        this._lang$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((lang: FdLanguage) => {
+            this.title.set(this._translationResolver.resolve(lang, 'coreNotification.groupHeaderTitle'));
+        });
+    }
 }

libs/core/notification/notification-group/notification-group.component.spec.ts

@@ -71,7 +71,7 @@ describe('NotificationGroupComponent', () => {
 
     it('should affect the aria-description when aria-expanded changes', () => {
         const attributeElement = fixture.debugElement.query(By.css('fd-notification-group'));
-        expect(attributeElement.nativeElement.getAttribute('aria-description')).toBe('Notification group expanded');
+        expect(attributeElement.nativeElement.getAttribute('aria-description')).toBe('Notification Group expanded');
     });
 
     it('should set aria-labelledby from fd-notification-group-header-title child element', () => {

libs/core/notification/notification-group/notification-group.component.ts

@@ -1,4 +1,17 @@
-import { AfterViewInit, Component, computed, contentChild, input } from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    DestroyRef,
+    OnInit,
+    computed,
+    contentChild,
+    inject,
+    input,
+    signal
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Nullable } from '@fundamental-ngx/cdk/utils';
+import { FD_LANGUAGE, FdLanguage, TranslationResolver } from '@fundamental-ngx/i18n';
 import { NotificationGroupHeaderTitleDirective } from '../directives/notification-group-header-title.directive';
 import { NotificationGroupHeaderComponent } from '../notification-group-header/notification-group-header.component';
 import { NotificationGroupListComponent } from '../notification-group-list/notification-group-list.component';
@@ -24,7 +37,7 @@ import { FD_NOTIFICATION_GROUP_HEADER, FD_NOTIFICATION_GROUP_HEADER_TITLE, FD_NO
         '[attr.aria-description]': 'ariaDescription()'
     }
 })
-export class NotificationGroupComponent implements AfterViewInit {
+export class NotificationGroupComponent implements OnInit, AfterViewInit {
     /**
      * Whether the group is expanded
      * default value is false
@@ -42,7 +55,10 @@ export class NotificationGroupComponent implements AfterViewInit {
 
     /** @hidden */
     readonly ariaDescription = computed(
-        () => `Notification group ${this.groupHeader()?.expanded() ? 'expanded' : 'collapsed'}`
+        () =>
+            `${this._descriptionString()} ${
+                this.groupHeader()?.expanded() ? this._expandedString() : this._collapsedString()
+            }`
     );
 
     /** @hidden */
@@ -57,9 +73,44 @@ export class NotificationGroupComponent implements AfterViewInit {
     /** @hidden */
     readonly groupList = contentChild<NotificationGroupListComponent>(FD_NOTIFICATION_GROUP_LIST);
 
+    /** @hidden */
+    private _descriptionString = signal<Nullable<string>>('');
+
+    /** @hidden */
+    private _expandedString = signal<Nullable<string>>('');
+
+    /** @hidden */
+    private _collapsedString = signal<Nullable<string>>('');
+
+    /** @hidden */
+    private readonly _destroyRef = inject(DestroyRef);
+
+    /** @hidden */
+    private readonly _lang$ = inject(FD_LANGUAGE);
+
+    /** @hidden */
+    private _translationResolver = new TranslationResolver();
+
     /** @hidden */
     ngAfterViewInit(): void {
         this.groupHeader()?.ariaControls.set(this.groupList()?.id());
         this.groupHeader()?.expanded.set(this.expanded());
     }
+
+    /** @hidden */
+    ngOnInit(): void {
+        this._lang$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((lang: FdLanguage) => {
+            this._expandedString.set(
+                this._translationResolver.resolve(lang, 'coreNotification.groupAriaDescriptionExpanded')
+            );
+
+            this._collapsedString.set(
+                this._translationResolver.resolve(lang, 'coreNotification.groupAriaDescriptionCollapsed')
+            );
+
+            this._descriptionString.set(
+                this._translationResolver.resolve(lang, 'coreNotification.groupAriaDescription')
+            );
+        });
+    }
 }

libs/core/notification/notification-utils/notification-group-base.ts

@@ -16,7 +16,7 @@ export abstract class NotificationGroupBaseDirective implements AfterViewInit {
     notificationActions: QueryList<NotificationActionsComponent>;
 
     /** @hidden */
-    private readonly _destroyRef = inject(DestroyRef);
+    protected readonly _destroyRef = inject(DestroyRef);
 
     /** @hidden */
     private readonly _renderer = inject(Renderer2);

libs/i18n/src/lib/models/fd-language-key-identifier.ts

@@ -466,4 +466,8 @@ export type FdLanguageKeyIdentifier =
     | 'btpSearchField.clearButtonLabel'
     | 'btpSearchField.searchInputPlaceholder'
     | 'btpSearchField.searchInputAriaLabel'
-    | 'btpToolHeader.menuButtonAriaLabel';
+    | 'btpToolHeader.menuButtonAriaLabel'
+    | 'coreNotification.groupHeaderTitle'
+    | 'coreNotification.groupAriaDescription'
+    | 'coreNotification.groupAriaDescriptionExpanded'
+    | 'coreNotification.groupAriaDescriptionCollapsed';

libs/i18n/src/lib/translations/translations.properties

@@ -926,3 +926,11 @@ btpSearchField.searchInputPlaceholder = Search
 btpSearchField.searchInputAriaLabel = Search
 #XACT Aria label for the menu button
 btpToolHeader.menuButtonAriaLabel = Menu button
+#XALT: Title for the Motification group header
+coreNotification.groupHeaderTitle = Expand/Collapse
+#XACT Aria description for Notification Group
+coreNotification.groupAriaDescription = Notification Group
+#XACT Aria description for Notification Group expanded state
+coreNotification.groupAriaDescriptionExpanded = expanded
+#XACT Aria description for Notification Group collapsed state
+coreNotification.groupAriaDescriptionCollapsed = collapsed

libs/i18n/src/lib/translations/translations.ts

@@ -573,5 +573,11 @@ export default {
     },
     btpToolHeader: {
         menuButtonAriaLabel: 'Menu button'
+    },
+    coreNotification: {
+        groupHeaderTitle: 'Expand/Collapse',
+        groupAriaDescription: 'Notification Group',
+        groupAriaDescriptionExpanded: 'expanded',
+        groupAriaDescriptionCollapsed: 'collapsed'
     }
 };