vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-11 01:42:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed #108 - Enhance ARIA roles and attributes for the components

Browse source
This commit is contained in:
cagataycivici 2019-12-26 14:24:53 +03:00
parent 8ebfefd7fa
commit 1dbdf3c310
100 changed files with 590 additions and 287 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/panelmenu/PanelMenuSub.vue
View file

@ -1,12 +1,14 @@
<template>
<ul class="p-submenu-list">
<ul class="p-submenu-list" role="tree">
<template v-for="(item, i) of model">
<li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)"
role="treeitem" :aria-expanded="isActive(item)">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)">
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)"
role="treeitem" :aria-expanded="isActive(item)">
<span :class="getSubmenuIcon(item)" v-if="item.items"></span>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
@ -62,8 +64,11 @@ export default {
getItemClass(item) {
return ['p-menuitem', item.className, {'p-disabled': item.disabled}];
},
isActive(item) {
return item === this.activeItem;
},
getSubmenuIcon(item) {
const active = (item === this.activeItem);
const active = this.isActive(item);
return ['p-panelmenu-icon pi pi-fw', {'pi-caret-right': !active, 'pi-caret-down': active}];
}
}