Component accessibility testing (#1352)

Co-authored-by: Mayank <[email protected]>

.github/workflows/build.yml

@@ -376,3 +376,33 @@ jobs:
         with:
           name: 'cypress-visual-screenshots'
           path: '${{ github.workspace }}/apps/storybook/cypress-visual-screenshots'
+  a11y:
+    name: Test for a11y violations
+    needs: install
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node 18.X
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules
+        with:
+          path: |
+            node_modules
+            packages/*/node_modules
+            apps/*/node_modules
+            playgrounds/*/node_modules
+          key: modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - run: yarn build --filter=itwinui-react
+
+      - uses: cypress-io/github-action@v5
+        with:
+          working-directory: testing/a11y
+          component: true

apps/storybook/package.json

@@ -18,7 +18,7 @@
     "@types/react": "^18.0.2",
     "@types/react-dom": "^18.0.2",
     "configs": "*",
-    "cypress": "12.11.0",
+    "cypress": "12.16.0",
     "cypress-image-diff-js": "1.23.0",
     "dotenv-cli": "7.0.0",
     "eslint": "^8.14.0",

apps/storybook/scripts/run-tests.js

@@ -5,7 +5,7 @@
 const spawn = require('child_process').spawn;
 const args = process.argv.slice(2).join(' ');
 
-const IMAGE_NAME = 'cypress/included:12.11.0'; // https://hub.docker.com/r/cypress/included
+const IMAGE_NAME = 'cypress/included:12.16.0'; // https://hub.docker.com/r/cypress/included
 
 // Need to use this script because current directory variable is different in different shells
 const dockerProcess = spawn(

examples/Anchor.asbutton.tsx

@@ -7,7 +7,7 @@ import { Anchor } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Anchor as='button' onClick={console.log('Button clicked!')}>
+    <Anchor as='button' onClick={() => console.log('Button clicked!')}>
       Anchor as a button
     </Anchor>
   );

examples/ButtonGroup.input.tsx

@@ -10,7 +10,7 @@ import {
   Flex,
   Button,
 } from '@itwin/itwinui-react';
-import { SvgSearch, SvgAdd } from '@itwin/itwinui-icons-react';
+import { SvgSearch } from '@itwin/itwinui-icons-react';
 
 export default () => {
   return (

examples/ButtonGroup.overflow.tsx

@@ -9,14 +9,7 @@ import {
   IconButton,
   MenuItem,
 } from '@itwin/itwinui-react';
-import {
-  SvgAdd,
-  SvgEdit,
-  SvgDelete,
-  SvgUndo,
-  SvgMore,
-  SvgPlaceholder,
-} from '@itwin/itwinui-icons-react';
+import { SvgMore, SvgPlaceholder } from '@itwin/itwinui-icons-react';
 
 export default () => {
   const buttons = Array(12)

examples/ColorPicker.advancedPopover.tsx

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import {
   ColorBuilder,
-  ColorInputPanel,
   ColorPalette,
   ColorPicker,
   ColorValue,

examples/ComboBox.custom.tsx

@@ -24,7 +24,10 @@ export default () => {
   }, []);
 
   const itemRenderer = React.useCallback(
-    ({ value, label }, { isSelected, id }) => (
+    (
+      { value, label }: { value: string; label: string },
+      { isSelected, id }: { isSelected: boolean; id: string },
+    ) => (
       <MenuItem key={id} id={id} isSelected={isSelected} value={value}>
         <em
           style={{

examples/ComboBox.disabled.tsx

@@ -3,7 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { ComboBox, SelectOption } from '@itwin/itwinui-react';
+import type { SelectOption } from '@itwin/itwinui-react';
+import { ComboBox } from '@itwin/itwinui-react';
 
 export default () => {
   const [value, setValue] = React.useState('');

examples/ComboBox.loading.tsx

@@ -3,7 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { ComboBox, MenuItemSkeleton, SelectOption } from '@itwin/itwinui-react';
+import type { SelectOption } from '@itwin/itwinui-react';
+import { ComboBox, MenuItemSkeleton } from '@itwin/itwinui-react';
 
 export default () => {
   const countriesList = React.useMemo(

examples/Dialog.dismissible.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+// import * as ReactDOM from 'react-dom';
 import {
   Dialog,
   Button,

examples/Dialog.draggable.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+// import * as ReactDOM from 'react-dom';
 import {
   Dialog,
   Button,

examples/Dialog.main.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+// import * as ReactDOM from 'react-dom';
 import { Dialog, Button } from '@itwin/itwinui-react';
 
 export default () => {

examples/Dialog.nondismissible.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+// import * as ReactDOM from 'react-dom';
 import { Dialog, Button } from '@itwin/itwinui-react';
 
 export default () => {

examples/Dialog.placement.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+// import * as ReactDOM from 'react-dom';
 import { Dialog, Button } from '@itwin/itwinui-react';
 
 export default () => {

examples/Fieldset.disabled.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Fieldset, LabeledInput, Flex } from '@itwin/itwinui-react';
+import { Fieldset, LabeledInput } from '@itwin/itwinui-react';
 
 export default () => {
   return (

package.json

@@ -8,7 +8,8 @@
       "packages/*",
       "playgrounds/*",
       "internal/*",
-      "examples"
+      "examples",
+      "testing/*"
     ]
   },
   "lint-staged": {

testing/a11y/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+.next/
+cypress/videos
+cypress/screenshots

testing/a11y/cypress.config.js

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { defineConfig } from 'cypress';
+import react from '@vitejs/plugin-react';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const axeCorePath = require.resolve('axe-core');
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+      viteConfig: {
+        plugins: [react()],
+      },
+    },
+    env: { axeCorePath },
+    video: false,
+    screenshotOnRunFailure: false,
+    setupNodeEvents(on, config) {
+      on('task', {
+        log(message) {
+          console.log(message);
+          return null;
+        },
+        table(message) {
+          console.table(message);
+          return null;
+        },
+      });
+    },
+  },
+});

testing/a11y/cypress/support/component-index.html

@@ -0,0 +1,25 @@
+<!--
+  Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+  See LICENSE.md in the project root for license terms and full copyright notice.
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta
+      name="color-scheme"
+      content="dark"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0"
+    >
+    <title>a11y testing</title>
+  </head>
+  <body>
+    <main>
+      <h1>a11y testing</h1>
+      <div data-cy-root></div>
+    </main>
+  </body>
+</html>

testing/a11y/cypress/support/component.ts

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import { mount } from 'cypress/react18';
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);
+
+import '@itwin/itwinui-react/styles.css';
+
+import 'cypress-axe';

testing/a11y/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "a11y",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "cypress run --component",
+    "open": "cypress open --component",
+    "clean": "rimraf .turbo && rimraf node_modules"
+  },
+  "dependencies": {
+    "@itwin/itwinui-react": "3.0.0-dev.3",
+    "axe-core": "^4.7.2",
+    "cypress": "^12.16.0",
+    "cypress-axe": "^1.4.0",
+    "examples": "*"
+  }
+}

testing/a11y/src/Component.cy.tsx

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import * as allExamples from 'examples';
+import { ThemeProvider } from '@itwin/itwinui-react';
+
+describe('Should have no WCAG violations', () => {
+  Object.entries(allExamples).forEach(([name, Component]) => {
+    it(name, () => {
+      cy.mount(
+        <ThemeProvider theme='dark' style={{ height: '100vh' }}>
+          <Component />
+        </ThemeProvider>,
+      );
+      cy.injectAxe({
+        axeCorePath: Cypress.env('axeCorePath'),
+      });
+      cy.checkA11y(undefined, undefined, (violations) => {
+        const violationData = violations.map(({ id, help }) => ({
+          Component: name,
+          'Rule ID': id,
+          Description: help,
+        }));
+        cy.task('table', violationData);
+      });
+    });
+  });
+});

turbo.json

@@ -27,6 +27,9 @@
     "@itwin/itwinui-css#test": {
       "dependsOn": ["build"]
     },
+    "a11y#test": {
+      "dependsOn": ["^build"]
+    },
     "lint": {
       "outputs": []
     },