From 75f48dc827c9b1ecee4fa4c31296d2bd11612451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Wed, 13 Mar 2024 15:36:21 +0300
Subject: [PATCH] Fixed #14972 - MenuBar | Remove duplicate id

---
 src/app/components/menubar/menubar.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts
index b654a225a1c..71fc8451e46 100755
--- a/src/app/components/menubar/menubar.ts
+++ b/src/app/components/menubar/menubar.ts
@@ -64,7 +64,7 @@ export class MenubarService {
             [attr.aria-label]="ariaLabel"
             [attr.aria-labelledBy]="ariaLabelledBy"
             (keydown)="menuKeydown.emit($event)"
-            [attr.id]="menuId"
+            [attr.id]="root ? menuId : null"
             [attr.aria-activedescendant]="focusedItemId"
         >
             <ng-template ngFor let-processedItem [ngForOf]="items" let-index="index">
@@ -121,11 +121,11 @@ export class MenubarService {
                                     [attr.tabindex]="-1"
                                 >
                                 </span>
-                                <span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" class="p-menuitem-text" [attr.data-pc-section]="'label'">
+                                <span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" class="p-menuitem-text" [attr.data-pc-section]="'label'" [id]="getItemLabelId(processedItem)">
                                     {{ getItemLabel(processedItem) }}
                                 </span>
                                 <ng-template #htmlLabel>
-                                    <span class="p-menuitem-text" [innerHTML]="getItemLabel(processedItem)" [attr.data-pc-section]="'label'"></span>
+                                    <span class="p-menuitem-text" [innerHTML]="getItemLabel(processedItem)" [attr.data-pc-section]="'label'" [id]="getItemLabelId(processedItem)"></span>
                                 </ng-template>
                                 <span class="p-menuitem-badge" *ngIf="getItemProp(processedItem, 'badge')" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ getItemProp(processedItem, 'badge') }}</span>
 
@@ -192,6 +192,7 @@ export class MenubarService {
                         [activeItemPath]="activeItemPath"
                         [focusedItemId]="focusedItemId"
                         [level]="level + 1"
+                        [ariaLabelledBy]="getItemLabelId(processedItem)"
                         (itemClick)="itemClick.emit($event)"
                         (itemMouseEnter)="onItemMouseEnter($event)"
                     >
@@ -273,6 +274,10 @@ export class MenubarSub implements OnInit, OnDestroy {
         return this.getItemId(processedItem);
     }
 
+    getItemLabelId(processedItem: any): string {
+        return `${this.menuId}_${processedItem.key}_label`;
+    }
+
     getItemClass(processedItem: any) {
         return {
             ...this.getItemProp(processedItem, 'class'),