How can I fix this accessibility error for the aria-expanded attribute on my dropdown menu?

Accessibility Advocacy
1

I’m using AccessibleWeb to test accessibility in a form that includes a dropdown menu for selecting an item.

The aria-expanded attribute is set to false by default, changes to true when the menu opens, and returns to false after an item is selected and the menu closes. However, the scan tool indicates that this attribute is not allowed in that state.

“ARIA attribute is not allowed: aria-expanded=“false””

Why is it not permitted? The dropdown is not expanded; it has collapsed after selection.

The code structure is as follows (with actual IDs removed for simplicity):


<span role="combobox" id="id-bla-bla" tabindex="0" aria-haspopup="listbox" aria-expanded="false" aria-controls="bla-bla" aria-label="Label Text" class="class-bla-bla" aria-activedescendant="">Chosen Value</span>
2

You haven’t shared the full code snippet so I can only provide a response based on my assumption of what the problem could be.

  1. I hope the aria-controls refers to an existing id that contains the list of options that are supposed to be under the dropdown. If it references to a non-existent element, that might be the reason why you’re being thrown an “aria-expanded not allowed” error - perhaps the system thinks there is nothing to expand there.
  2. Try changing the role to a listbox instead of a combobox
3

changing role to a listbox fixed thanks