primeng 16.0.2 → 16.2.0

package/fesm2022/primeng-menu.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { PLATFORM_ID, Pipe, Inject, forwardRef, Component, ViewEncapsulation, Input, EventEmitter, ChangeDetectionStrategy, Output, NgModule } from '@angular/core';
+import { PLATFORM_ID, Pipe, Inject, EventEmitter, forwardRef, Component, ViewEncapsulation, Input, Output, computed, signal, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import { ZIndexUtils } from 'primeng/utils';
+import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
 import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i4 from 'primeng/ripple';
@@ -27,10 +27,10 @@ class SafeHtmlPipe {
         }
         return this.sanitizer.bypassSecurityTrustHtml(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: PLATFORM_ID }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: PLATFORM_ID }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safeHtml'
@@ -41,159 +41,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 }] }, { type: i1.DomSanitizer }]; } });
 class MenuItemContent {
     item;
+    id;
+    onMenuItemClick = new EventEmitter();
     menu;
     constructor(menu) {
         this.menu = menu;
     }
-    onItemKeyDown(event) {
-        let listItem = event.currentTarget.parentElement;
-        switch (event.code) {
-            case 'ArrowDown':
-                var nextItem = this.findNextItem(listItem);
-                if (nextItem) {
-                    nextItem.children[0].focus();
-                }
-                event.preventDefault();
-                break;
-            case 'ArrowUp':
-                var prevItem = this.findPrevItem(listItem);
-                if (prevItem) {
-                    prevItem.children[0].focus();
-                }
-                event.preventDefault();
-                break;
-            case 'Space':
-            case 'Enter':
-                if (listItem && !DomHandler.hasClass(listItem, 'p-disabled')) {
-                    listItem.children[0].click();
-                }
-                event.preventDefault();
-                break;
-            default:
-                break;
-        }
-    }
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-        if (nextItem)
-            return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-        else
-            return null;
+    onItemClick(event, item) {
+        this.onMenuItemClick.emit({ originalEvent: event, item: { ...item, id: this.id } });
     }
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-        if (prevItem)
-            return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-        else
-            return null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MenuItemContent, deps: [{ token: forwardRef(() => Menu) }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: MenuItemContent, selector: "[pMenuItemContent]", inputs: { item: ["pMenuItemContent", "item"] }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        <a
-            *ngIf="!item?.routerLink"
-            (keydown)="onItemKeyDown($event)"
-            [attr.href]="item.url || null"
-            class="p-menuitem-link"
-            [attr.tabindex]="item.disabled ? null : '0'"
-            [attr.data-automationid]="item.automationId"
-            [target]="item.target"
-            [attr.title]="item.title"
-            [attr.id]="item.id"
-            [ngClass]="{ 'p-disabled': item.disabled }"
-            (click)="menu.itemClick($event, item)"
-            role="menuitem"
-        >
-            <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-        </a>
-        <a
-            *ngIf="item?.routerLink"
-            (keydown)="onItemKeyDown($event)"
-            [routerLink]="item.routerLink"
-            [attr.data-automationid]="item.automationId"
-            [queryParams]="item.queryParams"
-            routerLinkActive="p-menuitem-link-active"
-            [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
-            class="p-menuitem-link"
-            [target]="item.target"
-            [attr.id]="item.id"
-            [attr.tabindex]="item.disabled ? null : '0'"
-            [attr.title]="item.title"
-            [ngClass]="{ 'p-disabled': item.disabled }"
-            (click)="menu.itemClick($event, item)"
-            role="menuitem"
-            pRipple
-            [fragment]="item.fragment"
-            [queryParamsHandling]="item.queryParamsHandling"
-            [preserveFragment]="item.preserveFragment"
-            [skipLocationChange]="item.skipLocationChange"
-            [replaceUrl]="item.replaceUrl"
-            [state]="item.state"
-        >
-            <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-        </a>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MenuItemContent, deps: [{ token: forwardRef(() => Menu) }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: MenuItemContent, selector: "[pMenuItemContent]", inputs: { item: ["pMenuItemContent", "item"], id: "id" }, outputs: { onMenuItemClick: "onMenuItemClick" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+        <div [attr.data-pc-section]="'content'" class="p-menuitem-content">
+            <a
+                *ngIf="!item?.routerLink"
+                [attr.title]="item.title"
+                [attr.href]="item.url || null"
+                [attr.data-automationid]="item.automationId"
+                [attr.tabindex]="-1"
+                [attr.data-pc-section]="'action'"
+                [attr.aria-hidden]="true"
+                class="p-menuitem-link"
+                [target]="item.target"
+                [ngClass]="{ 'p-disabled': item.disabled }"
+                (click)="onItemClick($event, item)"
+                pRipple
+            >
+                <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+            </a>
+            <a
+                *ngIf="item?.routerLink"
+                [routerLink]="item.routerLink"
+                [attr.data-automationid]="item.automationId"
+                [attr.tabindex]="-1"
+                [attr.data-pc-section]="'action'"
+                [attr.aria-hidden]="true"
+                [attr.title]="item.title"
+                [queryParams]="item.queryParams"
+                routerLinkActive="p-menuitem-link-active"
+                [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
+                class="p-menuitem-link"
+                [target]="item.target"
+                [ngClass]="{ 'p-disabled': item.disabled }"
+                (click)="onItemClick($event, item)"
+                [fragment]="item.fragment"
+                [queryParamsHandling]="item.queryParamsHandling"
+                [preserveFragment]="item.preserveFragment"
+                [skipLocationChange]="item.skipLocationChange"
+                [replaceUrl]="item.replaceUrl"
+                [state]="item.state"
+                pRipple
+            >
+                <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+            </a>
 
-        <ng-template #itemContent>
-            <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon" [class]="item.iconClass" [ngStyle]="item.iconStyle"></span>
-            <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{ item.label }}</span>
-            <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label | safeHtml"></span></ng-template>
-            <span class="p-menuitem-badge" *ngIf="item.badge" [ngClass]="item.badgeStyleClass">{{ item.badge }}</span>
-        </ng-template>
+            <ng-template #itemContent>
+                <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon" [class]="item.iconClass" [ngStyle]="item.iconStyle"></span>
+                <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{ item.label }}</span>
+                <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label | safeHtml"></span></ng-template>
+                <span class="p-menuitem-badge" *ngIf="item.badge" [ngClass]="item.badgeStyleClass">{{ item.badge }}</span>
+            </ng-template>
+        </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i4.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MenuItemContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MenuItemContent, decorators: [{
             type: Component,
             args: [{
                     selector: '[pMenuItemContent]',
                     template: `
-        <a
-            *ngIf="!item?.routerLink"
-            (keydown)="onItemKeyDown($event)"
-            [attr.href]="item.url || null"
-            class="p-menuitem-link"
-            [attr.tabindex]="item.disabled ? null : '0'"
-            [attr.data-automationid]="item.automationId"
-            [target]="item.target"
-            [attr.title]="item.title"
-            [attr.id]="item.id"
-            [ngClass]="{ 'p-disabled': item.disabled }"
-            (click)="menu.itemClick($event, item)"
-            role="menuitem"
-        >
-            <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-        </a>
-        <a
-            *ngIf="item?.routerLink"
-            (keydown)="onItemKeyDown($event)"
-            [routerLink]="item.routerLink"
-            [attr.data-automationid]="item.automationId"
-            [queryParams]="item.queryParams"
-            routerLinkActive="p-menuitem-link-active"
-            [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
-            class="p-menuitem-link"
-            [target]="item.target"
-            [attr.id]="item.id"
-            [attr.tabindex]="item.disabled ? null : '0'"
-            [attr.title]="item.title"
-            [ngClass]="{ 'p-disabled': item.disabled }"
-            (click)="menu.itemClick($event, item)"
-            role="menuitem"
-            pRipple
-            [fragment]="item.fragment"
-            [queryParamsHandling]="item.queryParamsHandling"
-            [preserveFragment]="item.preserveFragment"
-            [skipLocationChange]="item.skipLocationChange"
-            [replaceUrl]="item.replaceUrl"
-            [state]="item.state"
-        >
-            <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-        </a>
+        <div [attr.data-pc-section]="'content'" class="p-menuitem-content">
+            <a
+                *ngIf="!item?.routerLink"
+                [attr.title]="item.title"
+                [attr.href]="item.url || null"
+                [attr.data-automationid]="item.automationId"
+                [attr.tabindex]="-1"
+                [attr.data-pc-section]="'action'"
+                [attr.aria-hidden]="true"
+                class="p-menuitem-link"
+                [target]="item.target"
+                [ngClass]="{ 'p-disabled': item.disabled }"
+                (click)="onItemClick($event, item)"
+                pRipple
+            >
+                <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+            </a>
+            <a
+                *ngIf="item?.routerLink"
+                [routerLink]="item.routerLink"
+                [attr.data-automationid]="item.automationId"
+                [attr.tabindex]="-1"
+                [attr.data-pc-section]="'action'"
+                [attr.aria-hidden]="true"
+                [attr.title]="item.title"
+                [queryParams]="item.queryParams"
+                routerLinkActive="p-menuitem-link-active"
+                [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
+                class="p-menuitem-link"
+                [target]="item.target"
+                [ngClass]="{ 'p-disabled': item.disabled }"
+                (click)="onItemClick($event, item)"
+                [fragment]="item.fragment"
+                [queryParamsHandling]="item.queryParamsHandling"
+                [preserveFragment]="item.preserveFragment"
+                [skipLocationChange]="item.skipLocationChange"
+                [replaceUrl]="item.replaceUrl"
+                [state]="item.state"
+                pRipple
+            >
+                <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+            </a>
 
-        <ng-template #itemContent>
-            <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon" [class]="item.iconClass" [ngStyle]="item.iconStyle"></span>
-            <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{ item.label }}</span>
-            <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label | safeHtml"></span></ng-template>
-            <span class="p-menuitem-badge" *ngIf="item.badge" [ngClass]="item.badgeStyleClass">{{ item.badge }}</span>
-        </ng-template>
+            <ng-template #itemContent>
+                <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon" [class]="item.iconClass" [ngStyle]="item.iconStyle"></span>
+                <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{ item.label }}</span>
+                <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label | safeHtml"></span></ng-template>
+                <span class="p-menuitem-badge" *ngIf="item.badge" [ngClass]="item.badgeStyleClass">{{ item.badge }}</span>
+            </ng-template>
+        </div>
     `,
                     encapsulation: ViewEncapsulation.None,
                     host: {
@@ -206,6 +171,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 }] }]; }, propDecorators: { item: [{
                 type: Input,
                 args: ['pMenuItemContent']
+            }], id: [{
+                type: Input,
+                args: ['id']
+            }], onMenuItemClick: [{
+                type: Output
             }] } });
 /**
  * Menu is a navigation / command component that supports dynamic and static positioning.
@@ -264,6 +234,26 @@ class Menu {
      * @group Props
      */
     hideTransitionOptions = '.1s linear';
+    /**
+     * Defines a string value that labels an interactive element.
+     * @group Props
+     */
+    ariaLabel;
+    /**
+     * Identifier of the underlying input element.
+     * @group Props
+     */
+    ariaLabelledBy;
+    /**
+     * Current id state as a string.
+     * @group Props
+     */
+    id;
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex = 0;
     /**
      * Callback to invoke when overlay menu is shown.
      * @group Emits
@@ -274,6 +264,20 @@ class Menu {
      * @group Emits
      */
     onHide = new EventEmitter();
+    /**
+     * Callback to invoke when the list loses focus.
+     * @param {Event} event - blur event.
+     * @group Emits
+     */
+    onBlur = new EventEmitter();
+    /**
+     * Callback to invoke when the list receives focus.
+     * @param {Event} event - focus event.
+     * @group Emits
+     */
+    onFocus = new EventEmitter();
+    listViewChild;
+    containerViewChild;
     container;
     scrollHandler;
     documentClickListener;
@@ -281,6 +285,13 @@ class Menu {
     preventDocumentDefault;
     target;
     visible;
+    focusedOptionId = computed(() => {
+        return this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : null;
+    });
+    focusedOptionIndex = signal(-1);
+    selectedOptionIndex = signal(-1);
+    focused = false;
+    overlayVisible = false;
     relativeAlign;
     constructor(document, platformId, el, renderer, cd, config, overlayService) {
         this.document = document;
@@ -290,6 +301,7 @@ class Menu {
         this.cd = cd;
         this.config = config;
         this.overlayService = overlayService;
+        this.id = this.id || UniqueComponentId();
     }
     /**
      * Toggles the visibility of the popup menu.
@@ -313,8 +325,14 @@ class Menu {
         this.relativeAlign = event.relativeAlign;
         this.visible = true;
         this.preventDocumentDefault = true;
+        this.overlayVisible = true;
         this.cd.markForCheck();
     }
+    ngOnInit() {
+        if (!this.popup) {
+            this.bindDocumentClickListener();
+        }
+    }
     onOverlayAnimationStart(event) {
         switch (event.toState) {
             case 'visible':
@@ -327,6 +345,8 @@ class Menu {
                     this.bindDocumentClickListener();
                     this.bindDocumentResizeListener();
                     this.bindScrollListener();
+                    DomHandler.focus(this.listViewChild.nativeElement);
+                    this.changeFocusedOptionIndex(0);
                 }
                 break;
             case 'void':
@@ -382,23 +402,144 @@ class Menu {
             this.hide();
         }
     }
-    itemClick(event, item) {
-        if (item.disabled) {
+    menuitemId(id, index, childIndex) {
+        return `${id}_${index}${typeof childIndex !== 'undefined' ? '_' + childIndex : ''}`;
+    }
+    isItemFocused(id) {
+        return this.focusedOptionId() === id;
+    }
+    label(label) {
+        return typeof label === 'function' ? label() : label;
+    }
+    disabled(disabled) {
+        return typeof disabled === 'function' ? disabled() : typeof disabled === 'undefined' ? false : disabled;
+    }
+    activedescendant() {
+        return this.focused ? this.focusedOptionId() : undefined;
+    }
+    onListFocus(event) {
+        this.focused = true;
+        if (!this.popup) {
+            if (this.selectedOptionIndex() !== -1) {
+                this.changeFocusedOptionIndex(this.selectedOptionIndex());
+                this.selectedOptionIndex.set(-1);
+            }
+            else {
+                this.changeFocusedOptionIndex(0);
+            }
+        }
+        this.onFocus.emit(event);
+    }
+    onListBlur(event) {
+        this.focused = false;
+        this.changeFocusedOptionIndex(-1);
+        this.selectedOptionIndex.set(null);
+        this.focusedOptionIndex.set(null);
+        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 'Space':
+                this.onSpaceKey(event);
+                break;
+            case 'Escape':
+                if (this.popup) {
+                    DomHandler.focus(this.target);
+                    this.hide();
+                }
+            case 'Tab':
+                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) {
+            DomHandler.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(DomHandler.find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
+        event.preventDefault();
+    }
+    onEnterKey(event) {
+        const element = DomHandler.findSingle(this.containerViewChild.nativeElement, `li[id="${`${this.focusedOptionIndex()}`}"]`);
+        const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+        this.popup && DomHandler.focus(this.target);
+        anchorElement ? anchorElement.click() : element && element.click();
+        event.preventDefault();
+    }
+    onSpaceKey(event) {
+        this.onEnterKey(event);
+    }
+    findNextOptionIndex(index) {
+        const links = DomHandler.find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+        const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+        return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+    }
+    findPrevOptionIndex(index) {
+        const links = DomHandler.find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+        const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+        return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+    }
+    changeFocusedOptionIndex(index) {
+        const links = DomHandler.find(this.containerViewChild.nativeElement, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+        let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
+        order > -1 && this.focusedOptionIndex.set(links[order].getAttribute('id'));
+    }
+    itemClick(event) {
+        const { originalEvent, item } = event;
+        if (item.disabled) {
+            originalEvent.preventDefault();
             return;
         }
         if (!item.url && !item.routerLink) {
-            event.preventDefault();
+            originalEvent.preventDefault();
         }
         if (item.command) {
             item.command({
-                originalEvent: event,
+                originalEvent: originalEvent,
                 item: item
             });
         }
         if (this.popup) {
             this.hide();
         }
+        if (!this.popup && this.focusedOptionIndex() !== item.id) {
+            this.focusedOptionIndex.set(item.id);
+        }
     }
     onOverlayClick(event) {
         if (this.popup) {
@@ -412,11 +553,16 @@ class Menu {
     bindDocumentClickListener() {
         if (!this.documentClickListener && isPlatformBrowser(this.platformId)) {
             const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
-            this.documentClickListener = this.renderer.listen(documentTarget, 'click', () => {
-                if (!this.preventDocumentDefault) {
+            this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => {
+                const isOutsideContainer = this.containerViewChild.nativeElement && !this.containerViewChild.nativeElement.contains(event.target);
+                const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));
+                if (!this.popup && isOutsideContainer && isOutsideTarget) {
+                    this.onListBlur(event);
+                }
+                if (this.preventDocumentDefault && this.overlayVisible && isOutsideContainer && isOutsideTarget) {
                     this.hide();
+                    this.preventDocumentDefault = false;
                 }
-                this.preventDocumentDefault = false;
             });
         }
     }
@@ -474,6 +620,9 @@ class Menu {
             this.restoreOverlayAppend();
             this.onOverlayHide();
         }
+        if (!this.popup) {
+            this.unbindDocumentClickListener();
+        }
     }
     hasSubMenu() {
         if (this.model) {
@@ -485,8 +634,8 @@ class Menu {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: Menu, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.PrimeNGConfig }, { token: i5.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: Menu, selector: "p-menu", inputs: { model: "model", popup: "popup", style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: Menu, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.PrimeNGConfig }, { token: i5.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: Menu, selector: "p-menu", inputs: { model: "model", popup: "popup", style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", id: "id", tabindex: "tabindex" }, outputs: { onShow: "onShow", onHide: "onHide", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
         <div
             #container
             [ngClass]="{ 'p-menu p-component': true, 'p-menu-overlay': popup }"
@@ -498,10 +647,25 @@ class Menu {
             [@.disabled]="popup !== true"
             (@overlayAnimation.start)="onOverlayAnimationStart($event)"
             (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
+            [attr.data-pc-name]="'menu'"
+            [id]="id"
         >
-            <ul class="p-menu-list p-reset" role="menu">
-                <ng-template ngFor let-submenu [ngForOf]="model" *ngIf="hasSubMenu()">
-                    <li class="p-menu-separator" *ngIf="submenu.separator" [ngClass]="{ 'p-hidden': submenu.visible === false }" role="separator"></li>
+            <ul
+                #list
+                class="p-menu-list p-reset"
+                role="menu"
+                [id]="id + '_list'"
+                [tabindex]="tabindex"
+                [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)"
+            >
+                <ng-template ngFor let-submenu let-i="index" [ngForOf]="model" *ngIf="hasSubMenu()">
+                    <li class="p-menuitem-separator" *ngIf="submenu.separator" [ngClass]="{ 'p-hidden': submenu.visible === false }" role="separator"></li>
                     <li
                         class="p-submenu-header"
                         [attr.data-automationid]="submenu.automationId"
@@ -510,44 +674,61 @@ class Menu {
                         pTooltip
                         [tooltipOptions]="submenu.tooltipOptions"
                         role="none"
+                        [attr.id]="menuitemId(id, i)"
                     >
                         <span *ngIf="submenu.escape !== false; else htmlSubmenuLabel">{{ submenu.label }}</span>
                         <ng-template #htmlSubmenuLabel><span [innerHTML]="submenu.label | safeHtml"></span></ng-template>
                     </li>
-                    <ng-template ngFor let-item [ngForOf]="submenu.items">
-                        <li class="p-menu-separator" *ngIf="item.separator" [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false }" role="separator"></li>
+                    <ng-template ngFor let-item let-j="index" [ngForOf]="submenu.items">
+                        <li class="p-menuitem-separator" *ngIf="item.separator" [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false }" role="separator"></li>
                         <li
                             class="p-menuitem"
                             *ngIf="!item.separator"
                             [pMenuItemContent]="item"
-                            [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false }"
+                            [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false, 'p-focus': focusedOptionId() && menuitemId(id, i, j) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
                             [ngStyle]="item.style"
                             [class]="item.styleClass"
+                            (onMenuItemClick)="itemClick($event)"
                             pTooltip
                             [tooltipOptions]="item.tooltipOptions"
-                            role="none"
+                            role="menuitem"
+                            [attr.data-pc-section]="'menuitem'"
+                            [attr.aria-label]="label(item.label)"
+                            [attr.data-p-focused]="isItemFocused(menuitemId(id, i, j))"
+                            [attr.data-p-disabled]="disabled(item.disabled)"
+                            [attr.aria-disabled]="disabled(item.disabled)"
+                            [attr.id]="menuitemId(id, i, j)"
+                            [id]="menuitemId(id, i, j)"
                         ></li>
                     </ng-template>
                 </ng-template>
-                <ng-template ngFor let-item [ngForOf]="model" *ngIf="!hasSubMenu()">
-                    <li class="p-menu-separator" *ngIf="item.separator" [ngClass]="{ 'p-hidden': item.visible === false }" role="separator"></li>
+                <ng-template ngFor let-item let-i="index" [ngForOf]="model" *ngIf="!hasSubMenu()">
+                    <li class="p-menuitem-separator" *ngIf="item.separator" [ngClass]="{ 'p-hidden': item.visible === false }" role="separator"></li>
                     <li
                         class="p-menuitem"
                         *ngIf="!item.separator"
                         [pMenuItemContent]="item"
-                        [ngClass]="{ 'p-hidden': item.visible === false }"
+                        [ngClass]="{ 'p-hidden': item.visible === false, 'p-focus': focusedOptionId() && menuitemId(id, i) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
                         [ngStyle]="item.style"
                         [class]="item.styleClass"
+                        (onMenuItemClick)="itemClick($event)"
                         pTooltip
                         [tooltipOptions]="item.tooltipOptions"
-                        role="none"
+                        role="menuitem"
+                        [attr.data-pc-section]="'menuitem'"
+                        [attr.aria-label]="label(item.label)"
+                        [attr.data-p-focused]="isItemFocused(menuitemId(id, i))"
+                        [attr.data-p-disabled]="disabled(item.disabled)"
+                        [attr.aria-disabled]="disabled(item.disabled)"
+                        [attr.id]="menuitemId(id, i)"
+                        [id]="menuitemId(id, i)"
                     ></li>
                 </ng-template>
             </ul>
         </div>
-    `, isInline: true, styles: [".p-menu-overlay{position:absolute;top:0;left:0}.p-menu ul{margin:0;padding:0;list-style:none}.p-menu .p-submenu-header{align-items:center}.p-menu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-menu .p-menuitem-text{line-height:1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: MenuItemContent, selector: "[pMenuItemContent]", inputs: ["pMenuItemContent"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".p-menu-overlay{position:absolute;top:0;left:0}.p-menu ul{margin:0;padding:0;list-style:none}.p-menu .p-submenu-header{align-items:center}.p-menu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-menu .p-menuitem-text{line-height:1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: MenuItemContent, selector: "[pMenuItemContent]", inputs: ["pMenuItemContent", "id"], outputs: ["onMenuItemClick"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: Menu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: Menu, decorators: [{
             type: Component,
             args: [{ selector: 'p-menu', template: `
         <div
@@ -561,10 +742,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             [@.disabled]="popup !== true"
             (@overlayAnimation.start)="onOverlayAnimationStart($event)"
             (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
+            [attr.data-pc-name]="'menu'"
+            [id]="id"
         >
-            <ul class="p-menu-list p-reset" role="menu">
-                <ng-template ngFor let-submenu [ngForOf]="model" *ngIf="hasSubMenu()">
-                    <li class="p-menu-separator" *ngIf="submenu.separator" [ngClass]="{ 'p-hidden': submenu.visible === false }" role="separator"></li>
+            <ul
+                #list
+                class="p-menu-list p-reset"
+                role="menu"
+                [id]="id + '_list'"
+                [tabindex]="tabindex"
+                [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)"
+            >
+                <ng-template ngFor let-submenu let-i="index" [ngForOf]="model" *ngIf="hasSubMenu()">
+                    <li class="p-menuitem-separator" *ngIf="submenu.separator" [ngClass]="{ 'p-hidden': submenu.visible === false }" role="separator"></li>
                     <li
                         class="p-submenu-header"
                         [attr.data-automationid]="submenu.automationId"
@@ -573,37 +769,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         pTooltip
                         [tooltipOptions]="submenu.tooltipOptions"
                         role="none"
+                        [attr.id]="menuitemId(id, i)"
                     >
                         <span *ngIf="submenu.escape !== false; else htmlSubmenuLabel">{{ submenu.label }}</span>
                         <ng-template #htmlSubmenuLabel><span [innerHTML]="submenu.label | safeHtml"></span></ng-template>
                     </li>
-                    <ng-template ngFor let-item [ngForOf]="submenu.items">
-                        <li class="p-menu-separator" *ngIf="item.separator" [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false }" role="separator"></li>
+                    <ng-template ngFor let-item let-j="index" [ngForOf]="submenu.items">
+                        <li class="p-menuitem-separator" *ngIf="item.separator" [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false }" role="separator"></li>
                         <li
                             class="p-menuitem"
                             *ngIf="!item.separator"
                             [pMenuItemContent]="item"
-                            [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false }"
+                            [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false, 'p-focus': focusedOptionId() && menuitemId(id, i, j) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
                             [ngStyle]="item.style"
                             [class]="item.styleClass"
+                            (onMenuItemClick)="itemClick($event)"
                             pTooltip
                             [tooltipOptions]="item.tooltipOptions"
-                            role="none"
+                            role="menuitem"
+                            [attr.data-pc-section]="'menuitem'"
+                            [attr.aria-label]="label(item.label)"
+                            [attr.data-p-focused]="isItemFocused(menuitemId(id, i, j))"
+                            [attr.data-p-disabled]="disabled(item.disabled)"
+                            [attr.aria-disabled]="disabled(item.disabled)"
+                            [attr.id]="menuitemId(id, i, j)"
+                            [id]="menuitemId(id, i, j)"
                         ></li>
                     </ng-template>
                 </ng-template>
-                <ng-template ngFor let-item [ngForOf]="model" *ngIf="!hasSubMenu()">
-                    <li class="p-menu-separator" *ngIf="item.separator" [ngClass]="{ 'p-hidden': item.visible === false }" role="separator"></li>
+                <ng-template ngFor let-item let-i="index" [ngForOf]="model" *ngIf="!hasSubMenu()">
+                    <li class="p-menuitem-separator" *ngIf="item.separator" [ngClass]="{ 'p-hidden': item.visible === false }" role="separator"></li>
                     <li
                         class="p-menuitem"
                         *ngIf="!item.separator"
                         [pMenuItemContent]="item"
-                        [ngClass]="{ 'p-hidden': item.visible === false }"
+                        [ngClass]="{ 'p-hidden': item.visible === false, 'p-focus': focusedOptionId() && menuitemId(id, i) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
                         [ngStyle]="item.style"
                         [class]="item.styleClass"
+                        (onMenuItemClick)="itemClick($event)"
                         pTooltip
                         [tooltipOptions]="item.tooltipOptions"
-                        role="none"
+                        role="menuitem"
+                        [attr.data-pc-section]="'menuitem'"
+                        [attr.aria-label]="label(item.label)"
+                        [attr.data-p-focused]="isItemFocused(menuitemId(id, i))"
+                        [attr.data-p-disabled]="disabled(item.disabled)"
+                        [attr.aria-disabled]="disabled(item.disabled)"
+                        [attr.id]="menuitemId(id, i)"
+                        [id]="menuitemId(id, i)"
                     ></li>
                 </ng-template>
             </ul>
@@ -635,17 +848,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], hideTransitionOptions: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
             }], onShow: [{
                 type: Output
             }], onHide: [{
                 type: Output
+            }], onBlur: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], listViewChild: [{
+                type: ViewChild,
+                args: ['list']
+            }], containerViewChild: [{
+                type: ViewChild,
+                args: ['container']
             }] } });
 class MenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: MenuModule, declarations: [Menu, MenuItemContent, SafeHtmlPipe], imports: [CommonModule, RouterModule, RippleModule, TooltipModule], exports: [Menu, RouterModule, TooltipModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MenuModule, imports: [CommonModule, RouterModule, RippleModule, TooltipModule, RouterModule, TooltipModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: MenuModule, declarations: [Menu, MenuItemContent, SafeHtmlPipe], imports: [CommonModule, RouterModule, RippleModule, TooltipModule], exports: [Menu, RouterModule, TooltipModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MenuModule, imports: [CommonModule, RouterModule, RippleModule, TooltipModule, RouterModule, TooltipModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, RippleModule, TooltipModule],