Bug 1897008: Cypress: reenable check for 'aria-hidden-focus' rule & c…

…heckA11y test for modals
openshift · Dec 2, 2020 · 3a5b471 · 3a5b471
1 parent 7dbefdf
commit 3a5b471
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 7 deletions.
diff --git a/frontend/packages/integration-tests-cypress/support/a11y.ts b/frontend/packages/integration-tests-cypress/support/a11y.ts
@@ -41,7 +41,6 @@ Cypress.Commands.add('testA11y', (target: string) => {
       { id: 'color-contrast', enabled: false }, // seem to be somewhat inaccurate and has difficulty always picking up the correct colors, tons of open issues for it on axe-core
       { id: 'focusable-content', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
       { id: 'scrollable-region-focusable', enabled: false }, // recently updated and need to give the PF team time to fix issues before enabling
-      { id: 'aria-hidden-focus', enabled: false }, // disabling until we implement correct handling of Modals, see https://dequeuniversity.com/rules/axe/3.4/aria-hidden-focus?application=axeAPI
     ],
   });
   a11yTestResults.numberChecks += 1;

diff --git a/frontend/packages/integration-tests-cypress/support/project.ts b/frontend/packages/integration-tests-cypress/support/project.ts
@@ -22,8 +22,7 @@ Cypress.Commands.add('createProject', (name: string, devConsole: boolean = false
   listPage.clickCreateYAMLbutton();
   modal.shouldBeOpened();
   cy.byTestID('input-name').type(name);
-  // TODO: uncomment once https://bugzilla.redhat.com/show_bug.cgi?id=1897008 is fixed
-  // cy.testA11y('Create Project modal');
+  cy.testA11y('Create Project modal');
   modal.submit();
   modal.shouldBeClosed();
   // TODO, switch to 'listPage.titleShouldHaveText(name)', when we switch to new test id
@@ -40,8 +39,7 @@ Cypress.Commands.add('deleteProject', (name: string) => {
   modal.submitShouldBeDisabled();
   cy.byTestID('project-name-input').type(name);
   modal.submitShouldBeEnabled();
-  // TODO: uncomment once https://bugzilla.redhat.com/show_bug.cgi?id=1897008 is fixed
-  // cy.testA11y('Delete Project modal');
+  cy.testA11y('Delete Project modal');
   modal.submit();
   modal.shouldBeClosed();
   listPage.titleShouldHaveText('Projects');

diff --git a/frontend/public/components/app.jsx b/frontend/public/components/app.jsx
@@ -176,7 +176,7 @@ class App_ extends React.PureComponent {
           <GuidedTour />
           <ConsoleNotifier location="BannerBottom" />
         </QuickStartDrawer>
-        <div id="modal-container" />
+        <div id="modal-container" role="dialog" aria-modal="true" />
       </>
     );
 

diff --git a/frontend/public/components/factory/modal.tsx b/frontend/public/components/factory/modal.tsx
@@ -23,7 +23,6 @@ export const createModal: CreateModal = (getModalContainer) => {
       ReactDOM.unmountComponentAtNode(modalContainer);
       resolve();
     };
-    Modal.setAppElement(document.getElementById('app'));
     ReactDOM.render(getModalContainer(closeModal), modalContainer);
   });
   return { result };
@@ -46,6 +45,7 @@ export const createModalLauncher: CreateModalLauncher = (Component) => (props) =
           <Modal
             isOpen={true}
             contentLabel="Modal"
+            ariaHideApp={false}
             onRequestClose={_handleClose}
             className={classNames('modal-dialog', props.modalClassName)}
             overlayClassName="co-overlay"