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?
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-hiddenis used to make content outside a dialog inert for assistive technology users, it is important that:
aria-hiddenis 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-hiddenset 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