Add exclusion to Improper Use of Link rule if role="menuitem" AND aria-expanded is present

[amberhinds]

Improper use of link should not flag a link that looks like this: <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false">Mega Menu</a>

This is in reference to this support ticket on dot org.

See also this conversation in the WordPress Accessibility Facebook group.

The consensus is that though it would be better if it were an actual button element, adding role="menuitem" and aria-haspopup="true" to a link is sufficient for screen reader users.

Thanks, @alexstine and @digitala11y for contributing to the discussion.

[SteveJonesDev]

@amberhinds, does this look correct?

[amberhinds]

Sorry, I think it needs a slight tweak. I re-listened to these with VoiceOver and I think it needs aria-expanded.

I'll show you in the Zoom call we're about to have.

[digitala11y]

@amberhinds The aria-haspopup is identified as has submenu by screen reader on NVDA, so do we need aria-expanded here? Voiceover announces menu item menu popup which can also be sufficient to expose that there are sub menus.

https://www.w3.org/WAI/ARIA/apg/example-index/menubar/menubar-navigation Tried the above example on iPhone IOS, screen reader does not seem to open the sub-menus and announce the aria-expanded state. Double tapping does not seem to perform any action.

Is there a specification note somewhere in ARIA 1.1 that we need to have aria-expanded along with aria-haspopup?

Aria-haspopup individually must be able to convey the semantics.

[amberhinds]

@digitala11y - I tested a ton of the different options with VoiceOver.
This code <a href="#" aria-haspopup="true">Menu 1</a> reads as "Menu, popup link, Menu 1" which sounds OK to me.

This code: <a href="#" role="menuitem" aria-haspopup="true">Menu 2</a> reads as "Menu 2, menuitem" even though it has aria-haspopup set to true. It doesn't tell me that there is a popup, so I think that the menu item role is conflicting or overriding somehow. Possibly this is my verbosity setting on VoiceOver, but it seems problematic.

If I add aria-expanded then it announces the popup. This code, for example, <a href="#" aria-expanded="true" aria-haspopup="true">Menu 3</a> reads as "Menu popup expanded, link, Menu 3."

That was why we decided to base the exclusion on the aria-expanded rather than aria-haspopup.

[amberhinds]

We got another support ticket asking about the improvement on the logic on this rule.

[amberhinds]

I updated the title to represent where this landed.

[SteveJonesDev]

@boonedev, this is the hotfix branch I started this on. https://github.com/equalizedigital/accessibility-checker/tree/hotfix/Improper-use-of-link-enhancements