[WOR-543, IA-3369] Add axe accessibility tool, first automated tests, and bug fixes.

integration-tests/package.json

@@ -17,6 +17,7 @@
     "puppeteer-cluster": "^0.23.0"
   },
   "dependencies": {
+    "@axe-core/puppeteer": "^4.4.5",
     "@google-cloud/secret-manager": "^4.0.0",
     "date-fns": "^2.24.0",
     "google-auth-library": "^7.9.2",

integration-tests/tests/billing-projects.js

@@ -1,6 +1,8 @@
 // This test is owned by the Workspaces Team.
 const _ = require('lodash/fp')
-const { assertTextNotFound, click, clickable, findText, gotoPage, select, signIntoTerra, waitForNoSpinners } = require('../utils/integration-utils')
+const {
+  assertTextNotFound, click, clickable, findText, gotoPage, select, signIntoTerra, waitForNoSpinners, verifyAccessibility
+} = require('../utils/integration-utils')
 const { userEmail } = require('../utils/integration-config')
 const { registerTest } = require('../utils/jest-utils')
 const { withUserToken } = require('../utils/terra-sa-utils')
@@ -265,6 +267,9 @@ const testBillingSpendReportFn = withUserToken(async ({ page, testUrl, token })
   await billingPage.assertText('Top 10 Spending Workspaces')
   await billingPage.assertChartValue(10, 'Extra Inexpensive Workspace', 'Compute', '$0.01')
 
+  // Check accessibility of spend report page.
+  await verifyAccessibility(page)
+
   // Select a billing project that is not owned by the user
   await billingPage.visit()
   await billingPage.selectProject(notOwnedBillingProjectName)
@@ -277,6 +282,9 @@ const testBillingSpendReportFn = withUserToken(async ({ page, testUrl, token })
   await billingPage.selectProject(azureBillingProjectName, AZURE)
   await billingPage.assertTextNotFound('Spend report')
   await billingPage.assertTextNotFound('View billing account')
+
+  // Check accessibility of initial view.
+  await verifyAccessibility(page)
 })
 
 registerTest({
@@ -303,6 +311,9 @@ const testBillingWorkspacesFn = withUserToken(async ({ page, testUrl, token }) =
   await billingPage.showWorkspaceDetails(`${ownedBillingProjectName}_ws`)
   await billingPage.assertText(`Google Project${ownedBillingProjectName}_project`)
 
+  // Check accessibility of workspaces view (GCP).
+  await verifyAccessibility(page)
+
   // Select a billing project that is not owned by the user and verify workspace tab is visible
   await billingPage.visit()
   await billingPage.selectProject(notOwnedBillingProjectName)
@@ -314,6 +325,9 @@ const testBillingWorkspacesFn = withUserToken(async ({ page, testUrl, token }) =
   await verifyWorkspaceControls()
   await billingPage.showWorkspaceDetails(`${azureBillingProjectName}_ws`)
   await billingPage.assertText(`Resource Group ID${azureBillingProjectName}_mrg`)
+
+  // Check accessibility of workspaces view (Azure).
+  await verifyAccessibility(page)
 })
 
 registerTest({
@@ -339,6 +353,9 @@ const testBillingMembersFn = withUserToken(async ({ page, testUrl, token }) => {
   await billingPage.assertText('testuser1@example.com')
   await billingPage.assertText('testuser3@example.com')
 
+  // Check accessibility of users view (as owner).
+  await verifyAccessibility(page)
+
   // Select a billing project that is not owned by the user
   await billingPage.visit()
   await billingPage.selectProject(notOwnedBillingProjectName)
@@ -353,6 +370,9 @@ const testBillingMembersFn = withUserToken(async ({ page, testUrl, token }) => {
   // The test user has the User role, so they should see members with the Owner role, but not with the User role
   await billingPage.assertText('testuser1@example.com')
   await billingPage.assertTextNotFound('testuser3@example.com')
+
+  // Check accessibility of users view (as non-owner).
+  await verifyAccessibility(page)
 })
 
 registerTest({

integration-tests/tests/workspace-dashboard.js

@@ -2,7 +2,7 @@
 const _ = require('lodash/fp')
 const { viewWorkspaceDashboard, withWorkspace } = require('../utils/integration-helpers')
 const {
-  assertNavChildNotFound, assertTextNotFound, click, clickable, findElement, findText, gotoPage, navChild, noSpinnersAfter
+  assertNavChildNotFound, assertTextNotFound, click, clickable, findElement, findText, gotoPage, navChild, noSpinnersAfter, verifyAccessibility
 } = require('../utils/integration-utils')
 const { registerTest } = require('../utils/jest-utils')
 const { withUserToken } = require('../utils/terra-sa-utils')
@@ -103,6 +103,9 @@ const testGoogleWorkspace = _.flow(
 
   // Verify expected tabs are present.
   await dashboard.assertTabs(['data', 'analyses', 'workflows', 'job history'], true)
+
+  // Check accessibility.
+  await verifyAccessibility(page)
 })
 
 registerTest({
@@ -248,8 +251,11 @@ const testAzureWorkspace = withUserToken(async ({ page, token, testUrl }) => {
   // Verify tabs that currently depend on Google project ID are not present.
   await dashboard.assertTabs(['data', 'notebooks', 'workflows', 'job history'], false)
 
-  // Verify Analyses tab is present (config override is set)
+  // Verify Analyses tab is present.
   await dashboard.assertTabs(['analyses'], true)
+
+  // Check accessibility.
+  await verifyAccessibility(page)
 })
 
 registerTest({

integration-tests/utils/integration-utils.js

@@ -1,3 +1,4 @@
+const { AxePuppeteer } = require('@axe-core/puppeteer')
 const _ = require('lodash/fp')
 const { mkdirSync, writeFileSync } = require('fs')
 const { resolve } = require('path')
@@ -438,6 +439,13 @@ const gotoPage = async (page, url) => {
   await waitForNoSpinners(page)
 }
 
+const verifyAccessibility = async page => {
+  const results = await new AxePuppeteer(page).withTags(['wcag2a', 'wcag2aa']).analyze()
+  if (results.violations.length > 0) {
+    throw new Error(`Accessibility issues found:\n${JSON.stringify(results.violations, null, 2)}`)
+  }
+}
+
 module.exports = {
   assertNavChildNotFound,
   assertTextNotFound,
@@ -478,5 +486,6 @@ module.exports = {
   maybeSaveScreenshot,
   gotoPage,
   savePageContent,
-  findButtonInDialogByAriaLabel
+  findButtonInDialogByAriaLabel,
+  verifyAccessibility
 }

package.json

@@ -73,6 +73,7 @@
     "postinstall": "husky install"
   },
   "devDependencies": {
+    "@axe-core/react": "^4.4.5",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",

src/appLoader.js

@@ -1,6 +1,7 @@
 import 'src/style.css'
 
 import _ from 'lodash/fp'
+import React from 'react'
 import ReactDOM from 'react-dom'
 import { h } from 'react-hyperscript-helpers'
 import RModal from 'react-modal'
@@ -23,4 +24,19 @@ initializeClientId().then(() => {
   initializeAuth()
   initializeTCell()
   startPollingServiceAlerts()
+
+  if (process.env.NODE_ENV === 'development') {
+    const axe = require('@axe-core/react')
+
+    const config = {
+      tags: ['wcag2a', 'wcag2aa'],
+      rules: [
+        {
+          id: 'color-contrast',
+          excludeHidden: true
+        }
+      ]
+    }
+    axe(React, ReactDOM, 1000, config)
+  }
 })

src/components/ContextBar.test.js

@@ -331,12 +331,12 @@ const contextBarProps = {
 describe('ContextBar - buttons', () => {
   it('will render default icons', () => {
     // Act
-    const { getByText, getByLabelText } = render(h(ContextBar, contextBarProps))
+    const { getByText, getByLabelText, getByTestId } = render(h(ContextBar, contextBarProps))
 
     // Assert
     expect(getByText('Rate:'))
     expect(getByLabelText('Environment Configuration'))
-    expect(getByLabelText('Terminal button')).toHaveAttribute('disabled')
+    expect(getByTestId('terminal-button-id')).toHaveAttribute('disabled')
   })
 
   it('will render Jupyter button with an enabled Terminal Button', () => {
@@ -348,13 +348,13 @@ describe('ContextBar - buttons', () => {
     }
 
     // Act
-    const { getByText, getByLabelText } = render(h(ContextBar, jupyterContextBarProps))
+    const { getByText, getByLabelText, getByTestId } = render(h(ContextBar, jupyterContextBarProps))
 
     //Assert
     expect(getByText('Rate:'))
     expect(getByLabelText('Environment Configuration'))
     expect(getByLabelText(new RegExp(/Jupyter Environment/i)))
-    expect(getByLabelText('Terminal button')).toBeEnabled()
+    expect(getByTestId('terminal-button-id')).toBeEnabled()
     expect(getByText(Utils.formatUSD(RUNTIME_COST + PERSISTENT_DISK_COST)))
     expect(getByText(/Running \$.*\/hr/))
   })
@@ -368,13 +368,13 @@ describe('ContextBar - buttons', () => {
     }
 
     // Act
-    const { getByText, getByLabelText } = render(h(ContextBar, jupyterContextBarProps))
+    const { getByText, getByLabelText, getByTestId } = render(h(ContextBar, jupyterContextBarProps))
 
     //Assert
     expect(getByText('Rate:'))
     expect(getByLabelText('Environment Configuration'))
     expect(getByLabelText(new RegExp(/Jupyter Environment/i)))
-    expect(getByLabelText('Terminal button')).toBeEnabled()
+    expect(getByTestId('terminal-button-id')).toBeEnabled()
     expect(getByText(Utils.formatUSD(RUNTIME_COST + PERSISTENT_DISK_COST)))
     expect(getByText(/Creating \$.*\/hr/))
   })
@@ -390,15 +390,15 @@ describe('ContextBar - buttons', () => {
     }
 
     // Act
-    const { getByText, getByLabelText } = render(h(ContextBar, rstudioGalaxyContextBarProps))
+    const { getByText, getByLabelText, getByTestId } = render(h(ContextBar, rstudioGalaxyContextBarProps))
 
     //Assert
     expect(getByText('Rate:'))
     expect(getByText(Utils.formatUSD(RUNTIME_COST + GALAXY_COMPUTE_COST + GALAXY_DISK_COST + PERSISTENT_DISK_COST)))
     expect(getByLabelText('Environment Configuration'))
     expect(getByLabelText(new RegExp(/RStudio Environment/i)))
     expect(getByLabelText(new RegExp(/Galaxy Environment/i)))
-    expect(getByLabelText('Terminal button')).toHaveAttribute('disabled')
+    expect(getByTestId('terminal-button-id')).toHaveAttribute('disabled')
     expect(getByText(/Running \$.*\/hr/))
     expect(getByText(/Creating \$.*\/hr/))
     expect(getByText(/Disk \$.*\/hr/))
@@ -413,13 +413,13 @@ describe('ContextBar - buttons', () => {
     }
 
     // Act
-    const { getByText, getByLabelText } = render(h(ContextBar, rstudioGalaxyContextBarProps))
+    const { getByText, getByLabelText, getByTestId } = render(h(ContextBar, rstudioGalaxyContextBarProps))
 
     //Assert
     expect(getByText('Rate:'))
     expect(getByText('$0.00'))
     expect(getByLabelText('Environment Configuration'))
-    expect(getByLabelText('Terminal button')).toHaveAttribute('disabled')
+    expect(getByTestId('terminal-button-id')).toHaveAttribute('disabled')
     expect(getByLabelText(new RegExp(/Cromwell Environment/i)))
   })
 
@@ -431,14 +431,14 @@ describe('ContextBar - buttons', () => {
     }
 
     // Act
-    const { getByText, getByLabelText } = render(h(ContextBar, jupyterContextBarProps))
+    const { getByText, getByLabelText, getByTestId } = render(h(ContextBar, jupyterContextBarProps))
 
     //Assert
     expect(getByText('Rate:'))
     expect(getByText(Utils.formatUSD(RUNTIME_COST)))
     expect(getByLabelText('Environment Configuration'))
     expect(getByLabelText(new RegExp(/Azure Environment/i)))
-    expect(getByLabelText('Terminal button')).toHaveAttribute('disabled')
+    expect(getByTestId('terminal-button-id')).toHaveAttribute('disabled')
   })
 
   it('will render button with error status', () => {
@@ -551,8 +551,8 @@ describe('ContextBar - actions', () => {
     }
 
     // Act
-    const { getByLabelText } = render(h(ContextBar, jupyterContextBarProps))
-    fireEvent.click(getByLabelText('Terminal button'))
+    const { getByTestId } = render(h(ContextBar, jupyterContextBarProps))
+    fireEvent.click(getByTestId('terminal-button-id'))
 
     // Assert
     expect(Ajax().Runtimes.runtime).toBeCalledWith(jupyter.googleProject, jupyter.runtimeName)
@@ -579,8 +579,8 @@ describe('ContextBar - actions', () => {
     }
 
     // Act
-    const { getByLabelText } = render(h(ContextBar, jupyterContextBarProps))
-    fireEvent.click(getByLabelText('Terminal button'))
+    const { getByTestId } = render(h(ContextBar, jupyterContextBarProps))
+    fireEvent.click(getByTestId('terminal-button-id'))
 
     // Assert
     expect(mockRuntimesStartFn).not.toHaveBeenCalled()

src/components/PopupTrigger.js

@@ -144,6 +144,7 @@ export const MenuTrigger = ({ children, content, popupProps = {}, ...props }) =>
     content: h(VerticalNavigation, [content]),
     popupProps: {
       role: 'menu',
+      'aria-modal': undefined,
       'aria-orientation': 'vertical',
       ...popupProps
     },