feat: page header accessibility improvements

libs/angular-accelerator/src/lib/components/page-header/page-header.component.html

@@ -58,12 +58,12 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
               class="action-button"
               [label]="action.labelKey ? (action.labelKey | translate) : action.label"
               (onClick)="action.actionCallback()"
-              [pTooltip]="(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)"
+              [pTooltip]="(action.titleKey ? (action.titleKey | translate) : action.title)"
               tooltipPosition="top"
               tooltipEvent="hover"
               [disabled]="action.disabled ? action.disabled : false"
               [attr.name]="action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'"
-              [attr.aria-label]="(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)"
+              [ariaLabel]=" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)"
             ></p-button>
           </ng-container>
         </div>
@@ -128,7 +128,7 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
               [pTooltip]="item.actionItemTooltip || ''"
               tooltipPosition="top"
               tooltipEvent="hover"
-              [ariaLabel]="item.actionItemTooltip || ''"
+              [ariaLabel]="(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''"
               (onClick)="item.actionItemCallback()"
             ></p-button>
           </span>

libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts

@@ -81,7 +81,8 @@ const demoActions: Action[] = [
       console.log(`you clicked 'Some action'`)
     },
     show: 'asOverflow',
-    icon: PrimeIcons.ADDRESS_BOOK
+    icon: PrimeIcons.ADDRESS_BOOK,
+    title: 'Tooltip for some action'
   },
   {
     label: 'Other action',
@@ -98,6 +99,14 @@ const demoActions: Action[] = [
     title: 'Tooltip for Disabled',
     disabled: true,
   },
+  {
+    icon: PrimeIcons.BOOK,
+    actionCallback: () => {
+      console.log(`you clicked 'BOOK'`)
+    },
+    show: 'always',
+    ariaLabel: 'Aria label for BOOK action',
+  },
 ]
 
 const demoFields: ObjectDetailItem[] = [
@@ -108,22 +117,29 @@ const demoFields: ObjectDetailItem[] = [
     labelTooltip: 'Label Tooltip',
     actionItemIcon: PrimeIcons.COPY,
     actionItemTooltip: 'Copy to clipboard',
-    actionItemCallback: () => {console.log('Copy to clipboard')},
+    actionItemCallback: () => {
+      console.log('Copy to clipboard')
+    },
   },
   {
     label: 'Status',
     value: 'Confirmed',
-    icon: PrimeIcons.CHECK_CIRCLE
+    icon: PrimeIcons.CHECK_CIRCLE,
   },
   {
     label: 'Start Date',
     value: '14.3.2022',
-    icon: PrimeIcons.CALENDAR
+    icon: PrimeIcons.CALENDAR,
+    actionItemIcon: PrimeIcons.COPY,
+    actionItemCallback: () => {
+      console.log('Copy to clipboard')
+    },
+    actionItemAriaLabel: 'Copy to clipboard',
   },
   {
     label: 'End Date',
     value: '19.06.2024',
-    icon: PrimeIcons.CALENDAR
+    icon: PrimeIcons.CALENDAR,
   },
 ]
 
@@ -361,8 +377,8 @@ export const WithObjectDetailsAndStyledIcons = {
         label: 'Styled Icon',
         value: 'Confirmed',
         icon: PrimeIcons.CHECK_CIRCLE,
-        iconStyleClass: 'text-red-400 fadein animation-duration-1000 animation-iteration-infinite'
-      }
+        iconStyleClass: 'text-red-400 fadein animation-duration-1000 animation-iteration-infinite',
+      },
     ],
     showBreadcrumbs: false,
   },
@@ -389,7 +405,7 @@ export const ForcedColumnLayout = {
     loading: false,
     objectDetails: demoFields,
     showBreadcrumbs: false,
-    enableGridView: false
+    enableGridView: false,
   },
 }
 
@@ -402,7 +418,7 @@ export const ForcedGridLayout = {
     loading: false,
     objectDetails: demoFields,
     showBreadcrumbs: false,
-    enableGridView: true
+    enableGridView: true,
   },
 }
 

libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts

@@ -33,6 +33,8 @@ export interface Action {
   permission?: string
   title?: string
   titleKey?: string
+  ariaLabel?: string
+  ariaLabelKey?: string
   btnClass?: string
   actionCallback(): void
   disabled?: boolean
@@ -61,6 +63,8 @@ export interface ObjectDetailItem {
   actionItemIcon?: PrimeIcon
   actionItemCallback?: () => void
   actionItemTooltip?: string
+  actionItemAriaLabelKey?: string
+  actionItemAriaLabel?: string
 }
 
 export interface HomeItem {
@@ -150,7 +154,7 @@ export class PageHeaderComponent implements OnInit, OnChanges {
 
   objectInfoGridLayoutClasses = 'col-12 flex gap-4 md:col-6 align-items-center p-0'
   objectInfoColumnLayoutClasses = 'flex flex-column align-items-center gap-2 min-w-120'
-  
+
   objectInfoDefaultLayoutClasses = 'flex flex-row md:flex-column md:align-items-center md:gap-2'
 
   protected breadcrumbs: BreadcrumbService
@@ -263,8 +267,11 @@ export class PageHeaderComponent implements OnInit, OnChanges {
             ...allowedActions.map<MenuItem>((a) => ({
               label: a.labelKey ? translations[a.labelKey] : a.label,
               icon: a.icon,
-              title:
-                (a.titleKey ? translations[a.titleKey] : a.title) || (a.labelKey ? translations[a.labelKey] : a.label),
+              tooltipOptions: {
+                tooltipLabel: a.titleKey ? translations[a.titleKey] : a.title,
+                tooltipEvent: 'hover',
+                tooltipPosition: 'top',
+              },
               command: a.actionCallback,
               disabled: a.disabled,
             })),