I am building a Web Application with React, HTML and JavaScript. I notice that when I use the application with Android's TalkBack, the trap focus zone of modals is not respected.
Test Conditions
Galaxy S20 FE
Android 11
Accessibility version 12.5.02.1
Browser: Edge Canary 98.0.1077.0
Steps to Reproduce
Navigate to this website: https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/datepicker-dialog.html
Turn TalkBack on.
Navigate to the Date picker calendar button using swipe and double tap to activate.
Navigate around the date picker calendar modal dialog using swipe.
Notice that you can navigate outside the modal.
Being able to navigate outside a modal dialog is not a great user experience from an accessibility standpoint especially not for screen reader users.
Why does TalkBack do this and how can I fix it?