From 0297e4dc25db4f7c1e534403f7dbafa0a68b755a Mon Sep 17 00:00:00 2001
From: markuczy <martin.kuczynski@capgemini.com>
Date: Mon, 23 Sep 2024 11:20:42 +0200
Subject: [PATCH 1/5] feat: ariaLabel enhancements for page header buttons

---
 .../page-header/page-header.component.html    |  6 ++--
 .../page-header.component.stories.ts          | 33 ++++++++++++++-----
 .../page-header/page-header.component.ts      |  5 ++-
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
index 55a6305e..25ebcf82 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
@@ -63,7 +63,7 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
               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)"
+              [attr.aria-label]=" (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>
@@ -81,7 +81,7 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
               class="more-actions-menu-button action-button ml-2"
               (click)="menu.toggle($event)"
               name="ocx-page-header-overflow-action-button"
-              [attr.aria-label]="('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)"
+              [ariaLabel]="('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)"
             ></button>
             <p-menu #menu [popup]="true" [model]="overflowActions" appendTo="body"></p-menu>
           </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.actionItemAriaLabel || item.actionItemTooltip || ''"
               (onClick)="item.actionItemCallback()"
             ></p-button>
           </span>
diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts
index 50d7b0b5..247d5c26 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts
@@ -81,7 +81,7 @@ const demoActions: Action[] = [
       console.log(`you clicked 'Some action'`)
     },
     show: 'asOverflow',
-    icon: PrimeIcons.ADDRESS_BOOK
+    icon: PrimeIcons.ADDRESS_BOOK,
   },
   {
     label: 'Other action',
@@ -98,6 +98,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 +116,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 +376,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 +404,7 @@ export const ForcedColumnLayout = {
     loading: false,
     objectDetails: demoFields,
     showBreadcrumbs: false,
-    enableGridView: false
+    enableGridView: false,
   },
 }
 
@@ -402,7 +417,7 @@ export const ForcedGridLayout = {
     loading: false,
     objectDetails: demoFields,
     showBreadcrumbs: false,
-    enableGridView: true
+    enableGridView: true,
   },
 }
 
diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
index 973f527c..9fb34fd9 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
+++ b/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,7 @@ export interface ObjectDetailItem {
   actionItemIcon?: PrimeIcon
   actionItemCallback?: () => void
   actionItemTooltip?: string
+  actionItemAriaLabel?: string
 }
 
 export interface HomeItem {
@@ -150,7 +153,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

From 83be96dfe8cce58fa7a09c08fa8ff2e05e7dc095 Mon Sep 17 00:00:00 2001
From: markuczy <martin.kuczynski@capgemini.com>
Date: Mon, 23 Sep 2024 12:20:53 +0200
Subject: [PATCH 2/5] fix: fixed prop for p-button

---
 .../src/lib/components/page-header/page-header.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
index 25ebcf82..7ace92bb 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
@@ -63,7 +63,7 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
               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.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (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>

From 4c06c4ddf6cefe660c9d520d2151a0d8a7b9206b Mon Sep 17 00:00:00 2001
From: markuczy <martin.kuczynski@capgemini.com>
Date: Mon, 23 Sep 2024 13:30:02 +0200
Subject: [PATCH 3/5] fix: fixed aria-label of more actions button

---
 .../src/lib/components/page-header/page-header.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
index 7ace92bb..e12d025a 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
@@ -81,7 +81,7 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
               class="more-actions-menu-button action-button ml-2"
               (click)="menu.toggle($event)"
               name="ocx-page-header-overflow-action-button"
-              [ariaLabel]="('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)"
+              [attr.aria-label]="('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)"
             ></button>
             <p-menu #menu [popup]="true" [model]="overflowActions" appendTo="body"></p-menu>
           </div>

From 078adf0d6668017be5a5bd7491502c8f03c753ad Mon Sep 17 00:00:00 2001
From: markuczy <martin.kuczynski@capgemini.com>
Date: Tue, 24 Sep 2024 11:52:30 +0200
Subject: [PATCH 4/5] feat: page header improvements

---
 .../lib/components/page-header/page-header.component.html  | 2 +-
 .../page-header/page-header.component.stories.ts           | 1 +
 .../lib/components/page-header/page-header.component.ts    | 7 +++++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
index e12d025a..2079a279 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
@@ -58,7 +58,7 @@ <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"
diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts
index 247d5c26..43482eda 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts
@@ -82,6 +82,7 @@ const demoActions: Action[] = [
     },
     show: 'asOverflow',
     icon: PrimeIcons.ADDRESS_BOOK,
+    title: 'Tooltip for some action'
   },
   {
     label: 'Other action',
diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
index 9fb34fd9..b768207c 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
@@ -266,8 +266,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,
             })),

From 380971d474ee97ce037e79985b15188d5811708c Mon Sep 17 00:00:00 2001
From: markuczy <martin.kuczynski@capgemini.com>
Date: Wed, 25 Sep 2024 09:28:32 +0200
Subject: [PATCH 5/5] feat: aria label for object detail item as translation
 key

---
 .../src/lib/components/page-header/page-header.component.html   | 2 +-
 .../src/lib/components/page-header/page-header.component.ts     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
index 2079a279..6d1f522b 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
@@ -128,7 +128,7 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
               [pTooltip]="item.actionItemTooltip || ''"
               tooltipPosition="top"
               tooltipEvent="hover"
-              [ariaLabel]="item.actionItemAriaLabel || item.actionItemTooltip || ''"
+              [ariaLabel]="(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''"
               (onClick)="item.actionItemCallback()"
             ></p-button>
           </span>
diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
index b768207c..c72e1f61 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
@@ -63,6 +63,7 @@ export interface ObjectDetailItem {
   actionItemIcon?: PrimeIcon
   actionItemCallback?: () => void
   actionItemTooltip?: string
+  actionItemAriaLabelKey?: string
   actionItemAriaLabel?: string
 }