Improvements for aria-modal

[afercia]

Based on the specification, the ARIA property aria-modal must be used on the element that has the role="dialog" (or alertdialog). Instead, react-modal uses it on the element that contains the modal, see #359 / #570.

https://www.w3.org/TR/wai-aria-1.1/#aria-modal

Used in Roles: window (abstract role) Inherits into Roles: alertdialog dialog

See also the example in the ARIA Authoring Practices 1.1: https://www.w3.org/TR/wai-aria-practices/#dialog_modal https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

Notes on aria-modal and aria-hidden

• The aria-modal property was introduced in ARIA 1.1. As a new property, screen reader users may experience varying degrees of support for it.
• Applying the aria-modal property to the dialog element replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert.
• In legacy dialog implementations where aria-hidden is used to make content outside a dialog inert for assistive technology users, it is important that:
  • aria-hidden is set to true on each element containing a portion of the inert layer.
  • The dialog element is not a descendant of any element that has aria-hidden set to true.

So, to my understanding, while we wait for browsers and assistive technologies to adapt to this new property, keep using aria-hidden on the content outside the modal is still recommended. However, aria-modal should be set on the element that is the modal (i.e. the one that can receive the role="dialog").

[afercia]

I've tested a bit aria-modal="true" and seems it's broken in Safari 11.1 😞

The screenshot below is from the W3C example on https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

As you can see, any text in the modal is exposed by the browser as "ignored" and VoiceOver... just ignores it. The text is not read out. Worth noting also the input field labels are not announced. Removing aria-modal="true" fixes it.

So, while aria-modal is the future, I'm afraid it can't be used for now. Seems on react-modal it doesn't affect anything just because it's used on the overlay.

Leaving this issue open to let everyone know, but please do feel free to close.

For reference: https://github.com/WordPress/gutenberg/pull/6261#issuecomment-385928807

[techieshark]

Just to update an old thread...

I've tested a bit aria-modal="true" and seems it's broken in Safari 11.1 😞

I just tested Safari 13 with VoiceOver and it worked great on the same page. If aria-modal is the future, is it time to go... Back To The Future?

[youf-olivier]

Also in the current version, the modal are not accessible, because we have a aria-hidden on the root element and nothing else in the modal, right ?