Skip to content

Commit

Permalink
Fix #2181: PanelMenu 508 compliance issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@FlipWarthog @tugcekucukoglu
FlipWarthog authored and tugcekucukoglu committed Feb 18, 2022
1 parent 7d87bda commit a90690a
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 5 deletions.
13 changes: 9 additions & 4 deletions src/components/panelmenu/PanelMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -64,7 +64,7 @@ export default {
if (this.isActive(item) && this.activeItem === null) {
this.activeItem = item;
}
if (this.disabled(item)) {
event.preventDefault();
return;
Expand All @@ -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;
Expand Down
7 changes: 6 additions & 1 deletion src/components/panelmenu/PanelMenuSub.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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];
},
Expand Down

1 comment on commit a90690a

@yangdachaun
Copy link

@yangdachaun yangdachaun commented on a90690a Feb 18, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<PanelMenu :model="items"> <template #item="{item}"> <router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"> <a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}>{{route.fullPath}}</a> </router-link> </template> </PanelMenu>

<a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}>{{route.fullPath}}</a>
should be changed to
<a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}">{{route.fullPath}}</a>

Using the code in the document, the style is messed up

Please sign in to comment.