Storybook a11y tests

.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: {},

.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,
+    });
   },
 };
 

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",

src/components/header/components/Search.tsx

@@ -46,7 +46,6 @@ const Search: React.FC<SearchProps> = ({ action, method, id, visuallyHiddenText,
 
 Search.defaultProps = {
   method: 'get',
-  role: 'search',
   id: 'search-field',
   visuallyHiddenText: 'Search the NHS website',
   type: 'search',

stories/Components/Radios.stories.tsx

@@ -207,7 +207,12 @@ export const RadiosWithErrorString: Story = {
             </Radios.Radio>
           </Radios>
         </Fieldset>
-        <Input id="error-input" value={error} onChange={(e) => setError(e.currentTarget.value)} />
+        <Input
+          id="error-input"
+          value={error}
+          onChange={(e) => setError(e.currentTarget.value)}
+          label="Use this input to set the error message"
+        />
       </>
     );
   },

stories/Components/Select.stories.tsx

@@ -72,6 +72,7 @@ export const SelectWithErrorString: Story = {
         </Select>
         <Input
           id="error-string-input"
+          label="Use this input to change the error message"
           onChange={(e) => setError(e.currentTarget.value)}
           value={error}
         />

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<typeof SkipLink> = {
     focusTargetRef: { table: { disable: true } },
   },
   render: (args) => (
-    <>
+    <main id="maincontent">
       <Hint>
         Press
         <CodeText>tab</CodeText>
         to show the SkipLink
       </Hint>
       <SkipLink disableDefaultBehaviour={args.disableDefaultBehaviour} />
-    </>
+    </main>
   ),
 };
 export default meta;

stories/Components/Textarea.stories.tsx

@@ -68,6 +68,7 @@ export const TextareaWithErrorString: Story = {
         <Input
           id="no-ni-reason-input"
           name="no-ni-reason-input"
+          label="Use this input to change the error message"
           onChange={(e) => setError(e.currentTarget.value)}
           value={error}
         />

stories/Components/__snapshots__/Header.stories.tsx.snap

@@ -73,7 +73,6 @@ exports[`Components/Header BasicHeader smoke-test 1`] = `
             </label>
             <input class="nhsuk-search__input"
                    id="search-field"
-                   role="search"
                    type="search"
                    autocomplete="off"
                    placeholder="Search"
@@ -326,7 +325,6 @@ exports[`Components/Header HeaderWithCustomNavItemComponent smoke-test 1`] = `
             </label>
             <input class="nhsuk-search__input"
                    id="search-field"
-                   role="search"
                    type="search"
                    autocomplete="off"
                    placeholder="Search"
@@ -524,7 +522,6 @@ exports[`Components/Header HeaderWithCustomNavMenuCloseAndNavItemListComponent s
             </label>
             <input class="nhsuk-search__input"
                    id="search-field"
-                   role="search"
                    type="search"
                    autocomplete="off"
                    placeholder="Search"
@@ -982,7 +979,6 @@ exports[`Components/Header HeaderWithSearch smoke-test 1`] = `
             </label>
             <input class="nhsuk-search__input"
                    id="search-field"
-                   role="search"
                    type="search"
                    autocomplete="off"
                    placeholder="Search"
@@ -1103,7 +1099,6 @@ exports[`Components/Header OrganisationalHeader smoke-test 1`] = `
             </label>
             <input class="nhsuk-search__input"
                    id="search-field"
-                   role="search"
                    type="search"
                    autocomplete="off"
                    placeholder="Search"
@@ -1346,7 +1341,6 @@ exports[`Components/Header OrganisationalHeaderWithWhiteHeader smoke-test 1`] =
             </label>
             <input class="nhsuk-search__input"
                    id="search-field"
-                   role="search"
                    type="search"
                    autocomplete="off"
                    placeholder="Search"

stories/Components/__snapshots__/Radios.stories.tsx.snap

@@ -343,7 +343,14 @@ exports[`Components/Radios RadiosWithErrorString smoke-test 1`] = `
   </fieldset>
 </div>
 <div class="nhsuk-form-group">
+  <label class="nhsuk-label"
+         id="error-input--label"
+         for="error-input"
+  >
+    Use this input to set the error message
+  </label>
   <input class="nhsuk-input"
+         aria-labelledby="error-input--label"
          name="error-input"
          id="error-input"
          type="text"

stories/Components/__snapshots__/Select.stories.tsx.snap

@@ -66,7 +66,14 @@ exports[`Components/Select SelectWithErrorString smoke-test 1`] = `
   </select>
 </div>
 <div class="nhsuk-form-group">
+  <label class="nhsuk-label"
+         id="error-string-input--label"
+         for="error-string-input"
+  >
+    Use this input to change the error message
+  </label>
   <input class="nhsuk-input"
+         aria-labelledby="error-string-input--label"
          name="error-string-input"
          id="error-string-input"
          type="text"

stories/Components/__snapshots__/SkipLink.stories.tsx.snap

@@ -1,32 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Components/SkipLink SkipLinkWithDefaultBehaviourDisabled smoke-test 1`] = `
-<div class="nhsuk-hint">
-  Press
-  <span style="font-family: monospace; margin-left: 5px; margin-right: 5px; font-size: 14px; padding: 3px; background-color: rgba(255, 0, 0, 0.15); border-radius: 5px;">
-    tab
-  </span>
-  to show the SkipLink
-</div>
-<a class="nhsuk-skip-link"
-   tabindex="0"
->
-  Skip to main content
-</a>
+<main id="maincontent">
+  <div class="nhsuk-hint">
+    Press
+    <span style="font-family: monospace; margin-left: 5px; margin-right: 5px; font-size: 14px; padding: 3px; border-radius: 5px;">
+      tab
+    </span>
+    to show the SkipLink
+  </div>
+  <a class="nhsuk-skip-link"
+     tabindex="0"
+  >
+    Skip to main content
+  </a>
+</main>
 `;
 
 exports[`Components/SkipLink Standard smoke-test 1`] = `
-<div class="nhsuk-hint">
-  Press
-  <span style="font-family: monospace; margin-left: 5px; margin-right: 5px; font-size: 14px; padding: 3px; background-color: rgba(255, 0, 0, 0.15); border-radius: 5px;">
-    tab
-  </span>
-  to show the SkipLink
-</div>
-<a class="nhsuk-skip-link"
-   href="#maincontent"
-   tabindex="0"
->
-  Skip to main content
-</a>
+<main id="maincontent">
+  <div class="nhsuk-hint">
+    Press
+    <span style="font-family: monospace; margin-left: 5px; margin-right: 5px; font-size: 14px; padding: 3px; border-radius: 5px;">
+      tab
+    </span>
+    to show the SkipLink
+  </div>
+  <a class="nhsuk-skip-link"
+     href="#maincontent"
+     tabindex="0"
+  >
+    Skip to main content
+  </a>
+</main>
 `;

stories/Components/__snapshots__/Textarea.stories.tsx.snap

@@ -99,7 +99,14 @@ exports[`Components/Textarea TextareaWithErrorString smoke-test 1`] = `
   </textarea>
 </div>
 <div class="nhsuk-form-group">
+  <label class="nhsuk-label"
+         id="no-ni-reason-input--label"
+         for="no-ni-reason-input"
+  >
+    Use this input to change the error message
+  </label>
   <input class="nhsuk-input"
+         aria-labelledby="no-ni-reason-input--label"
          name="no-ni-reason-input"
          id="no-ni-reason-input"
          type="text"