In our Angular app, we have a button that is responsible for opening a menu. There is a directive residing on it that contains the logic for toggling the menu. Menu in our case is just a list of elements expanded vertically, that gives a user a choice of options.
We want to make this button accessible and follow all the WCAG. Therefore we applied aria-expanded attributes to it among others.
<button
(click)="onClick($event)"
(keydown)="onKeydown($event)"
[attr.aria-label]="'Open menu'"
[attr.aria-expanded]="isMenuOpen"
[attr.aria-haspopup]="true">
Open the menu
</button>
On Chrome the screen reader correctly announces the expanded or collapsed state. However, when we try to do the same on VoiceOver + Safari on macOS there is no such announcement.
What could be causing this issue?