diff --git a/.storybook/main.ts b/.storybook/main.ts index f5898702..a954872e 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,7 +1,7 @@ import type { StorybookConfig } from '@storybook/react-vite'; const config: StorybookConfig = { stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'], - addons: ['@storybook/addon-links', '@storybook/addon-essentials'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'], framework: { name: '@storybook/react-vite', options: {}, diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts index 922f430e..436b5fd2 100644 --- a/.storybook/test-runner.ts +++ b/.storybook/test-runner.ts @@ -1,6 +1,7 @@ import { TestRunnerConfig } from '@storybook/test-runner'; import { toMatchImageSnapshot } from 'jest-image-snapshot'; +import { injectAxe, checkA11y } from 'axe-playwright'; const config: TestRunnerConfig = { tags: { @@ -13,11 +14,22 @@ const config: TestRunnerConfig = { setup() { expect.extend({ toMatchImageSnapshot }); }, + async preVisit(page) { + await injectAxe(page); + }, async postVisit(page) { const elementHandler = await page.$('#storybook-root'); const innerHTML = await elementHandler?.innerHTML(); if (!innerHTML) throw new Error('No innerHTML found'); expect(innerHTML).toMatchSnapshot(); + + await checkA11y(page, '#storybook-root', { + detailedReport: true, + detailedReportOptions: { + html: true, + }, + verbose: false, + }); }, }; diff --git a/package.json b/package.json index 0b30f51c..ef554b19 100644 --- a/package.json +++ b/package.json @@ -21,16 +21,17 @@ "@rollup/plugin-commonjs": "^24.1.0", "@rollup/plugin-node-resolve": "^15.0.2", "@rollup/plugin-typescript": "^11.1.0", - "@storybook/addon-actions": "^7.6.7", - "@storybook/addon-essentials": "^7.6.7", - "@storybook/addon-links": "^7.6.7", - "@storybook/addons": "^7.6.7", - "@storybook/blocks": "^7.6.7", - "@storybook/preview-web": "^7.6.7", - "@storybook/react": "^7.6.7", - "@storybook/react-vite": "^7.6.7", + "@storybook/addon-a11y": "^7.6.10", + "@storybook/addon-actions": "^7.6.10", + "@storybook/addon-essentials": "^7.6.10", + "@storybook/addon-links": "^7.6.10", + "@storybook/addons": "^7.6.10", + "@storybook/blocks": "^7.6.10", + "@storybook/preview-web": "^7.6.10", + "@storybook/react": "^7.6.10", + "@storybook/react-vite": "^7.6.10", "@storybook/test-runner": "^0.16.0", - "@storybook/theming": "^7.6.7", + "@storybook/theming": "^7.6.10", "@types/enzyme": "^3.10.8", "@types/jest": "^26.0.23", "@types/jest-axe": "^3.5.1", @@ -41,6 +42,7 @@ "@types/rollup-plugin-peer-deps-external": "^2.2.1", "@typescript-eslint/eslint-plugin": "^4.23.0", "@typescript-eslint/parser": "^4.23.0", + "axe-playwright": "^2.0.1", "babel-loader": "^8.2.2", "chromatic": "^6.17.3", "enzyme": "^3.11.0", @@ -67,7 +69,7 @@ "rollup-plugin-dts": "^5.3.0", "rollup-plugin-peer-deps-external": "^2.2.4", "sass": "^1.32.12", - "storybook": "^7.6.7", + "storybook": "^7.6.10", "ts-jest": "^26.5.6", "ts-node": "^9.1.1", "typescript": "4.2.4", diff --git a/src/components/header/components/Search.tsx b/src/components/header/components/Search.tsx index 94bbc9e8..ec8fdf41 100644 --- a/src/components/header/components/Search.tsx +++ b/src/components/header/components/Search.tsx @@ -46,7 +46,6 @@ const Search: React.FC = ({ action, method, id, visuallyHiddenText, Search.defaultProps = { method: 'get', - role: 'search', id: 'search-field', visuallyHiddenText: 'Search the NHS website', type: 'search', diff --git a/stories/Components/Radios.stories.tsx b/stories/Components/Radios.stories.tsx index 2656dbcb..6c9d393e 100644 --- a/stories/Components/Radios.stories.tsx +++ b/stories/Components/Radios.stories.tsx @@ -207,7 +207,12 @@ export const RadiosWithErrorString: Story = { - setError(e.currentTarget.value)} /> + setError(e.currentTarget.value)} + label="Use this input to set the error message" + /> ); }, diff --git a/stories/Components/Select.stories.tsx b/stories/Components/Select.stories.tsx index 71561254..98268290 100644 --- a/stories/Components/Select.stories.tsx +++ b/stories/Components/Select.stories.tsx @@ -72,6 +72,7 @@ export const SelectWithErrorString: Story = { setError(e.currentTarget.value)} value={error} /> diff --git a/stories/Components/SkipLink.stories.tsx b/stories/Components/SkipLink.stories.tsx index f9301ad8..78a67716 100644 --- a/stories/Components/SkipLink.stories.tsx +++ b/stories/Components/SkipLink.stories.tsx @@ -10,7 +10,6 @@ const CodeText: React.FC = (props) => ( marginRight: 5, fontSize: 14, padding: 3, - backgroundColor: 'rgba(255, 0, 0, 0.15)', borderRadius: 5, }} {...props} @@ -24,14 +23,14 @@ const meta: Meta = { focusTargetRef: { table: { disable: true } }, }, render: (args) => ( - <> +
Press tab to show the SkipLink - +
), }; export default meta; diff --git a/stories/Components/Textarea.stories.tsx b/stories/Components/Textarea.stories.tsx index 3127c223..8ebf5192 100644 --- a/stories/Components/Textarea.stories.tsx +++ b/stories/Components/Textarea.stories.tsx @@ -68,6 +68,7 @@ export const TextareaWithErrorString: Story = { setError(e.currentTarget.value)} value={error} /> diff --git a/stories/Components/__snapshots__/Header.stories.tsx.snap b/stories/Components/__snapshots__/Header.stories.tsx.snap index 1a33d1f3..44283e37 100644 --- a/stories/Components/__snapshots__/Header.stories.tsx.snap +++ b/stories/Components/__snapshots__/Header.stories.tsx.snap @@ -73,7 +73,6 @@ exports[`Components/Header BasicHeader smoke-test 1`] = `
+
+ - Press - - tab - - to show the SkipLink -
- - Skip to main content - +
+
+ Press + + tab + + to show the SkipLink +
+ + Skip to main content + +
`; exports[`Components/SkipLink Standard smoke-test 1`] = ` -
- Press - - tab - - to show the SkipLink -
- - Skip to main content - +
+
+ Press + + tab + + to show the SkipLink +
+ + Skip to main content + +
`; diff --git a/stories/Components/__snapshots__/Textarea.stories.tsx.snap b/stories/Components/__snapshots__/Textarea.stories.tsx.snap index 0aa79951..f7afc219 100644 --- a/stories/Components/__snapshots__/Textarea.stories.tsx.snap +++ b/stories/Components/__snapshots__/Textarea.stories.tsx.snap @@ -99,7 +99,14 @@ exports[`Components/Textarea TextareaWithErrorString smoke-test 1`] = `
+