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

TieredMenu: aria-labelledby enhancements for submenus

pull/5011/head
tugcekucukoglu 2023-12-29 11:34:58 +03:00
parent 01f5ec2337
commit 172e14e627
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/tieredmenu/TieredMenuSub.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(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" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" /> <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
@ -38,6 +38,7 @@
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'" :id="getItemId(processedItem) + '_list'"
:style="sx('submenu', true, { processedItem })" :style="sx('submenu', true, { processedItem })"
:aria-labelledby="getItemLabelId(processedItem)"
role="menu" role="menu"
:menuId="menuId" :menuId="menuId"
:focusedItemId="focusedItemId" :focusedItemId="focusedItemId"
@ -125,6 +126,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: {