Open UiTeamIntegra opened 3 years ago
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.
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.
Steps to recreate:
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