Bug 1897008 - Cypress: reenable check for 'aria-hidden-focus' rule & checkA11y test for modals
Summary: Cypress: reenable check for 'aria-hidden-focus' rule & checkA11y test for modals
Keywords:
Status: CLOSED ERRATA
Alias: None
Product: OpenShift Container Platform
Classification: Red Hat
Component: Management Console
Version: 4.7
Hardware: Unspecified
OS: Unspecified
unspecified
medium
Target Milestone: ---
: 4.7.0
Assignee: David Taylor
QA Contact: Yadan Pei
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2020-11-12 04:00 UTC by David Taylor
Modified: 2021-02-24 15:33 UTC (History)
4 users (show)

Fixed In Version:
Doc Type: No Doc Update
Doc Text:
Clone Of:
Environment:
Last Closed: 2021-02-24 15:32:41 UTC
Target Upstream Version:
Embargoed:


Attachments (Terms of Use)
Elements inside of <div id="app" aria-hidden="true> which should be disabled when modal open (382.44 KB, image/png)
2020-12-01 18:36 UTC, David Taylor
no flags Details
Elements inside of <div id="app" aria-hidden="true> which should have tabindex=-1 or removed from DOM when modal open (273.45 KB, image/png)
2020-12-01 18:38 UTC, David Taylor
no flags Details


Links
System ID Private Priority Status Summary Last Updated
Github openshift console pull 7382 0 None closed Bug 1897008: Cypress: reenable check for 'aria-hidden-focus' rule & checkA11y test for modals 2020-12-08 02:20:04 UTC
Red Hat Product Errata RHSA-2020:5633 0 None None None 2021-02-24 15:33:13 UTC

Description David Taylor 2020-11-12 04:00:14 UTC
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.

  <div aria-hidden="true">
    <a href="/" style="position:absolute; top:-999em">Link</a>
  </div>

Focusable form field, incorrectly disabled.

  <div aria-hidden="true">
    <input aria-disabled="true" />
  </div>

aria-hidden can’t be reset once set to true on an ancestor.

  <div aria-hidden="true">
    <div aria-hidden="false">
      <button>Some button</button>
    </div>
  </div>

Focusable content through tabindex.

  <p tabindex="0" aria-hidden="true">Some text</p>

Focusable summary element.

  <details aria-hidden="true">
    <summary>Some button</summary>
    <p>Some details</p>
  </details>

Comment 1 David Taylor 2020-12-01 18:36:30 UTC
Created attachment 1735350 [details]
Elements inside of <div id="app" aria-hidden="true> which should be disabled when modal open

Comment 2 David Taylor 2020-12-01 18:38:02 UTC
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

Comment 3 David Taylor 2020-12-01 18:40:17 UTC
Please see attached screenshots showing the nodes (40!) within <div id="app" aria-hidden="true> which have accesibility violations when modal is open.

Comment 4 David Taylor 2020-12-01 19:15:52 UTC
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)

Comment 6 Yadan Pei 2020-12-09 10:19:31 UTC
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

Comment 9 errata-xmlrpc 2021-02-24 15:32:41 UTC
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.

https://access.redhat.com/errata/RHSA-2020:5633


Note You need to log in before you can comment on or make changes to this bug.