angularaccessibilitymat-dialog

When matDialog pop'ups, it adds aria-hidden to <app-root> element


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?


Solution

  • 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