I have a modal and I don't want voiceover to read the content behind it. Setting aria-modal=true should've been enough but then I saw that VoiceOver does not support this behaviour out of the box like better screen readers like NVDA and JAWS.
https://a11ysupport.io/tech/aria/aria-modal_attribute#support-table-2
And it says that authors can implement this functionality on their own for VoiceOver. I have successfully trapped the keyboard focus inside the modal (using the tab key) with JS but voiceover is going behind the content when I use the arrow keys. How can I achieve this? My modal is structured like this:-
<div
role="dialog"
aria-modal="true"
aria-labelledby="title"
aria-describedby="description"
tabindex="-1"
>
<div class="sticky-header">
<h2 id="title" class="title">
This is a heading
</h2>
</div>
<div class="modal-content">
<p id="description">
This is a paragraph.
</p>
</div>
<div class="sticky-footer">
<button
type="button"
>
Cancel
</button>
<a href="#">
Proceed
</a>
</div>
</div>
I had this issue as well. With voice over the user can "click" outside and swipe out of the dialog. I believe this is a issue with VoiceOver, and I could not find any solution on the web. It's not the best solution but what I ended up with was to add a boolean to the open/close dialog event. Then use the boolean with aria-hidden
<div [attr.aria-hidden]="IsMenuOpen">content behind menu</div>
<button (click)="openMenu(); isMenuOpen = !isMenuOpen" ></button>