Fixed #10771 - Menu | Keyboard Support

primefaces · Oct 25, 2021 · c3d7f0c · c3d7f0c
1 parent 617ac71
commit c3d7f0c
Showing 1 changed file with 56 additions and 2 deletions.
diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts
@@ -11,13 +11,13 @@ import {TooltipModule} from 'primeng/tooltip';
 @Component({
     selector: '[pMenuItemContent]',
     template: `
-        <a *ngIf="!item.routerLink" [attr.href]="item.url||null" class="p-menuitem-link" [attr.tabindex]="item.disabled ? null : '0'" [attr.data-automationid]="item.automationId" [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
+        <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" [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
             [ngClass]="{'p-disabled':item.disabled}" (click)="menu.itemClick($event, item)" role="menuitem">
             <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></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"></span></ng-template>
         </a>
-        <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [attr.data-automationid]="item.automationId" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'"
+        <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" [attr.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">
@@ -40,6 +40,60 @@ export class MenuItemContent {
     constructor(@Inject(forwardRef(() => Menu)) menu) {
         this.menu = menu as 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) {
+                    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;
+    }
+
+    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;
+    }
 }
 
 @Component({