vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/panelmenu/PanelMenu.vue
View File

@ -10,7 +10,7 @@
<span class="p-menuitem-text">{{label(item)}}</span> <span class="p-menuitem-text">{{label(item)}}</span>
</a> </a>
</router-link> </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"> :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.items" :class="getPanelToggleIcon(item)"></span>
<span v-if="item.icon" :class="getPanelIcon(item)"></span> <span v-if="item.icon" :class="getPanelIcon(item)"></span>
@ -23,7 +23,7 @@
<div class="p-toggleable-content" v-show="isActive(item)" <div class="p-toggleable-content" v-show="isActive(item)"
role="region" :id="ariaId +'_content_' + index" :aria-labelledby="ariaId +'_header_' + index"> role="region" :id="ariaId +'_content_' + index" :aria-labelledby="ariaId +'_header_' + index">
<div class="p-panelmenu-content" v-if="item.items"> <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" /> :expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" :exact="exact" />
</div> </div>
</div> </div>
@ -64,7 +64,7 @@ export default {
if (this.isActive(item) && this.activeItem === null) { if (this.isActive(item) && this.activeItem === null) {
this.activeItem = item; this.activeItem = item;
} }
if (this.disabled(item)) { if (this.disabled(item)) {
event.preventDefault(); event.preventDefault();
return; return;
@ -83,11 +83,16 @@ export default {
this.activeItem = item; this.activeItem = item;
this.updateExpandedKeys({item: item, expanded: this.activeItem != null}); this.updateExpandedKeys({item: item, expanded: this.activeItem != null});
if (item.to && navigate) { if (item.to && navigate) {
navigate(event); navigate(event);
} }
}, },
onItemKeydown(event, item) {
if (event.which === 13) {
this.onItemClick(event, item);
}
},
updateExpandedKeys(event) { updateExpandedKeys(event) {
if (this.expandedKeys) { if (this.expandedKeys) {
let item = event.item; let item = event.item;

7
src/components/panelmenu/PanelMenuSub.vue
View File

@ -9,7 +9,7 @@
<span class="p-menuitem-text">{{label(item)}}</span> <span class="p-menuitem-text">{{label(item)}}</span>
</a> </a>
</router-link> </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'"> role="treeitem" :aria-expanded="isActive(item)" :tabindex="disabled(item) ? null : '0'">
<span :class="getSubmenuIcon(item)" v-if="item.items"></span> <span :class="getSubmenuIcon(item)" v-if="item.items"></span>
<span :class="['p-menuitem-icon', item.icon]"></span> <span :class="['p-menuitem-icon', item.icon]"></span>
@ -85,6 +85,11 @@ export default {
navigate(event); navigate(event);
} }
}, },
onItemKeydown(event, item) {
if (event.which === 13) {
this.onItemClick(event, item);
}
},
getItemClass(item) { getItemClass(item) {
return ['p-menuitem', item.className]; return ['p-menuitem', item.className];
}, },