Upon clicking the button with appropriate Javascript to toggle aria-expanded property of the button.
Narrator/edge will announce the epanded/collapsed property in every click in this case. Notice role="tab" is missing.
<div role="tablist" aria-label="Entertainment">
<button aria-expanded="false" tabindex="0">
Nils Frahm
</button>
<button aria-expanded="false" tabindex="1">
Agnes Obel
</button>
</div>
I need role="tab" and aria-expanded property at the same time. This works fine with Chrome/NVDA but with Narrator/edge combination only the initial state of expand/collapse is announced. In the subsequent click, the narrator is silent.
<div role="tablist" aria-label="Entertainment">
<button role="tab"aria-expanded="false" tabindex="0">
Nils Frahm
</button>
<button role="tab" aria-expanded="false" tabindex="1">
Agnes Obel
</button>
</div>
I tried looking for information in the web but there isn't much out there. So, giving this a shot. Any help is appreciated.