@wawjs/ngx-prime 22.0.4 → 22.0.6

package/fesm2022/wawjs-ngx-prime-menu.mjs

@@ -6,7 +6,8 @@ import { Injectable, InjectionToken, inject, PLATFORM_ID, Pipe, input, output, V
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { uuid, addStyle, absolutePosition, focus, appendChild, isTouchDevice, find, findSingle } from '@wawjs/css-prime-utils';
+import { Menu as Menu$1, MenuItem } from '@angular/aria/menu';
+import { uuid, addStyle, absolutePosition, focus, appendChild, isTouchDevice } from '@wawjs/css-prime-utils';
 import { SharedModule, OverlayService, PrimeTemplate } from '@wawjs/ngx-prime/api';
 import * as i4 from '@wawjs/ngx-prime/badge';
 import { BadgeModule } from '@wawjs/ngx-prime/badge';
@@ -56,10 +57,10 @@ class MenuStyle extends BaseStyle {
     style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MenuStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MenuStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MenuStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -129,10 +130,10 @@ class SafeHtmlPipe {
         }
         return this.sanitizer.bypassSecurityTrustHtml(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safeHtml',
@@ -162,8 +163,8 @@ class MenuItemContent extends BaseComponent {
     getPTOptions(key) {
         return this.menu.getPTOptions(key, this.item(), this.idx(), this.menuitemId());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MenuItemContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: MenuItemContent, isStandalone: true, selector: "[pMenuItemContent]", inputs: { item: { classPropertyName: "item", publicName: "pMenuItemContent", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, menuitemId: { classPropertyName: "menuitemId", publicName: "menuitemId", isSignal: true, isRequired: false, transformFunction: null }, idx: { classPropertyName: "idx", publicName: "idx", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuItemClick: "onMenuItemClick" }, providers: [MenuStyle], usesInheritance: true, ngImport: i0, template: ` <div [class]="cx('itemContent')" (click)="onItemClick($event, item())" [attr.data-pc-section]="'content'" [pBind]="getPTOptions('itemContent')">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuItemContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MenuItemContent, isStandalone: true, selector: "[pMenuItemContent]", inputs: { item: { classPropertyName: "item", publicName: "pMenuItemContent", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, menuitemId: { classPropertyName: "menuitemId", publicName: "menuitemId", isSignal: true, isRequired: false, transformFunction: null }, idx: { classPropertyName: "idx", publicName: "idx", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuItemClick: "onMenuItemClick" }, providers: [MenuStyle], usesInheritance: true, ngImport: i0, template: ` <div [class]="cx('itemContent')" (click)="onItemClick($event, item())" [attr.data-pc-section]="'content'" [pBind]="getPTOptions('itemContent')">
         @if (!itemTemplate()) {
             @if (!item()?.routerLink) {
                 <a
@@ -223,9 +224,9 @@ class MenuItemContent extends BaseComponent {
                 <p-badge [styleClass]="item()!.badgeStyleClass" [value]="item()!.badge" [pt]="getPTOptions('pcBadge')" [unstyled]="unstyled()" />
             }
         </ng-template>
-    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], encapsulation: i0.ViewEncapsulation.None });
+    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MenuItemContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuItemContent, decorators: [{
             type: Component,
             args: [{
                     selector: '[pMenuItemContent]',
@@ -613,111 +614,63 @@ class Menu extends BaseComponent {
     disabled(disabled) {
         return typeof disabled === 'function' ? disabled() : typeof disabled === 'undefined' ? false : disabled;
     }
-    activedescendant() {
-        return this.focused ? this.focusedOptionId() : undefined;
-    }
     onListFocus(event) {
         if (!this.focused) {
             this.focused = true;
-            !this.popup() && this.changeFocusedOptionIndex(0);
             this.onFocus.emit(event);
         }
     }
     onListBlur(event) {
         if (this.focused) {
             this.focused = false;
-            this.changeFocusedOptionIndex(-1);
-            this.selectedOptionIndex.set(-1);
-            this.focusedOptionIndex.set(-1);
             this.onBlur.emit(event);
         }
     }
-    onListKeyDown(event) {
-        switch (event.code) {
-            case 'ArrowDown':
-                this.onArrowDownKey(event);
-                break;
-            case 'ArrowUp':
-                this.onArrowUpKey(event);
-                break;
-            case 'Home':
-                this.onHomeKey(event);
-                break;
-            case 'End':
-                this.onEndKey(event);
-                break;
-            case 'Enter':
-                this.onEnterKey(event);
-                break;
-            case 'NumpadEnter':
-                this.onEnterKey(event);
-                break;
-            case 'Space':
-                this.onSpaceKey(event);
-                break;
-            case 'Escape':
-            case 'Tab':
-                if (this.popup()) {
-                    focus(this.target);
-                    this.hide();
-                }
-                this.overlayVisible && this.hide();
-                break;
-            default:
-                break;
-        }
-    }
-    onArrowDownKey(event) {
-        const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex());
-        this.changeFocusedOptionIndex(optionIndex);
-        event.preventDefault();
-    }
-    onArrowUpKey(event) {
-        if (event.altKey && this.popup()) {
+    onPopupCloseKey(event) {
+        if (this.popup()) {
             focus(this.target);
             this.hide();
-            event.preventDefault();
         }
-        else {
-            const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex());
-            this.changeFocusedOptionIndex(optionIndex);
-            event.preventDefault();
-        }
-    }
-    onHomeKey(event) {
-        this.changeFocusedOptionIndex(0);
-        event.preventDefault();
-    }
-    onEndKey(event) {
-        this.changeFocusedOptionIndex(find(this.containerViewChild()?.nativeElement, 'li[data-pc-section="item"][data-p-disabled="false"]').length - 1);
-        event.preventDefault();
-    }
-    onEnterKey(event) {
-        const element = findSingle(this.containerViewChild()?.nativeElement, `li[id="${`${this.focusedOptionIndex()}`}"]`);
-        const anchorElement = element && (findSingle(element, '[data-pc-section="itemlink"]') || findSingle(element, 'a,button'));
-        this.popup() && focus(this.target);
-        anchorElement ? anchorElement.click() : element && element.click();
-        event.preventDefault();
-    }
-    onSpaceKey(event) {
-        this.onEnterKey(event);
-    }
-    findNextOptionIndex(index) {
-        const links = find(this.containerViewChild()?.nativeElement, 'li[data-pc-section="item"][data-p-disabled="false"]');
-        const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
-        return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+        this.overlayVisible && this.hide();
     }
-    findPrevOptionIndex(index) {
-        const links = find(this.containerViewChild()?.nativeElement, 'li[data-pc-section="item"][data-p-disabled="false"]');
-        const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
-        return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+    /**
+     * Fired by `ngMenu` when a menu item is selected via keyboard (Enter/Space) or mouse click
+     * handled internally by `@angular/aria`. Mouse clicks also fire the native `(onMenuItemClick)`
+     * handler on `MenuItemContent` (see `itemClick`), which carries the real `originalEvent`;
+     * this handler exists to invoke the same command for keyboard-only activation, where no real
+     * DOM click event is available.
+     */
+    onAriaItemSelected(id) {
+        const item = this.findItemById(id);
+        if (!item || item.disabled) {
+            return;
+        }
+        if (item.command) {
+            item.command({ originalEvent: undefined, item });
+        }
+        if (this.popup()) {
+            this.hide();
+        }
     }
-    changeFocusedOptionIndex(index) {
-        const links = find(this.containerViewChild()?.nativeElement, 'li[data-pc-section="item"][data-p-disabled="false"]');
-        if (links.length > 0) {
-            let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
-            order > -1 && this.focusedOptionIndex.set(links[order].getAttribute('id'));
+    findItemById(id, items = this.model(), parentIndex) {
+        if (!items) {
+            return undefined;
+        }
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.items) {
+                const found = this.findItemById(id, item.items, i);
+                if (found) {
+                    return found;
+                }
+                continue;
+            }
+            const itemId = parentIndex !== undefined ? this.menuitemId(item, this.resolvedId, parentIndex, i) : this.menuitemId(item, this.resolvedId, i);
+            if (itemId === id) {
+                return item;
+            }
         }
+        return undefined;
     }
     itemClick(event, id) {
         const { originalEvent, item } = event;
@@ -852,8 +805,8 @@ class Menu extends BaseComponent {
             popup: this.popup()
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Menu, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Menu, isStandalone: true, selector: "p-menu", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, popup: { classPropertyName: "popup", publicName: "popup", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide", onBlur: "onBlur", onFocus: "onFocus" }, providers: [MenuStyle, { provide: MENU_INSTANCE, useExisting: Menu }, { provide: PARENT_INSTANCE, useExisting: Menu }], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "submenuHeaderTemplate", first: true, predicate: ["submenuheader"], isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }, { propertyName: "startTemplate", first: true, predicate: ["start"] }, { propertyName: "endTemplate", first: true, predicate: ["end"] }], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i3.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Menu, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Menu, isStandalone: true, selector: "p-menu", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, popup: { classPropertyName: "popup", publicName: "popup", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide", onBlur: "onBlur", onFocus: "onFocus" }, providers: [MenuStyle, { provide: MENU_INSTANCE, useExisting: Menu }, { provide: PARENT_INSTANCE, useExisting: Menu }], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "submenuHeaderTemplate", first: true, predicate: ["submenuheader"], isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }, { propertyName: "startTemplate", first: true, predicate: ["start"] }, { propertyName: "endTemplate", first: true, predicate: ["end"] }], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i3.Bind }], ngImport: i0, template: `
         @if (!popup() || overlayVisible) {
             <div
                 #container
@@ -879,18 +832,18 @@ class Menu extends BaseComponent {
                 }
                 <ul
                     #list
+                    ngMenu
+                    (itemSelected)="onAriaItemSelected($event)"
                     [class]="cx('list')"
                     [pBind]="ptm('list')"
-                    role="menu"
-                    [attr.id]="resolvedId + '_list'"
-                    [attr.tabindex]="getTabIndexValue()"
+                    [id]="resolvedId + '_list'"
                     [attr.data-pc-section]="'menu'"
-                    [attr.aria-activedescendant]="activedescendant()"
                     [attr.aria-label]="ariaLabel()"
                     [attr.aria-labelledBy]="ariaLabelledBy()"
                     (focus)="onListFocus($event)"
                     (blur)="onListBlur($event)"
-                    (keydown)="onListKeyDown($event)"
+                    (keydown.escape)="onPopupCloseKey($event)"
+                    (keydown.tab)="onPopupCloseKey($event)"
                 >
                     @if (hasSubMenu()) {
                         @for (submenu of model(); track submenu; let i = $index) {
@@ -925,6 +878,11 @@ class Menu extends BaseComponent {
                                 }
                                 @if (!item.separator && item.visible !== false && (item.visible !== undefined || submenu.visible !== false)) {
                                     <li
+                                        ngMenuItem
+                                        #mi="ngMenuItem"
+                                        [id]="menuitemId(item, resolvedId, i, j)"
+                                        [value]="menuitemId(item, resolvedId, i, j)"
+                                        [disabled]="disabled(item.disabled)"
                                         [class]="cn(cx('item', { item, id: menuitemId(item, resolvedId, i, j) }), item?.styleClass)"
                                         [pBind]="ptm('item')"
                                         [pMenuItemContent]="item"
@@ -937,12 +895,9 @@ class Menu extends BaseComponent {
                                         [tooltipOptions]="item.tooltipOptions"
                                         [pTooltipUnstyled]="unstyled()"
                                         [unstyled]="unstyled()"
-                                        role="menuitem"
                                         [attr.aria-label]="label(item.label)"
-                                        [attr.data-p-focused]="isItemFocused(menuitemId(item, resolvedId, i, j))"
+                                        [attr.data-p-focused]="mi.active()"
                                         [attr.data-p-disabled]="disabled(item.disabled)"
-                                        [attr.aria-disabled]="disabled(item.disabled)"
-                                        [attr.id]="menuitemId(item, resolvedId, i, j)"
                                     ></li>
                                 }
                             }
@@ -955,6 +910,11 @@ class Menu extends BaseComponent {
                             }
                             @if (!item.separator && item.visible !== false) {
                                 <li
+                                    ngMenuItem
+                                    #mi="ngMenuItem"
+                                    [id]="menuitemId(item, resolvedId, i)"
+                                    [value]="menuitemId(item, resolvedId, i)"
+                                    [disabled]="disabled(item.disabled)"
                                     [class]="cn(cx('item', { item, id: menuitemId(item, resolvedId, i) }), item?.styleClass)"
                                     [pBind]="ptm('item')"
                                     [pMenuItemContent]="item"
@@ -967,12 +927,9 @@ class Menu extends BaseComponent {
                                     [tooltipOptions]="item.tooltipOptions"
                                     [unstyled]="unstyled()"
                                     [pTooltipUnstyled]="unstyled()"
-                                    role="menuitem"
                                     [attr.aria-label]="label(item.label)"
-                                    [attr.data-p-focused]="isItemFocused(menuitemId(item, resolvedId, i))"
+                                    [attr.data-p-focused]="mi.active()"
                                     [attr.data-p-disabled]="disabled(item.disabled)"
-                                    [attr.aria-disabled]="disabled(item.disabled)"
-                                    [attr.id]="menuitemId(item, resolvedId, i)"
                                 ></li>
                             }
                         }
@@ -985,14 +942,14 @@ class Menu extends BaseComponent {
                 }
             </div>
         }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: MenuItemContent, selector: "[pMenuItemContent]", inputs: ["pMenuItemContent", "itemTemplate", "menuitemId", "idx"], outputs: ["onMenuItemClick"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i3.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i6.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: MenuItemContent, selector: "[pMenuItemContent]", inputs: ["pMenuItemContent", "itemTemplate", "menuitemId", "idx"], outputs: ["onMenuItemClick"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i3.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i6.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }, { kind: "directive", type: Menu$1, selector: "[ngMenu]", inputs: ["id", "wrap", "typeaheadDelay", "disabled", "softDisabled", "expansionDelay"], outputs: ["itemSelected"], exportAs: ["ngMenu"] }, { kind: "directive", type: MenuItem, selector: "[ngMenuItem]", inputs: ["id", "value", "disabled", "searchTerm", "role", "submenu"], outputs: ["searchTermChange"], exportAs: ["ngMenuItem"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Menu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Menu, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-menu',
                     standalone: true,
-                    imports: [CommonModule, RouterModule, MenuItemContent, TooltipModule, BadgeModule, SharedModule, SafeHtmlPipe, BindModule, MotionModule],
+                    imports: [CommonModule, RouterModule, MenuItemContent, TooltipModule, BadgeModule, SharedModule, SafeHtmlPipe, BindModule, MotionModule, Menu$1, MenuItem],
                     template: `
         @if (!popup() || overlayVisible) {
             <div
@@ -1019,18 +976,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 }
                 <ul
                     #list
+                    ngMenu
+                    (itemSelected)="onAriaItemSelected($event)"
                     [class]="cx('list')"
                     [pBind]="ptm('list')"
-                    role="menu"
-                    [attr.id]="resolvedId + '_list'"
-                    [attr.tabindex]="getTabIndexValue()"
+                    [id]="resolvedId + '_list'"
                     [attr.data-pc-section]="'menu'"
-                    [attr.aria-activedescendant]="activedescendant()"
                     [attr.aria-label]="ariaLabel()"
                     [attr.aria-labelledBy]="ariaLabelledBy()"
                     (focus)="onListFocus($event)"
                     (blur)="onListBlur($event)"
-                    (keydown)="onListKeyDown($event)"
+                    (keydown.escape)="onPopupCloseKey($event)"
+                    (keydown.tab)="onPopupCloseKey($event)"
                 >
                     @if (hasSubMenu()) {
                         @for (submenu of model(); track submenu; let i = $index) {
@@ -1065,6 +1022,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                                 }
                                 @if (!item.separator && item.visible !== false && (item.visible !== undefined || submenu.visible !== false)) {
                                     <li
+                                        ngMenuItem
+                                        #mi="ngMenuItem"
+                                        [id]="menuitemId(item, resolvedId, i, j)"
+                                        [value]="menuitemId(item, resolvedId, i, j)"
+                                        [disabled]="disabled(item.disabled)"
                                         [class]="cn(cx('item', { item, id: menuitemId(item, resolvedId, i, j) }), item?.styleClass)"
                                         [pBind]="ptm('item')"
                                         [pMenuItemContent]="item"
@@ -1077,12 +1039,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                                         [tooltipOptions]="item.tooltipOptions"
                                         [pTooltipUnstyled]="unstyled()"
                                         [unstyled]="unstyled()"
-                                        role="menuitem"
                                         [attr.aria-label]="label(item.label)"
-                                        [attr.data-p-focused]="isItemFocused(menuitemId(item, resolvedId, i, j))"
+                                        [attr.data-p-focused]="mi.active()"
                                         [attr.data-p-disabled]="disabled(item.disabled)"
-                                        [attr.aria-disabled]="disabled(item.disabled)"
-                                        [attr.id]="menuitemId(item, resolvedId, i, j)"
                                     ></li>
                                 }
                             }
@@ -1095,6 +1054,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                             }
                             @if (!item.separator && item.visible !== false) {
                                 <li
+                                    ngMenuItem
+                                    #mi="ngMenuItem"
+                                    [id]="menuitemId(item, resolvedId, i)"
+                                    [value]="menuitemId(item, resolvedId, i)"
+                                    [disabled]="disabled(item.disabled)"
                                     [class]="cn(cx('item', { item, id: menuitemId(item, resolvedId, i) }), item?.styleClass)"
                                     [pBind]="ptm('item')"
                                     [pMenuItemContent]="item"
@@ -1107,12 +1071,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                                     [tooltipOptions]="item.tooltipOptions"
                                     [unstyled]="unstyled()"
                                     [pTooltipUnstyled]="unstyled()"
-                                    role="menuitem"
                                     [attr.aria-label]="label(item.label)"
-                                    [attr.data-p-focused]="isItemFocused(menuitemId(item, resolvedId, i))"
+                                    [attr.data-p-focused]="mi.active()"
                                     [attr.data-p-disabled]="disabled(item.disabled)"
-                                    [attr.aria-disabled]="disabled(item.disabled)"
-                                    [attr.id]="menuitemId(item, resolvedId, i)"
                                 ></li>
                             }
                         }
@@ -1139,11 +1100,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 args: ['end', { descendants: false }]
             }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ descendants: false }, isSignal: true }] }], submenuHeaderTemplate: [{ type: i0.ContentChild, args: ['submenuheader', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }] } });
 class MenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: MenuModule, imports: [Menu, SharedModule, SafeHtmlPipe], exports: [Menu, SharedModule, SafeHtmlPipe] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MenuModule, imports: [Menu, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: MenuModule, imports: [Menu, SharedModule, SafeHtmlPipe], exports: [Menu, SharedModule, SafeHtmlPipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuModule, imports: [Menu, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Menu, SharedModule, SafeHtmlPipe],