Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component accessibility testing #1352

Merged
merged 82 commits into from
Jun 29, 2023
Merged
Show file tree
Hide file tree
Changes from 81 commits
Commits
Show all changes
82 commits
Select commit Hold shift + click to select a range
f0e0757
playwright ct & axebuilder install
xman343 Jun 9, 2023
60a5b51
fixed axebuilder install & started component test
xman343 Jun 9, 2023
856cd25
first pass at component spec tsx
xman343 Jun 12, 2023
8c74b62
workspace created
xman343 Jun 13, 2023
f1809b8
dependencies installed
xman343 Jun 13, 2023
fb95042
Merge branch 'dev'
xman343 Jun 13, 2023
f918533
fix component testing setup
mayank99 Jun 13, 2023
d44b57c
package cleanup
xman343 Jun 13, 2023
4cd6ddb
fixed yarn lock
xman343 Jun 13, 2023
9364985
test run error: failed to resolve entry
xman343 Jun 14, 2023
534be82
fixed package.json
xman343 Jun 14, 2023
6c3b1d1
yarn lock fix
xman343 Jun 14, 2023
47239aa
updated itwinui-react v in packages.json
xman343 Jun 14, 2023
f687ebe
testing a11y folders set-up
xman343 Jun 14, 2023
0c10e39
automated test file created
xman343 Jun 14, 2023
61ddbe0
Merge branch 'dev' of https://github.com/iTwin/iTwinUI into xander/co…
xman343 Jun 14, 2023
ff57ce8
yarn update to fix imports
xman343 Jun 14, 2023
b559c0f
renamed to a11y in yarn.lock turbo json
xman343 Jun 14, 2023
9bab9c7
still getting Carousel export error
xman343 Jun 14, 2023
24bffe2
uninstalled playwright from a11y
xman343 Jun 15, 2023
9f283d1
installed cypress into a11y
xman343 Jun 15, 2023
6efd792
cypress spec created
xman343 Jun 15, 2023
a2868ed
further cy changes
xman343 Jun 15, 2023
fa608e9
removed axe-core from a11y package.json
xman343 Jun 15, 2023
12d6360
moved itwinui-react dep to devDeps in a11y json
xman343 Jun 15, 2023
2da4b98
reverted changes to package.json
xman343 Jun 15, 2023
3e60a3f
base component test & attempt at css import
xman343 Jun 16, 2023
8af216d
css imports removed
xman343 Jun 16, 2023
96146e8
component-index.html css import attempt
xman343 Jun 16, 2023
c344363
Merge branch 'dev' of https://github.com/iTwin/iTwinUI into xander/co…
xman343 Jun 16, 2023
edb271d
testing node_modules refresh
xman343 Jun 16, 2023
76126ca
added imports to package.json
xman343 Jun 16, 2023
3eae1e2
updated gitignore
xman343 Jun 16, 2023
fe06a05
gitignore update 2
xman343 Jun 16, 2023
29aace4
Delete testing/a11y/.next directory
xman343 Jun 16, 2023
6465069
unneeded .next deleted
xman343 Jun 16, 2023
1151d6a
Merge branch 'xander/component-accessibility-testing' of https://gith…
xman343 Jun 16, 2023
c44d8a2
css import component.js edit
xman343 Jun 16, 2023
fed5ab0
cleaned up component-index.html and package.json
xman343 Jun 16, 2023
80ae22d
deleted vestigial test
xman343 Jun 16, 2023
bf8a313
Merge branch 'dev' of https://github.com/iTwin/iTwinUI into xander/co…
xman343 Jun 20, 2023
a349911
changed test filenames to reflect import origins
xman343 Jun 20, 2023
a95599e
css import fix
xman343 Jun 20, 2023
b8e0d70
css font fix
xman343 Jun 20, 2023
aa85bc3
cypress axe installation
xman343 Jun 20, 2023
82ea824
axe a11y tests added
xman343 Jun 20, 2023
65a17bd
redundant spec deleted
xman343 Jun 20, 2023
c4bf7b5
Merge branch 'dev' of https://github.com/iTwin/iTwinUI into xander/co…
xman343 Jun 21, 2023
b68a38f
examples compiled tsx to js - still exports tsx
xman343 Jun 22, 2023
2574071
examples refactoring and js compile fixes
xman343 Jun 23, 2023
82b04bb
Merge branch 'dev' of https://github.com/iTwin/iTwinUI into xander/co…
xman343 Jun 23, 2023
cb7d0a2
refactoring and package.json tsx restore
xman343 Jun 23, 2023
132a6ea
gave js examples own folder for easier export
xman343 Jun 23, 2023
a962813
js examples now work in cy tests
xman343 Jun 23, 2023
682e137
Merge branch 'dev' of https://github.com/iTwin/iTwinUI into xander/co…
xman343 Jun 26, 2023
663b359
non-component a11y violations ignored
xman343 Jun 26, 2023
8c8bb09
Created tests for all Alert examples
xman343 Jun 26, 2023
1d0b0ff
removed itwinuireact tests
xman343 Jun 26, 2023
e3f3af7
anchor & avatar tests
xman343 Jun 26, 2023
a2c0e9b
Merge branch 'dev' into xander/component-accessibility-testing
xman343 Jun 26, 2023
1938c72
Badge, Breadcrumbs, Button tests
xman343 Jun 26, 2023
7473ebe
deleted root cypress files
xman343 Jun 26, 2023
fcfb437
removed examples-js
xman343 Jun 26, 2023
04f4342
config fixes
xman343 Jun 26, 2023
48170c2
fixed index.html and component.js
xman343 Jun 26, 2023
a787c6e
updated examples package.json
xman343 Jun 26, 2023
a509bf7
more package.json fixes
xman343 Jun 26, 2023
14dfd8e
redoing cypress testing
xman343 Jun 26, 2023
20db291
all component test set up
xman343 Jun 26, 2023
48cd7d4
yarn lock
xman343 Jun 26, 2023
b7a2a5c
theme provider added
xman343 Jun 27, 2023
4141b82
Merge branch 'dev' into xander/component-accessibility-testing
xman343 Jun 28, 2023
ac7243e
cleanup
xman343 Jun 28, 2023
57e0762
added a11y test to build
xman343 Jun 28, 2023
39fa0fa
updated cypress
xman343 Jun 28, 2023
20b6de5
Merge branch 'dev' into xander/component-accessibility-testing
xman343 Jun 28, 2023
8ad20a0
changed build
xman343 Jun 28, 2023
e66fbca
build attempt 3
xman343 Jun 28, 2023
249e163
typo fix
xman343 Jun 29, 2023
1b12be3
component true
xman343 Jun 29, 2023
3930649
concise table
xman343 Jun 29, 2023
61ec359
update breadcrumbs test image
mayank99 Jun 29, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 1 addition & 1 deletion apps/storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion apps/storybook/scripts/run-tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion examples/Anchor.asbutton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion examples/ButtonGroup.input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
9 changes: 1 addition & 8 deletions examples/ButtonGroup.overflow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
1 change: 0 additions & 1 deletion examples/ColorPicker.advancedPopover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
import * as React from 'react';
import {
ColorBuilder,
ColorInputPanel,
ColorPalette,
ColorPicker,
ColorValue,
Expand Down
5 changes: 4 additions & 1 deletion examples/ComboBox.custom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand Down
3 changes: 2 additions & 1 deletion examples/ComboBox.disabled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
Expand Down
3 changes: 2 additions & 1 deletion examples/ComboBox.loading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion examples/Dialog.dismissible.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion examples/Dialog.draggable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion examples/Dialog.main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
2 changes: 1 addition & 1 deletion examples/Dialog.nondismissible.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
2 changes: 1 addition & 1 deletion examples/Dialog.placement.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
2 changes: 1 addition & 1 deletion examples/Fieldset.disabled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"packages/*",
"playgrounds/*",
"internal/*",
"examples"
"examples",
"testing/*"
]
},
"lint-staged": {
Expand Down
5 changes: 5 additions & 0 deletions testing/a11y/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules/
/test-results/
.next/
cypress/videos
cypress/screenshots
37 changes: 37 additions & 0 deletions testing/a11y/cypress.config.js
Original file line number Diff line number Diff line change
@@ -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;
},
});
},
},
});
25 changes: 25 additions & 0 deletions testing/a11y/cypress/support/component-index.html
Original file line number Diff line number Diff line change
@@ -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>
34 changes: 34 additions & 0 deletions testing/a11y/cypress/support/component.ts
Original file line number Diff line number Diff line change
@@ -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';
18 changes: 18 additions & 0 deletions testing/a11y/package.json
Original file line number Diff line number Diff line change
@@ -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": "*"
}
}
30 changes: 30 additions & 0 deletions testing/a11y/src/Component.cy.tsx
Original file line number Diff line number Diff line change
@@ -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';
mayank99 marked this conversation as resolved.
Show resolved Hide resolved
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);
});
});
});
});
3 changes: 3 additions & 0 deletions turbo.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@
"@itwin/itwinui-css#test": {
"dependsOn": ["build"]
},
"a11y#test": {
"dependsOn": ["^build"]
},
"lint": {
"outputs": []
},
Expand Down
Loading