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

aria-labelledby enhancements for submenus

pull/5011/head
tugcekucukoglu 2023-12-28 11:04:57 +03:00
parent c1a78ef922
commit 6d6516cc61
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/lib/contextmenu/ContextMenuSub.vue
View File

@ -25,7 +25,7 @@
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)"> <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" /> <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
<span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span> <span :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')"> <template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions('submenuicon', processedItem, index)" /> <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions('submenuicon', processedItem, index)" />
@ -50,6 +50,7 @@
:unstyled="unstyled" :unstyled="unstyled"
@item-click="$emit('item-click', $event)" @item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)" @item-mouseenter="$emit('item-mouseenter', $event)"
:aria-labelledby="getItemLabelId(processedItem)"
v-bind="ptm('submenu')" v-bind="ptm('submenu')"
/> />
</li> </li>
@ -129,6 +130,9 @@ export default {
getItemLabel(processedItem) { getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label'); return this.getItemProp(processedItem, 'label');
}, },
getItemLabelId(processedItem) {
return `${this.menuId}_${processedItem.key}_label`;
},
getPTOptions(key, processedItem, index) { getPTOptions(key, processedItem, index) {
return this.ptm(key, { return this.ptm(key, {
context: { context: {
@ -202,6 +206,7 @@ export default {
}; };
} }
}, },
components: { components: {
AngleRightIcon: AngleRightIcon AngleRightIcon: AngleRightIcon
}, },

6
components/lib/menubar/MenubarSub.vue
View File

@ -24,7 +24,7 @@
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')"> <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" /> <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span> <span :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')"> <template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
<component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" /> <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
@ -44,6 +44,7 @@
:activeItemPath="activeItemPath" :activeItemPath="activeItemPath"
:templates="templates" :templates="templates"
:level="level + 1" :level="level + 1"
:aria-labelledby="getItemLabelId(processedItem)"
:pt="pt" :pt="pt"
:unstyled="unstyled" :unstyled="unstyled"
@item-click="$emit('item-click', $event)" @item-click="$emit('item-click', $event)"
@ -127,6 +128,9 @@ export default {
getItemLabel(processedItem) { getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label'); return this.getItemProp(processedItem, 'label');
}, },
getItemLabelId(processedItem) {
return `${this.menuId}_${processedItem.key}_label`;
},
getPTOptions(processedItem, index, key) { getPTOptions(processedItem, index, key) {
return this.ptm(key, { return this.ptm(key, {
context: { context: {