fix: fixed accessibilty issues for pageHeaderComponent

libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.html

@@ -67,7 +67,7 @@
             pButton
             (click)="setSelectedItem(item); updateGridMenuItems(true); menu.toggle($event)"
             icon="pi pi-ellipsis-v"
-            [ariaLabel]="'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate"
+            [attr.ariaLabel]="'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate"
             class="more-actions-menu-button menu-btn"
             [attr.name]="'data-grid-item-menu-button'"
           ></button>

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

@@ -58,7 +58,9 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
               class="action-button"
               [label]="action.labelKey ? (action.labelKey | translate) : action.label"
               (onClick)="action.actionCallback()"
-              [title]="(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)"
+              [pTooltip]="(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)"
+              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)"
@@ -73,7 +75,9 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
               type="button"
               pButton
               icon="pi pi-ellipsis-v"
-              title="{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}"
+              pTooltip="{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}"
+              tooltipEvent="hover"
+              tooltipPosition="top"
               class="more-actions-menu-button action-button ml-2"
               (click)="menu.toggle($event)"
               name="ocx-page-header-overflow-action-button"
@@ -100,26 +104,37 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
         <span
           class="flex font-medium text-600 object-info-grid-label"
           name="object-detail-label"
-          [title]="item.labelTooltip || ''"
+          [pTooltip]="item.labelTooltip || ''"
+          tooltipEvent="hover"
+          tooltipPosition="top"
           >{{ item.label | dynamicPipe:item.labelPipe }}</span
         >
         <span
           *ngIf="item.icon || item.value"
           class="object-info-grid-value"
-          [title]="item.valueTooltip || item.tooltip || ''"
         >
           <span
             class="flex text-900 align-items-center gap-2 w-max"
             [ngClass]="generateItemStyle(item)"
             name="object-detail-value"
+          >
+          <span 
+            class="flex align-items-center gap-2" 
+            [pTooltip]="item.valueTooltip || item.tooltip || ''"
+            tooltipEvent="hover"
+            tooltipPosition="top"  
           >
             <i *ngIf="item.icon" class='{{item.icon + " " + (item.iconStyleClass || "")}}' name="object-detail-icon"></i>
             {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}
+          </span>
             <p-button
               *ngIf="item.actionItemIcon && item.actionItemCallback"
               [icon]="item.actionItemIcon"
               styleClass="p-button-text p-0 w-full"
-              [title]="item.actionItemTooltip || ''"
+              [pTooltip]="item.actionItemTooltip || ''"
+              tooltipPosition="top"
+              tooltipEvent="hover"
+              [ariaLabel]="item.actionItemTooltip || ''"
               (onClick)="item.actionItemCallback()"
             ></p-button>
           </span>

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

@@ -108,10 +108,10 @@ describe('PageHeaderComponent', () => {
     component.actions = mockActions
 
     expect(await pageHeaderHarness.getInlineActionButtons()).toHaveLength(1)
-    expect(await pageHeaderHarness.getElementByTitle('My Test Action')).toBeTruthy()
+    expect(await pageHeaderHarness.getElementByPTooltip('My Test Action')).toBeTruthy()
     await (await pageHeaderHarness.getOverflowActionMenuButton())?.click()
     expect(await pageHeaderHarness.getOverFlowMenuItems()).toHaveLength(2)
-    expect(await pageHeaderHarness.getElementByTitle('More actions')).toBeTruthy()
+    expect(await pageHeaderHarness.getElementByPTooltip('More actions')).toBeTruthy()
     expect(userServiceSpy).toHaveBeenCalledTimes(3)
   })
 
@@ -126,9 +126,9 @@ describe('PageHeaderComponent', () => {
     component.actions = mockActions
 
     expect(await pageHeaderHarness.getInlineActionButtons()).toHaveLength(0)
-    expect(await pageHeaderHarness.getElementByTitle('My Test Action')).toBeFalsy()
+    expect(await pageHeaderHarness.getElementByPTooltip('My Test Action')).toBeFalsy()
     expect(await pageHeaderHarness.getOverFlowMenuItems()).toHaveLength(0)
-    expect(await pageHeaderHarness.getElementByTitle('More actions')).toBeFalsy()
+    expect(await pageHeaderHarness.getElementByPTooltip('More actions')).toBeFalsy()
     expect(userServiceSpy).toHaveBeenCalledTimes(3)
   })
 

libs/angular-accelerator/testing/page-header.harness.ts

@@ -18,6 +18,10 @@ export class PageHeaderHarness extends ComponentHarness {
     return await this.locatorForOptional(`[title="${title}"]`)()
   }
 
+  async getElementByPTooltip(title: string) {
+    return await this.locatorForOptional(`[aria-label="${title}"]`)()
+  }
+
   async getObjectInfos() {
     return await this.locatorForAll(ObjectDetailItemHarness)()
   }