Merge pull request #6951 from dtaylor113/a11y-violation-fixes

Bug 1888985: Fix Cypress test flake and accesibility violation: 'Ensures buttons have discernible text'
openshift · Oct 19, 2020 · 104774f · 104774f
2 parents 499c423 + df84112
commit 104774f
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,4 +16,5 @@
 /frontend/npm-debug.log
 /frontend/yarn-error.log
 /frontend/gui_test_screenshots
+/frontend/packages/integration-tests-cypress/cypress-a11y-report.json
 /frontend/@types
diff --git a/frontend/packages/integration-tests-cypress/tests/crud/k8-openshift-cruds.spec.ts b/frontend/packages/integration-tests-cypress/tests/crud/k8-openshift-cruds.spec.ts
@@ -118,6 +118,7 @@ describe('Kubernetes resource CRUD operations', () => {
 
       it('displays detail view for newly created resource instance', () => {
         cy.url().should('include', `/${name}`);
+        detailsPage.isLoaded();
         detailsPage.titleShouldContain(name);
         cy.testA11y(`Details page for ${kind}: ${name}`);
       });

diff --git a/frontend/packages/integration-tests-cypress/views/details-page.ts b/frontend/packages/integration-tests-cypress/views/details-page.ts
@@ -12,6 +12,7 @@ export const detailsPage = {
       .contains(action)
       .click();
   },
+  isLoaded: () => cy.byTestID('skeleton-detail-view').should('not.exist'),
 };
 
 export namespace DetailsPageSelector {

diff --git a/frontend/public/components/utils/field-level-help.tsx b/frontend/public/components/utils/field-level-help.tsx
@@ -8,7 +8,7 @@ export const FieldLevelHelp: React.FC<FieldLevelHelpProps> = React.memo(({ child
   }
   return (
     <Popover aria-label="Help" bodyContent={children} enableFlip>
-      <Button variant="link" isInline className="co-field-level-help">
+      <Button aria-label="Help" variant="link" isInline className="co-field-level-help">
         <QuestionCircleIcon className="co-field-level-help__icon" />
       </Button>
     </Popover>

diff --git a/frontend/public/components/utils/horizontal-nav.tsx b/frontend/public/components/utils/horizontal-nav.tsx
@@ -182,7 +182,7 @@ export const HorizontalNav = React.memo((props: HorizontalNavProps) => {
     const content = <Switch> {routes} </Switch>;
 
     const skeletonDetails = (
-      <div className="skeleton-detail-view">
+      <div data-test="skeleton-detail-view" className="skeleton-detail-view">
         <div className="skeleton-detail-view--head" />
         <div className="skeleton-detail-view--grid">
           <div className="skeleton-detail-view--column">