Skip to content

Accessibility: WAI-ARIA roles nesting wrong in menu #35889

@plastikschnitzer

Description

@plastikschnitzer

Preconditions and environment

  • Magento 2.4.4
  • Blank theme, Luma theme

Steps to reproduce

Navigate to storeview
analyze html code of menu for correct ARIA markup

Expected result

Menu should be structured according to ARIA schema the following way:

<ul role="menu">
 <li role="none">
  <a href="" role="menuitem">link</a>
 </li>
</ul>

Actual result

<ul role="menu">
 <li>
  <a href="" role="menuitem">link</a>
 </li>
</ul>

As the li tag has no role, the child element for the menu role is missing and the parent element for the menuitem role is missing.

Users who rely on accessibility tools might run into a deadend here.

Additional information

This is also a ranking factor for search engines and part of the lighthouse check, should be fixed!

Release note

No response

Triage and priority

  • Severity: S0 - Affects critical data or functionality and leaves users without workaround.
  • Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
  • Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
  • Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
  • Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

Metadata

Metadata

Labels

Type

No type

Projects

Status

Pull Request in Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions