Interactivity API: aria-modal is not sufficient to hide content from assistive technology

[afercia]

Description

DIscovered while reviewing https://github.com/WordPress/gutenberg/pull/61313

The aria-modal attribute is supposed to hide from assistive technology the rest of the page outside of a 'modal' element. A modal element can be, but not limited to, a dialog. That is: an element with role-dialog and aria-modal=true.

Unfortunately, aria-modal is not fully supported by Safari and VoiceOver. This was first noted on May 2018 when implementing the Modal component. That's the reason why the Modal component doesn't use aria-modal. Instead, it uses a small helper to hide the rest of the page by setting aria-hidden=true on all the first children of the body except the modal dialog itself (and except live regions and script elements).

The Interactivity API does use aria-modal for the navigation and the image block. Unfortunately, that fails with Safari and VoiceOver. This was probably missed when implementing the modal dialogs for navigation and image but shoudl be remediated with an approach similar to the one used for the Modal component.

It would be great if aria-modal worked as expected but unfortunately it doesn't. Until support improves, WordPress should make sure content outside of any modal dialog is effectively hidden from assistive technologies.

Also, I'd think that having a consistent implementation (in terms of actual behaviro and interaction, not code) between back end and front end is important.

Step-by-step reproduction instructions

Compare the behavior of a Modal component in the editor with the one of the Image 'Expand on click` feature.

Use Safari and VoiceOver.

Modal component:

• Go to the Post editor.
• Navigate to Options > Preferences to open the Preferences modal dialog.
• Tab a few times within the modal dialog.
• Press Control + Option + Left arrow until you reach the main heading of the modal dialog.
• VoiceOver should announce 'Heading level 1, Preferences'.
• Press Shift + Control + Option + Left arrow to move to the modal dialog container.
• VoiceOver should announce 'Preferences, web dialogue'.
• Press Control + Option + Left arrow.
• Observe you can't exit the modal dialog.
• Press Control + Option + U to open the VoiceOver rotor.
• Press Control + Option + Right arrow to navigate the various panels ofd the VoiceOver rotor.
• Observe the various panels list only the content (e.g. Headings, Form controls) that is inside the modal dialog.

This proves all the content outside of the modal dialog is effectively hidden from VoiceOver.

Test the Image 'Click to expand' modal dialog.

• Add an Image block. Click 'Link' in the block toolbar and click 'Expand on click'.
• Publish and view the post on the front end.
• Tab to the image. A button will be revealed on focus. VoiceOver will announce 'Enlarge image, button'.
• Activate the button to open the enlarged image modal dialog.
• Once within the modal dialog, repeat the steps above.
• Observe that you can exit the modal dialog by arrowing away from the modal dialog container.
• When inside the modal dialog, observe the VoiceOver rotor lists also content that is outside of the modal dialog.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

Noting that the Navigation block, when set to open in an overlay, works differently fro the Image block lightbox.

The lightbox modal dialog markup is a first children of the body, which makes easy to hide all the other children with aria-hidden=true.

Instead, the navigation block modal dialog markup is nested within the content of the page. This isn't ideal. It would be way better if it was rendered as a first child of the body.