focus moving out of modal in scan mode

问题

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?

回答1:

If you make your modal window a "sibling" of your main page, then you can add aria-hidden to the main window and that will prevent the up/down arrow keys from navigating outside the modal.

Initially hidden modal window:

<body>
  <div>
    <!-- main page -->
  </div>
  <div style="display:none">
    <!-- modal window -->
  </div>
</body>

Visible modal window

<body>
  <div aria-hidden="true">
    <!-- main page -->
  </div>
  <div style="display:block">
    <!-- modal window -->
  </div>
</body>

来源：https://stackoverflow.com/questions/53965676/focus-moving-out-of-modal-in-scan-mode

标签

javascript

angular

modal-dialog

accessibility