Field notes on using `aria-haspopup` attribute
Posted on
After my team was reported an accessibility issue on one our components
incorrectly using aria-haspopup attribute, I researched around this is
what I understood...
We should use aria-haspopup when:
- A control triggers some "popup" that appears on top of other content
- The designated "popup" is either of the following roles:
menulistboxtreegriddialog
It is worth noting that using aria-haspopup="true", i.e. with true instead
of either false or any of the roles cited above, it resolves to the default
menu role.
By looking at the ARIA reference documentation on the menu role, it
refers to a menu "similar to a menu on a desktop application".
Moreover such menu are navigated with arrow keys, according to the ARIA authoring practices guide article on the Menu button pattern.
If, like my team, your targeted "popup" is a list of links wrapped into a list,
with implicit role=list like a <ul> of <ol>, and is expected to be
navigated with Tab, it does not qualify as a "popup" in the sense
aria-haspopup refer to.
All this to say...
Be wary when using aria-haspopup as you may unwillingly convey the wrong
signals to assistive technology users and create a disorienting and inefficient
user experience.