Accessibility issue: focus can move behind modals

[scoutb-cogapp]

UV version: [email protected]

I'm submitting a: bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below

Page area

modals (any boxes that open over the content of the page)

Issue description

Focus is not contained when modals are open. It moves outside the modal and through the elements behind on the darkened page. This can cause focus to disappear completely behind the modal which must never happen. Even in the best case where focus is not completely covered, it is not very visible because the page behind the modal is darkened which can make it hard to navigate back to the modal to close it after the user accidentally moved outside it.

examples:

• settings modal
• download modal
• share modal
• info modal (available on slim screens only)

Note that in some cases this applies to the beginning of tabbing. For example when the download button is activated, focus first moves to the share button next to the download button and only after that into the download modal.

Steps to reproduce

1. open this manifest
2. Use keyboard navigation to open any of the listed modals
3. Continue tabbing to observe that focus moves outside the modal and in some cases even partially behind it.

Expected behaviour

1. Focus should move straight into the modal and navigate through the items inside the modal in a logical order.
2. Focus should be trapped within modals so the user is forced to close the modal before continuing to navigate the main part of the page. This prevents focus from moving behind.

WCAG criterion

2.4.11 Focus Not Obscured (Minimum) (AA)

[hannahb-cogapp]

For instance, when <div class="overlay download"> is open, tab goes behind it to <button class="share btn imageBtn" title="Share">