From 482e1380c300db36c6cea570dd46d710320fc37b Mon Sep 17 00:00:00 2001
From: FlipWarthog <flipwarthog@gmail.com>
Date: Thu, 17 Feb 2022 18:23:20 -0500
Subject: [PATCH] Fix #2181: PanelMenu 508 compliance issue

---
 src/components/panelmenu/PanelMenu.vue    | 13 +++++++++----
 src/components/panelmenu/PanelMenuSub.vue |  7 ++++++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/panelmenu/PanelMenu.vue b/src/components/panelmenu/PanelMenu.vue
index 02ca47c0a1..2f9a1b7538 100755
--- a/src/components/panelmenu/PanelMenu.vue
+++ b/src/components/panelmenu/PanelMenu.vue
@@ -10,7 +10,7 @@
                                 <span class="p-menuitem-text">{{label(item)}}</span>
                             </a>
                         </router-link>
-                        <a v-else :href="item.url" :class="getHeaderLinkClass(item)" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'"
+                        <a v-else :href="item.url" :class="getHeaderLinkClass(item)" @click="onItemClick($event, item)" @keydown="onItemKeydown($event, item)" :tabindex="disabled(item) ? null : '0'"
                             :aria-expanded="isActive(item)" :id="ariaId +'_header_' + index" :aria-controls="ariaId +'_content_' + index">
                             <span v-if="item.items" :class="getPanelToggleIcon(item)"></span>
                             <span v-if="item.icon" :class="getPanelIcon(item)"></span>
@@ -23,7 +23,7 @@
                     <div class="p-toggleable-content" v-show="isActive(item)"
                         role="region" :id="ariaId +'_content_' + index" :aria-labelledby="ariaId +'_header_' + index">
                         <div class="p-panelmenu-content" v-if="item.items">
-                            <PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item" 
+                            <PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item"
                                 :expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" :exact="exact" />
                         </div>
                     </div>
@@ -64,7 +64,7 @@ export default {
             if (this.isActive(item) && this.activeItem === null) {
                 this.activeItem = item;
             }
-            
+
             if (this.disabled(item)) {
                 event.preventDefault();
                 return;
@@ -83,11 +83,16 @@ export default {
                 this.activeItem = item;
 
             this.updateExpandedKeys({item: item, expanded: this.activeItem != null});
-        
+
             if (item.to && navigate) {
                 navigate(event);
             }
         },
+        onItemKeydown(event, item) {
+            if (event.which === 13) {
+                this.onItemClick(event, item);
+            }
+        },
         updateExpandedKeys(event) {
             if (this.expandedKeys) {
                 let item = event.item;
diff --git a/src/components/panelmenu/PanelMenuSub.vue b/src/components/panelmenu/PanelMenuSub.vue
index e048cf0d3c..c12103eeb2 100755
--- a/src/components/panelmenu/PanelMenuSub.vue
+++ b/src/components/panelmenu/PanelMenuSub.vue
@@ -9,7 +9,7 @@
                             <span class="p-menuitem-text">{{label(item)}}</span>
                         </a>
                     </router-link>
-                    <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)"
+                    <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)" @keydown="onItemKeydown($event, item)"
                         role="treeitem" :aria-expanded="isActive(item)" :tabindex="disabled(item) ? null : '0'">
                         <span :class="getSubmenuIcon(item)" v-if="item.items"></span>
                         <span :class="['p-menuitem-icon', item.icon]"></span>
@@ -85,6 +85,11 @@ export default {
                 navigate(event);
             }
         },
+        onItemKeydown(event, item) {
+            if (event.which === 13) {
+                this.onItemClick(event, item);
+            }
+        },
         getItemClass(item) {
             return ['p-menuitem', item.className];
         },