The aria-expanded attribute informs screen readers whether an element is expanded or collapsed, while the aria-haspopup="menu" attribute indicates that the element has a popup submenu. However, when both aria-expanded and aria-haspopup attributes are included, VoiceOver does not announce the state of the aria-expanded attribute at all. This means that even if the aria-expanded attribute is updated via script to reflect the expanded or collapsed state, screen reader users are not informed about this status, leading to a usability issue. For a demonstration, I have created and shared a page at khsruru.com/menu.html. Please visit the page, turn on VoiceOver, focus on the fruit and vegetable buttons at the top, and try expanding or collapsing the menus. You can also examine the button code to see that, despite the correct implementation of the aria-expanded state updates via script, VoiceOver fails to announce these updates. I hope this issue can be resolved quickly.
<rdar://problem/123607952>