primevue
primevue copied to clipboard
primefaces
Menubar: ARIA attribute 'aria-level' is not allowed with role
Describe the bug
aria-level property can be used with roles: heading, listitem, row, or treeitem. The <li> elements used to create the menu items use the menuitem role. This role does not allow for the aria-level attribute.
Line where attribute is added to the Menubar component is here: https://github.com/primefaces/primevue/blob/0f9cd792c553dc15ef355fc0a9a662d373e1a6f8/packages/primevue/src/menubar/MenubarSub.vue#L14
As similar issue has been filed for the TieredMenu component:
- #4611
HTML from PrimeVue website, Menubar - Basic
<div class="p-menubar p-component" data-pc-name="menubar" data-pc-section="root" pc168=""><!---->
<a role="button" tabindex="0" class="p-menubar-button" aria-haspopup="true" aria-expanded="false"
aria-label="Navigation" data-pc-section="button" aria-controls="pv_id_88">
</a>
<ul class="p-menubar-root-list" data-pc-section="rootlist" id="pv_id_88_list" role="menubar" tabindex="0">
<li id="pv_id_88_0" class="p-menubar-item" role="menuitem" aria-label="Home" aria-level="1" aria-setsize="4"
aria-posinset="1" data-pc-section="item" data-p-active="false" data-p-focused="false">
<div class="p-menubar-item-content" data-pc-section="itemcontent">
<a class="p-menubar-item-link" tabindex="-1" data-pc-section="itemlink">
<span class="p-menubar-item-icon pi pi-home" data-pc-section="itemicon"></span>
<span id="pv_id_88_0_label" class="p-menubar-item-label"
data-pc-section="itemlabel">Home</span><!---->
</a>
</div><!---->
</li><!---->
<li id="pv_id_88_1" class="p-menubar-item" role="menuitem" aria-label="Features" aria-level="1" aria-setsize="4"
aria-posinset="2" data-pc-section="item" data-p-active="false" data-p-focused="false">
<div class="p-menubar-item-content" data-pc-section="itemcontent">
<a class="p-menubar-item-link" tabindex="-1" data-pc-section="itemlink">
<span class="p-menubar-item-icon pi pi-star" data-pc-section="itemicon"></span>
<span id="pv_id_88_1_label" class="p-menubar-item-label"
data-pc-section="itemlabel">Features</span><!---->
</a>
</div><!---->
</li><!---->
<li id="pv_id_88_2" class="p-menubar-item" role="menuitem" aria-label="Projects" aria-expanded="false"
aria-haspopup="menu" aria-level="1" aria-setsize="4" aria-posinset="3" data-pc-section="item"
data-p-active="false" data-p-focused="false">
<div class="p-menubar-item-content" data-pc-section="itemcontent"><a class="p-menubar-item-link"
tabindex="-1" data-pc-section="itemlink">
<span class="p-menubar-item-icon pi pi-search" data-pc-section="itemicon"></span>
<span id="pv_id_88_2_label" class="p-menubar-item-label" data-pc-section="itemlabel">Projects</span>
</a>
</div>
<ul class="p-menubar-submenu" data-pc-section="submenu" id="pv_id_88_2_list" role="menu"
aria-labelledby="pv_id_88_2_label" style="display: none;">
<li id="pv_id_88_2_0" class="p-menubar-item" role="menuitem" aria-label="Components" aria-level="2"
aria-setsize="4" aria-posinset="1" data-pc-section="item" data-p-active="false"
data-p-focused="false">
<div class="p-menubar-item-content" data-pc-section="itemcontent">
<a class="p-menubar-item-link" tabindex="-1" data-pc-section="itemlink">
<span class="p-menubar-item-icon pi pi-bolt" data-pc-section="itemicon"></span>
<span id="pv_id_88_2_0_label" class="p-menubar-item-label"
data-pc-section="itemlabel">Components</span><!---->
</a>
</div><!---->
</li><!---->
<li id="pv_id_88_2_1" class="p-menubar-item" role="menuitem" aria-label="Blocks" aria-level="2"
aria-setsize="4" aria-posinset="2" data-pc-section="item" data-p-active="false"
data-p-focused="false">
<div class="p-menubar-item-content" data-pc-section="itemcontent">
<a class="p-menubar-item-link" tabindex="-1" data-pc-section="itemlink">
<span class="p-menubar-item-icon pi pi-server" data-pc-section="itemicon"></span>
<span id="pv_id_88_2_1_label" class="p-menubar-item-label"
data-pc-section="itemlabel">Blocks</span><!---->
</a>
</div>
<!---->
</li><!---->
<li id="pv_id_88_2_2" class="p-menubar-item" role="menuitem" aria-label="UI Kit" aria-level="2"
aria-setsize="4" aria-posinset="3" data-pc-section="item" data-p-active="false"
data-p-focused="false">
<div class="p-menubar-item-content" data-pc-section="itemcontent">
<a class="p-menubar-item-link" tabindex="-1" data-pc-section="itemlink">
<span class="p-menubar-item-icon pi pi-pencil" data-pc-section="itemicon"></span>
<span id="pv_id_88_2_2_label" class="p-menubar-item-label" data-pc-section="itemlabel">UI
Kit</span><!---->
</a>
</div>
<!---->
</li><!---->
<li id="pv_id_88_2_3" class="p-menubar-item" role="menuitem" aria-label="Templates"
aria-expanded="false" aria-haspopup="menu" aria-level="2" aria-setsize="4" aria-posinset="4"
data-pc-section="item" data-p-active="false" data-p-focused="false">
<div class="p-menubar-item-content" data-pc-section="itemcontent">
<a class="p-menubar-item-link" tabindex="-1" data-pc-section="itemlink">
<span class="p-menubar-item-icon pi pi-palette" data-pc-section="itemicon"></span>
<span id="pv_id_88_2_3_label" class="p-menubar-item-label"
data-pc-section="itemlabel">Templates</span>
</a>
</div>
<ul class="p-menubar-submenu" data-pc-section="submenu" id="pv_id_88_2_3_list" role="menu"
aria-labelledby="pv_id_88_2_3_label" style="display: none;">
<li id="pv_id_88_2_3_0" class="p-menubar-item" role="menuitem" aria-label="Apollo"
aria-level="3" aria-setsize="2" aria-posinset="1" data-pc-section="item"
data-p-active="false" data-p-focused="false">
<div class="p-menubar-item-content" data-pc-section="itemcontent">
<a class="p-menubar-item-link" tabindex="-1" data-pc-section="itemlink">
<span class="p-menubar-item-icon pi pi-palette" data-pc-section="itemicon"></span>
<span id="pv_id_88_2_3_0_label" class="p-menubar-item-label"
data-pc-section="itemlabel">Apollo</span><!---->
</a>
</div><!---->
</li><!---->
<li id="pv_id_88_2_3_1" class="p-menubar-item" role="menuitem" aria-label="Ultima"
aria-level="3" aria-setsize="2" aria-posinset="2" data-pc-section="item"
data-p-active="false" data-p-focused="false">
<div class="p-menubar-item-content" data-pc-section="itemcontent">
<a class="p-menubar-item-link" tabindex="-1" data-pc-section="itemlink">
<span class="p-menubar-item-icon pi pi-palette" data-pc-section="itemicon"></span>
<span id="pv_id_88_2_3_1_label" class="p-menubar-item-label"
data-pc-section="itemlabel">Ultima</span><!---->
</a>
</div><!---->
</li><!---->
</ul>
</li><!---->
</ul>
</li><!---->
<li id="pv_id_88_3" class="p-menubar-item" role="menuitem" aria-label="Contact" aria-level="1" aria-setsize="4"
aria-posinset="4" data-pc-section="item" data-p-active="false" data-p-focused="false">
<div class="p-menubar-item-content" data-pc-section="itemcontent">
<a class="p-menubar-item-link" tabindex="-1" data-pc-section="itemlink">
<span class="p-menubar-item-icon pi pi-envelope" data-pc-section="itemicon"></span>
<span id="pv_id_88_3_label" class="p-menubar-item-label"
data-pc-section="itemlabel">Contact</span><!---->
</a>
</div><!---->
</li><!---->
</ul><!---->
</div>
Reproducer
https://stackblitz.com/edit/primevue-4-vite-issue-template-ssuvbm
PrimeVue version
4.0.7
Vue version
3.x
Language
ALL
Build / Runtime
Nuxt
Browser(s)
No response
Steps to reproduce the behavior
No response
Expected behavior
No response
We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
I'm not sure why this is marked as Cannot Replicate, as the PrimeVue website currently exhibits this behavior.
If we go in the Menubar documentation, and we inspect the first menu item (Home) under the "Basic" section, we can clearly see that the <li> tag has role="menuitem" and also specifies a aria-level attribute. Which isn't allowed.
I confirm this is an issue
It says that primevue respects even higher standards than WCAG 2.0 so I think this should be adressed
https://primevue.org/guides/accessibility/
