I am trying to fix an accessibility bug for screen reader in an Angular2 web application(SAP). The problem is in SCAN MODE with Edge, when the modal is open and using up and down arrows to travel through focusable elements, the focus moving out to the area outside the modal. However, in normal mode, if tabbing through elements in the modal, the focus never goes out of the modal.
The goal is to achieve the same experience as normal mode in scan mode.
Here is the structure of modal with other components, for example the modal is part of componentA:
componentA.html
<div>
<form>
</form>
<modal-window></modal-window>
</div>
The componentA is the body of the html page. The html page also contains other components i.e. the header component and footer component. The modal is NOT implemented by dialog, but a div and it uses variable to control if the div should be visible or not.
What is the right way to achieve my goal?