QMenus Are Not Compatible with QLists and QItems by Default
gmeben opened this issue · comments
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?
- Using Chrome 124 with axe DevTools installed, visit this CodePen of a
QMenu
with aQList
: https://codepen.io/quadbaup/pen/KKYExVq - Ensure you're authenticated on CodePen
- Click the Change View button and choose Debug mode
- Click the "Basic Menu" button to reveal the
QMenu
- Open Chrome Developer Tools, open the axe DevTools tab, and click "Scan ALL of my page"
- Note the issues detected, particularly
Element has children which are not allowed: [role=list]
- Visit this CodePen of a
QMenu
with noQList
and repeat steps 2 through 5: https://codepen.io/quadbaup/pen/vYMqbjN - Note the issues detected, particularly
Required ARIA parent role not present: list
- Visit this CodePen of a
QMenu
where eachQItem
has arole="menuitem"
attribute and repeat steps 2 through 5: https://codepen.io/quadbaup/pen/mdgZvvr - 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