When scanning page with ARC Toolkit (Accessibility testing plugin), if modal is opened, scanner shows error, because there is aria-hidden on parent () of one or more focusable child elements.

I have removed aria-hidden with jQuery, but is there any way, to prevent adding aria-hidden on app root by default in Angular?

CodePudding user response：

Hiding all other contents while a modal dialog is open from assistive technology (AT) is standard procedure.

Since AT provides a bunch of techniques to navigate a web page, not only focus needs to be restricted to the dialog, but any access to the underlying content.

Since ARIA 1.1, the aria-modal attribute should be set on the dialog, which should render all other contents inert. This does not work everywhere, yet.

So as the APG mention on inert:

However, 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.

To avoid the latter case, usually, dialogs are put outside the app-root via portals or similar, so that the app-root can be hidden.

If I inspect the Angular Material dialog example, the cdk-overlay-container, which contains the dialog, is well placed along with material-docs-app, which is the app-root.

The warning can be discarded, as this github issue also supports