当 matDialog 弹出窗口时，它会添加 aria-hidden 到<app-root>元素</app-root>

Question

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?

Answer 1

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