Fix #2181: PanelMenu 508 compliance issue

pull/2187/head
FlipWarthog 2022-02-17 18:23:20 -05:00 committed by Tuğçe Küçükoğlu
parent 7d87bdaa79
commit a90690a115
2 changed files with 15 additions and 5 deletions

View File

@ -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;

View File

@ -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];
},