MenuBar: ARIA attribute is not allowed: aria-level="1"

[ali-418]

Describe the bug

Reopen of #6401. The issue was closed with the Cannot Replicate label but the issue is still present.

Quoted from #6401:

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.

This is also flagged by the Accessibility Insights for Web tool. (aria-allowed-attr)

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/dj98txgi

Environment

PrimeVue 4 and Nuxt 3. However, the issue is also present on the PrimeVue website (https://primevue.org/menubar/)

Vue version

3

PrimeVue version

4.2.5

Node version

20.17.0

Browser(s)

No response

Steps to reproduce the behavior

1. Go to the reproducer
2. Open the preview in a new tab and connect to project (this is important for the next step)
3. Run the Accessibility Insights for Web extension and select the FastPass option
4. The extension reports error for aria-allowed-attr (WCAG 4.1.2)

Expected behavior

Accessibility Insights for Web reports no error for aria-allowed-attr

[tugcekucukoglu]

References:

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role
• https://www.w3.org/WAI/ARIA/apg/patterns/menubar/