In PR https://github.com/openshift/console/pull/7193 we disabled the Cypress a11y check for "aria-hidden-focus" until we can correctly implement: https://dequeuniversity.com/rules/axe/3.4/aria-hidden-focus?application=axeAPI
We need to correctly add "aria-hidden='true'" to the app root element when a Modal is launched. This is done via Modal.setAppElement(document.getElementById('app')) (frontend/public/components/factory/modal.tsx:line 26). After that is done we also need to ensure that children elements of the app root do not have [keyboard] focus:
"According to the fourth rule of ARIA, aria-hidden="true" should not be used on a focusable element. Additionally, since this attribute is inherited by an element's children, --->it should not be added onto the parent or ancestor of a focusable element. <----"
For example, if any of the child elements of our main app root context <div> have any of these properties, they will fail the "aria-hidden-focus" a11y check.
The following examples FAIL the aria-hidden="true" elements do not contain focusable elements rule:
Focusable off screen link.
<a href="/" style="position:absolute; top:-999em">Link</a>
Focusable form field, incorrectly disabled.
<input aria-disabled="true" />
aria-hidden can’t be reset once set to true on an ancestor.
Focusable content through tabindex.
<p tabindex="0" aria-hidden="true">Some text</p>
Focusable summary element.
Created attachment 1735350 [details]
Elements inside of <div id="app" aria-hidden="true> which should be disabled when modal open
Created attachment 1735358 [details]
Elements inside of <div id="app" aria-hidden="true> which should have tabindex=-1 or removed from DOM when modal open
Please see attached screenshots showing the nodes (40!) within <div id="app" aria-hidden="true> which have accesibility violations when modal is open.
PR https://github.com/openshift/console/pull/7382 re-enables the a11y check for 'aria-hidden-focus' rule, and allows A11y testing of Modals by limiting the a11y check to the context/selector of just the modal in isolation, not in relation to rest of application.
This is a step in the right direction and the best solution until such time as we want to manually & dynamically add/remove 'tabindex=-1' to the 9 violating elements, and 'aria-disabled 'to the 31 other elements! (see attached screenshots)
it looks like this PR just enable check for 'aria-hidden-focus' rule and checkA11y test for modals, no function is impacted
Moving to VERIFIED
let me know if needs more verification steps
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.
For information on the advisory (Moderate: OpenShift Container Platform 4.7.0 security, bug fix, and enhancement update), and where to find the updated
files, follow the link below.
If the solution does not work for you, open a new bug report.