JAWS - heading in skipped in popup dialog box

[UiTeamIntegra]

Steps to recreate:

1. access page Link
2. select any --> modal open modal
3. navigate using key down button through the dialog box

Expected result:
Focus should be available in the 'Title' heading

Actual result:
Focus skips 'Title' heading

Environment
OS Version : Windows10 Windows8
JAWS Version : 2020.2004.66 ILM
Chrome Version : 87

[StommePoes]

Note to devs: "Focus" should not be available (title should NOT have tabindex), however when browsing in JAWS using the DownArrow key, the title should be readable like any other content.

[StommePoes]

Devs: See related ticket #53

The issue is that all versions of the modal (excepting the last one "Open modal that wrapps app instead of creating wrapper div") are inside the body element which has aria-hidden="true".

This means everything inside the web page is deliberately hidden from assistive technologies, and is not how modal dialogs should be created. This is a very very old react-modal bug which I thought had been fixed years ago.

aria-hidden must be set on something containing all the web page content except the modal. Setting aria-hidden on an ancestor of the modal means the modal is also hidden.

@UiTeamIntegra for now when creating modal dialogs with this component, restrict yourselves to the "Open modal that wrapps app instead of creating wrapper div" version. This is the only one which is coded correctly.