Accessibility on Navigation Dropdown

[dannikb]

I’m running an accessibility audit on a Pro site. One of the issues that is being flagged (using ScreamingFrog, which uses axe) is “ARIA Attributes Require Valid Values” pointing to “.x-anchor-toggle” (the navigation dropdown element).

I think the issue is that this element is using:
aria-haspopup=“true”
but aria-haspopup has a possible value of “menu,” which some versions of axe-core prefer as a more explicit value.

Is there a way to remove the “true” value and replace it with “menu” and/or should this be the default on that element?

[prakash_s]

Hello @dannikb,

Thanks for writing to us.

I would suggest you go to the Navigation Dropdown element -> Customize tab->Toggle Custom Attributes->Click on the plus icon, add these attributes

 Name: aria-haspopup
Value: menu

Please have a look at the given screenshot below.

Hope it helps
Thanks

[dannikb]

Thank you! That seems to work. However, that helped me also identify that, when in the open state, it’s using aria-hidden=“false”, but this is technically not the same as removing aria-hidden entirely. The WAI-ARIA spec notes that aria-hidden=“false” is essentially meaningless — the correct open state is to remove the attribute entirely rather than set it to “false”.