QMenus Are Not Compatible with QLists and QItems by Default

[gmeben]

What happened?

The documentation for QMenu currently states:

Goes very well with QList as dropdown content, but it’s by no means limited to it.

Using axe DevTools to test a Basic QMenu as shown in the documentation reveals that elements with role=list (QList) as child elements of elements with role=menu (QMenu) violates WCAG Success Criteria 1.3.1: Info and Relationships.

Removing the QList component from QMenu then reveals another violation of WCAG Success Criteria 1.3.1: Info and Relationships.

A workaround in the meantime is to add role="menuitem attributes to each of the QItem elements contained within the QMenu. The fact that these attributes have to be added individually to each QItem element in order to avoid a WCAG Success Criteria violation indicates a failure within the design of QMenu that needs to be redressed by maintainers.

What did you expect to happen?

Usages of QItem within QMenu should have role="menuitem" attributes automatically applied by default to avoid WCAG Success Criteria violations.

Reproduction URL

https://codepen.io/quadbaup/pen/KKYExVq

How to reproduce?

1. Using Chrome 124 with axe DevTools installed, visit this CodePen of a QMenu with a QList: https://codepen.io/quadbaup/pen/KKYExVq
2. Ensure you're authenticated on CodePen
3. Click the Change View button and choose Debug mode
4. Click the "Basic Menu" button to reveal the QMenu
5. Open Chrome Developer Tools, open the axe DevTools tab, and click "Scan ALL of my page"
6. Note the issues detected, particularly Element has children which are not allowed: [role=list]
7. Visit this CodePen of a QMenu with no QList and repeat steps 2 through 5: https://codepen.io/quadbaup/pen/vYMqbjN
8. Note the issues detected, particularly Required ARIA parent role not present: list
9. Visit this CodePen of a QMenu where each QItem has a role="menuitem" attribute and repeat steps 2 through 5: https://codepen.io/quadbaup/pen/mdgZvvr
10. Note there are no issues detected

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response