Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions.

[danderson421]

Lighthouse reports new error:

Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions.

What are the steps to reproduce this issue?

1. Go to https://mandrasch.github.io/accessible-menu-bootstrap-examples/bs5-examples/
2. Run Lighthouse
3. See error

[danderson421]

.dropdown-menu should probably be role="group" instead of a menubar within a menubar, but I'm not expert.

I believe the issue is that there is a menubar within a menubar when using a dropdown menu

[NickDJM]

@danderson421 yup, that's definitely a bug!

Submenus should be role "menu". This is probably an upstream issue, so we'll fix it in accessible-menu and that it'll update here as well.

https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/

[NickDJM]

I have the changes pushed up in MRs which I'll merge in shortly and get releases for 3.x and 4.x out.

Here are some screenshots of lighthouse/axe/wave tests with the fix applied (using the demo site in 4.x).

Lighthouse

Axe

Wave

[NickDJM]

It's probably also worth looking into automated lighthouse tests so prevent these kinds of bugs in the future. I'll need to look into that.

[danderson421]

Thanks! Love the script.

[NickDJM]

@danderson421 Glad to hear it!

This change is now captured in v1.0.3 (and also in the latest releases of the beta, main accessible-menu project, and the bs4 version).