Dropdown menu example uses non-ideal pattern

[aardrian]

Issue

The pattern at this URL: https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-navigation-dropdown

• Puts the menuitem role on the <li>,
• Leaves the <a> with its native role,
• As a result of the previous two items, breaks from the APG ARIA menu pattern,
• The aria-haspopup value should probably be menu,
• It may benefit from aria-expanded on the top-level items.

Further:

• In Chrome/Windows, the sub-menu does not close when mousing away from its parent; some other interaction is needed.
• This menu will not pass a WCAG 2.1 audit because it does not dismiss on Esc; I know the language says WCAG 2.0, but with WCAG 2.1 out at least some disclaimer should be on the page.
• Despite the APG efforts, ARIA menus should not be promoted for web use; I have written about this (Don’t Use ARIA Menu Roles for Site Nav), Marco Zehe has written similar, and there is an open issue against the APG pattern promoting it as web navigation.

[cehfisher]

Thanks for your feedback on this pattern! I will work on updating it and putting a more obvious note about the WCAG level of this pattern. Thanks!

[aardrian]

Pinging this again because I had a client reference it today.

[cehfisher]

Removing this pattern until I have time to review it.