Component accessibility testing

packages/itwinui-react/.gitignore

@@ -20,3 +20,7 @@ storybook-static/*
 # Yalc
 .yalc/*
 yalc.lock
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/

packages/itwinui-react/Component.spec.tsx

@@ -0,0 +1,39 @@
+import * as AllExamples from 'examples';
+import * as React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import AxeBuilder from '@axe-core/playwright';
+import type { HooksConfig } from '@playwright/test';
+import type { Page } from 'playwright';
+
+// Alert Test
+
+test('Alert should meet WCAG criteria', async ({
+  mount,
+  page,
+}: {
+  mount: (
+    jsx: JSX.Element,
+    config?: { hooksConfig?: HooksConfig },
+  ) => Promise<void>;
+  page: Page;
+}) => {
+  await mount(
+    <>
+      <AllExamples.AlertMainExample />
+      <AllExamples.AlertInformationalExample />
+      <AllExamples.AlertInlineExample />
+      <AllExamples.AlertNegativeExample />
+      <AllExamples.AlertPositiveExample />
+      <AllExamples.AlertStickyExample />
+      <AllExamples.AlertWarningExample />
+    </>,
+  );
+
+  // pass component to axebuilder
+
+  const accessibilityScanResults = await new AxeBuilder({ page })
+    .include('#navigation-menu-flyout')
+    .analyze();
+
+  expect(accessibilityScanResults.violations).toEqual([]);
+});

packages/itwinui-react/package.json

@@ -69,13 +69,17 @@
     "dev:esm": "swc src -d esm --watch",
     "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs",
     "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"",
-    "dev:styles": "concurrently \"yarn build:styles --watch\" \"yarn copy-styles\""
+    "dev:styles": "concurrently \"yarn build:styles --watch\" \"yarn copy-styles\"",
+    "test-ct": "playwright test -c playwright-ct.config.ts"
   },
   "dependencies": {
+    "@axe-core/playwright": "^4.7.2",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
+    "@playwright/test": "^1.35.0",
     "@tippyjs/react": "^4.2.6",
     "@types/react-table": "^7.0.18",
     "classnames": "^2.2.6",
+    "react-router-dom": "^6.12.1",
     "react-table": "^7.1.0",
     "react-transition-group": "^4.4.2",
     "tippy.js": "^6.3.7"
@@ -84,6 +88,7 @@
     "@babel/core": "^7.12.10",
     "@itwin/itwinui-css": "^2.0.0-dev.1",
     "@itwin/itwinui-variables": "2.1.0-dev.0",
+    "@playwright/experimental-ct-react": "^1.35.0",
     "@swc/cli": "^0.1.57",
     "@swc/core": "^1.3.21",
     "@testing-library/jest-dom": "^5.16.4",

packages/itwinui-react/playwright-ct.config.ts

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './',
+  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+  snapshotDir: './__snapshots__',
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Port to use for Playwright component endpoint. */
+    ctPort: 3100,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+});

packages/itwinui-react/playwright/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Testing Page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

packages/itwinui-react/playwright/index.tsx

@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';