Confusing rules of aria-expanded

[kahlan88]

I've encountered conflicting information on aria-expanded attribute for menu buttons and listbox buttons.

https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element and https://a11yproject.com/patterns/ say to set it to false when the menu/dropdown is closed.

document.getElementById(id2).setAttribute('aria-expanded', 'false');

while https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html and https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html tell me otherwise:

The aria-expanded attribute is removed when the menu is closed.

We decided to go with false, but I am still not 100% sure which one is correct (or maybe both are?)

[JAWS-test]

I think both options are okay. Because of aria-haspopup, in one variant, you can perceive that there is something that can be faded in. In the other, it's perceptible due to aria-expanded=false.

[kahlan88]

If both are okay, I think it would be helpful if both were mentioned where this is described. Or it can be mentioned as optional attribute for elements with closed menus. I'm sure I'm not the only person scratching their head over this :-)

[mcking65]

The states and properties section of the menu button design pattern includes the following language:

When the menu is displayed, the element with role button has aria-expanded set to true . When the menu is hidden, it is recommended that aria-expanded is not present. If aria-expanded is specified when the menu is hidden, it is set to false .

It is common for the example implementations of the design patterns to include optional or recommended characteristics. However, this is not the first question about an optional behavior that is not documented as such on the example page. We could do better here. I opened #1320.