search

Pearson-Higher-Ed / modal

https://pearson-higher-ed.github.io/modal/#/
MIT License
0 stars 1 forks source link

JAWS - heading in skipped in popup dialog box #52

Open UiTeamIntegra opened 3 years ago

UiTeamIntegra commented 3 years ago

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 commented 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.

StommePoes commented 3 years ago

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.