fix(core): add fd-shellbar action button title and aria-label (#11031)

SAP · Dec 1, 2023 · 664a780 · 664a780
1 parent fd8570c
commit 664a780
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/libs/core/src/lib/shellbar/shellbar-action/shellbar-action.component.html b/libs/core/src/lib/shellbar/shellbar-action/shellbar-action.component.html
@@ -4,6 +4,8 @@
         fdType="transparent"
         class="fd-shellbar__button"
         fdCozy
+        [attr.title]="title"
+        [ariaLabel]="ariaLabel"
         [glyph]="glyph"
         (click)="callback ? callback($event) : ''"
     >

diff --git a/libs/core/src/lib/shellbar/shellbar-action/shellbar-action.component.ts b/libs/core/src/lib/shellbar/shellbar-action/shellbar-action.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
 import { FD_SHELLBAR_ACTION_COMPONENT } from '../tokens';
+import { Nullable } from '@fundamental-ngx/cdk/utils';
 
 /**
  * The component that represents a shellbar action.
@@ -45,4 +46,12 @@ export class ShellbarActionComponent {
     /** Represents the number of notifications. */
     @Input()
     notificationCount: number;
+
+    /** title of the action button. */
+    @Input()
+    title: Nullable<string>;
+
+    /** aria-label of the action button */
+    @Input()
+    ariaLabel: Nullable<string>;
 }
diff --git a/libs/docs/core/shellbar/examples/shellbar-collapsible-example.component.html b/libs/docs/core/shellbar/examples/shellbar-collapsible-example.component.html
@@ -33,6 +33,8 @@
                 [label]="action.label"
                 [notificationCount]="action.notificationCount"
                 [notificationLabel]="action.notificationLabel"
+                [title]="action.title"
+                [ariaLabel]="!action.notificationCount ? action.ariaLabel : ''"
             ></fd-shellbar-action>
 
             <fd-product-switch>

diff --git a/libs/docs/core/shellbar/examples/shellbar-collapsible-example.component.ts b/libs/docs/core/shellbar/examples/shellbar-collapsible-example.component.ts
@@ -135,13 +135,17 @@ export class ShellbarCollapsibleExampleComponent {
             glyph: 'pool',
             callback: this.actionPoolCallback,
             label: 'Pool',
-            notificationCount: 3,
+            title: 'Pool',
+            ariaLabel: 'Pool',
+            notificationCount: 0,
             notificationLabel: 'Pool Count'
         },
         {
             glyph: 'bell',
             callback: this.actionNotificationCallback,
             label: 'Notifications',
+            title: 'Notifications',
+            ariaLabel: 'Notifications',
             notificationCount: 12,
             notificationLabel: 'Unread Notifications'
         }