From bc92508058033ac282e23cb98d6badbb0a55dd79 Mon Sep 17 00:00:00 2001 From: Laura Whitaker Date: Mon, 17 Jun 2024 11:40:16 -0600 Subject: [PATCH 01/13] Add Storybook accessibility tests --- .storybook/test-runner.ts | 18 +++++++++++++ package.json | 1 + pnpm-lock.yaml | 56 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+) create mode 100644 .storybook/test-runner.ts diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts new file mode 100644 index 000000000..99cb29be5 --- /dev/null +++ b/.storybook/test-runner.ts @@ -0,0 +1,18 @@ +import type { TestRunnerConfig } from '@storybook/test-runner'; +import { injectAxe, checkA11y } from 'axe-playwright'; + +const config: TestRunnerConfig = { + async preVisit(page) { + await injectAxe(page); + }, + async postVisit(page) { + await checkA11y(page, '#storybook-root', { + detailedReport: true, + detailedReportOptions: { + html: true, + }, + }); + }, +}; + +export default config; diff --git a/package.json b/package.json index e939e488d..2bc15e10c 100644 --- a/package.json +++ b/package.json @@ -154,6 +154,7 @@ "@vitest/coverage-v8": "^1.6.0", "@vitest/ui": "^1.6.0", "autoprefixer": "^10.4.13", + "axe-playwright": "^2.0.1", "c8": "^7.12.0", "chalk": "^4.1.2", "concurrently": "^7.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index faa0d62b2..5c29da0c5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -235,6 +235,9 @@ devDependencies: autoprefixer: specifier: ^10.4.13 version: 10.4.13(postcss@8.4.31) + axe-playwright: + specifier: ^2.0.1 + version: 2.0.1(playwright@1.44.1) c8: specifier: ^7.12.0 version: 7.12.0 @@ -5818,6 +5821,10 @@ packages: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: true + /@types/junit-report-builder@3.0.2: + resolution: {integrity: sha512-R5M+SYhMbwBeQcNXYWNCZkl09vkVfAtcPIaCGdzIkkbeaTrVbGQ7HVgi4s+EmM/M1K4ZuWQH0jGcvMvNePfxYA==} + dev: true + /@types/lodash@4.14.200: resolution: {integrity: sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q==} dev: true @@ -6922,6 +6929,30 @@ packages: engines: {node: '>=4'} dev: true + /axe-html-reporter@2.2.3(axe-core@4.9.0): + resolution: {integrity: sha512-io8aCEt4fJvv43W+33n3zEa8rdplH5Ti2v5fOnth3GBKLhLHarNs7jj46xGfpnGnpaNrz23/tXPHC3HbwTzwwA==} + engines: {node: '>=8.9.0'} + peerDependencies: + axe-core: '>=3' + dependencies: + axe-core: 4.9.0 + mustache: 4.2.0 + rimraf: 3.0.2 + dev: true + + /axe-playwright@2.0.1(playwright@1.44.1): + resolution: {integrity: sha512-MHjNjGARulF9XzqSfspmNjw+tpBz4x9o1VlTuLWEUW9fqzhn+xWa1qEpuOIQPbsRWQiLfooDjQAunLeE0PM5AQ==} + peerDependencies: + playwright: '>1.0.0' + dependencies: + '@types/junit-report-builder': 3.0.2 + axe-core: 4.9.0 + axe-html-reporter: 2.2.3(axe-core@4.9.0) + junit-report-builder: 3.2.1 + picocolors: 1.0.0 + playwright: 1.44.1 + dev: true + /axios@1.7.2: resolution: {integrity: sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==} dependencies: @@ -7991,6 +8022,11 @@ packages: resolution: {integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==} engines: {node: '>=0.11'} + /date-format@4.0.3: + resolution: {integrity: sha512-7P3FyqDcfeznLZp2b+OMitV9Sz2lUnsT87WaTat9nVwqsBkTzPG3lPLNwW3en6F4pHUiWzr6vb8CLhjdK9bcxQ==} + engines: {node: '>=4.0'} + dev: true + /debug@2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} peerDependencies: @@ -11917,6 +11953,16 @@ packages: graceful-fs: 4.2.10 dev: true + /junit-report-builder@3.2.1: + resolution: {integrity: sha512-IMCp5XyDQ4YESDE4Za7im3buM0/7cMnRfe17k2X8B05FnUl9vqnaliX6cgOEmPIeWKfJrEe/gANRq/XgqttCqQ==} + engines: {node: '>=8'} + dependencies: + date-format: 4.0.3 + lodash: 4.17.21 + make-dir: 3.1.0 + xmlbuilder: 15.1.1 + dev: true + /just-debounce@1.1.0: resolution: {integrity: sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==} dev: false @@ -12931,6 +12977,11 @@ packages: engines: {node: '>=12.13'} dev: true + /mustache@4.2.0: + resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==} + hasBin: true + dev: true + /mz@2.7.0: resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==} dependencies: @@ -17448,6 +17499,11 @@ packages: resolution: {integrity: sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==} dev: true + /xmlbuilder@15.1.1: + resolution: {integrity: sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==} + engines: {node: '>=8.0'} + dev: true + /xmlchars@2.2.0: resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} dev: true From 3a61e723a21878036d9326bc0bf8db0f0c60df23 Mon Sep 17 00:00:00 2001 From: Laura Whitaker Date: Mon, 17 Jun 2024 11:47:00 -0600 Subject: [PATCH 02/13] Add aria labels to scroll to buttons --- src/lib/holocene/main-content-container.svelte | 2 ++ src/lib/holocene/scroll-to-bottom.svelte | 1 + src/lib/holocene/scroll-to-container.svelte | 14 ++++++++++++-- src/lib/holocene/scroll-to-top.stories.svelte | 6 +++++- src/lib/holocene/scroll-to-top.svelte | 1 + 5 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/lib/holocene/main-content-container.svelte b/src/lib/holocene/main-content-container.svelte index eeb763173..5bfa9160b 100644 --- a/src/lib/holocene/main-content-container.svelte +++ b/src/lib/holocene/main-content-container.svelte @@ -60,5 +60,7 @@ {scrollToBottomHidden} {onScrollToTopClick} {onScrollToBottomClick} + scrollToTopAriaLabel="Scroll to top" + scrollToBottomAriaLabel="Scroll to bottom" /> diff --git a/src/lib/holocene/scroll-to-bottom.svelte b/src/lib/holocene/scroll-to-bottom.svelte index a06e5b44d..58f64a9ca 100644 --- a/src/lib/holocene/scroll-to-bottom.svelte +++ b/src/lib/holocene/scroll-to-bottom.svelte @@ -11,6 +11,7 @@ variant="primary" on:click={onScrollToBottomClick} leadingIcon="arrow-down" + {...$$restProps} /> diff --git a/src/lib/holocene/scroll-to-container.svelte b/src/lib/holocene/scroll-to-container.svelte index 70ffae023..9f274cb28 100644 --- a/src/lib/holocene/scroll-to-container.svelte +++ b/src/lib/holocene/scroll-to-container.svelte @@ -7,12 +7,22 @@ export let scrollToBottomHidden = false; export let onScrollToTopClick: () => void; export let onScrollToBottomClick: () => void; + export let scrollToTopAriaLabel: string; + export let scrollToBottomAriaLabel: string;
-
diff --git a/src/lib/holocene/scroll-to-top.stories.svelte b/src/lib/holocene/scroll-to-top.stories.svelte index 5ef53efb4..b18dd9b1e 100644 --- a/src/lib/holocene/scroll-to-top.stories.svelte +++ b/src/lib/holocene/scroll-to-top.stories.svelte @@ -26,7 +26,11 @@ diff --git a/src/lib/holocene/scroll-to-top.svelte b/src/lib/holocene/scroll-to-top.svelte index df46236a9..a2ecff413 100644 --- a/src/lib/holocene/scroll-to-top.svelte +++ b/src/lib/holocene/scroll-to-top.svelte @@ -11,5 +11,6 @@ variant="primary" on:click={onScrollToTopClick} leadingIcon="arrow-up" + {...$$restProps} /> From 08d921030d6b7aa9d4d64ea077509ac13cc9bb1d Mon Sep 17 00:00:00 2001 From: Laura Whitaker Date: Mon, 17 Jun 2024 16:46:27 -0600 Subject: [PATCH 03/13] Add missing label to range input --- src/lib/holocene/input/range-input.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/holocene/input/range-input.svelte b/src/lib/holocene/input/range-input.svelte index 04784a85b..dd976bb6a 100644 --- a/src/lib/holocene/input/range-input.svelte +++ b/src/lib/holocene/input/range-input.svelte @@ -83,6 +83,7 @@ for="range">{value ?? ''} +