feat: accessibility tests

.storybook/main.js

@@ -9,6 +9,7 @@ module.exports = {
   },
 
   addons: [
+    '@storybook/addon-a11y',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
@@ -32,12 +33,12 @@ module.exports = {
 
   framework: {
     name: '@storybook/react-webpack5',
-    options: {}
+    options: {},
   },
 
   staticDirs: ['../static', '../public'],
 
   docs: {
-    autodocs: true
-  }
+    autodocs: true,
+  },
 };

.storybook/preview.js

@@ -25,4 +25,4 @@ export const parameters = {
 mswInitialize();
 
 // Provide the MSW addon decorator globally
-export const decorators = [mswDecorator];
+export const decorators = [mswDecorator];

.storybook/test-runner.js

@@ -0,0 +1,14 @@
+const { injectAxe, checkA11y } = require('axe-playwright');
+module.exports = {
+    preVisit: async (page) => {
+    // before the story has been rendered inject AXE
+    await injectAxe(page);
+  },
+  postVisit: async (page) => {
+    // after the story has been rendered run AXE checks only on #storybook-root, not the whole page
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: { html: true },
+    });
+  },
+};

docker-compose.yml

@@ -7,7 +7,7 @@ services:
       target: ${DOCKER_TARGET:-development}
     ports:
       - '3000:3000'
-      - '6006:6006'  # Storybook
+      - '6006:6006' # Storybook
     volumes:
       - .:/app/
-      - /app/node_modules  # Exclude node_modules
+      - /app/node_modules # Exclude node_modules

package.json

@@ -11,6 +11,7 @@
     "lint": "yarn eslint \"src/**/*.{ts,tsx}\" && yarn prettier ./src -c",
     "lint-fix": "yarn eslint \"src/**/*.{ts,tsx}\" --fix && yarn prettier ./src -w",
     "test": "jest",
+    "test-storybook": "test-storybook",
     "build": "rollup -c --bundleConfigAsCjs",
     "docker:dev": "cross-env DOCKER_TARGET=development docker compose up",
     "docker:prod": "cross-env DOCKER_TARGET=production docker compose up",
@@ -71,6 +72,7 @@
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.2.0",
+    "@storybook/addon-a11y": "^7.3.1",
     "@storybook/addon-actions": "^7.3.1",
     "@storybook/addon-essentials": "^7.3.1",
     "@storybook/addon-interactions": "^7.3.1",
@@ -79,6 +81,7 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^7.3.1",
     "@storybook/react-webpack5": "^7.3.1",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.0",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/react": "^14.1.0",
@@ -91,6 +94,7 @@
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
+    "axe-playwright": "^1.1.11",
     "babel-loader": "^9.1.3",
     "classnames": "^2.3.1",
     "cross-env": "^7.0.3",

public/mockServiceWorker.js

@@ -300,4 +300,4 @@ function sleep(timeMs) {
 async function respondWithMock(response) {
   await sleep(response.delay)
   return new Response(response.body, response)
-}
+}

src/apollo/pageContent/PageContent.tsx

@@ -6,6 +6,7 @@ import { PageContent as PageContentWithoutData } from '../../core/pageContent/Pa
 import type { PageContentProps as PageContentPropsWithoutData } from '../../core/pageContent/types';
 import styles from './pageContent.module.scss';
 import useApolloPageContext from '../page/useApolloPageContext';
+import { MAIN_CONTENT_ID } from '../../common/constants';
 
 export type PageProps = Omit<PageContentPropsWithoutData, 'page'> & {
   notFoundPageContent?: JSX.Element;
@@ -32,7 +33,7 @@ export function PageContent({
 
   if (pageQuery.loading) {
     return (
-      <div className={styles.loadingSpinnerContainer}>
+      <div id={MAIN_CONTENT_ID} className={styles.loadingSpinnerContainer}>
         <LoadingSpinner multicolor />
       </div>
     );

src/common/components/grid/Grid.stories.tsx

@@ -16,7 +16,7 @@ const Template: StoryFn<typeof Grid> = (args) => {
   const getCellContent = (i: number) => (
     <div
       style={{
-        backgroundColor: 'salmon',
+        backgroundColor: '#333',
         padding: 4,
         color: 'white',
         textAlign: 'center',

src/core/card/Card.stories.tsx

@@ -30,13 +30,7 @@ const Template: StoryFn<typeof Card> = (args) => (
     }}
   >
     <StoryContainer maxWidth={640}>
-      <Card
-        withBorder
-        hasLink
-        openLinkInNewTab
-        imageLabel="Article"
-        {...args}
-      />
+      <Card withBorder hasLink openLinkInNewTab {...args} />
     </StoryContainer>
   </ConfigProvider>
 );

src/core/card/Card.tsx

@@ -225,6 +225,7 @@ export function Card({
               openInNewTab={openLinkInNewTab}
               iconLeft={<IconArrowRight aria-hidden="true" />}
               showExternalIcon={false}
+              aria-label={ariaLabel}
             >
               {linkArrowLabel && (
                 <span className={styles.linkArrowLabel}>{linkArrowLabel}</span>

src/core/card/LargeCard.tsx

@@ -46,52 +46,64 @@ export function LargeCard({
   const [isHovered, setIsHovered] = useState(false);
   const handleToggleActive = () => setIsHovered((val) => !val);
 
-  return (
-    <LinkBox
-      id={id}
-      href={url}
-      className={classNames(styles.cardLink, className)}
-      aria-label={ariaLabel || ''}
-      openInNewTab={openInNewTab}
-      onMouseEnter={handleToggleActive}
-      onMouseLeave={handleToggleActive}
+  const content = (
+    <div
+      className={classNames(
+        styles[`${imagePosition}`],
+        styles.cardWrapper,
+        withBorder && styles.withBorder,
+        isHovered && styles.isHovered,
+      )}
     >
-      <div
-        className={classNames(
-          styles[`${imagePosition}`],
-          styles.cardWrapper,
-          withBorder && styles.withBorder,
-          isHovered && styles.isHovered,
+      <BackgroundImage
+        id={id}
+        url={imageUrl}
+        labelTag={imageLabel}
+        className={styles.imageWrapper}
+      />
+      <div className={styles.textWrapper}>
+        {title && <div className={styles.title}>{title}</div>}
+        {subTitle && <div className={styles.subTitle}>{subTitle}</div>}
+        <div className={classNames(styles.text, clampText && styles.clamp)}>
+          {text}
+        </div>
+        {customContent && (
+          <div className={styles.customContent}>{customContent}</div>
         )}
-      >
-        <BackgroundImage
-          id={id}
-          url={imageUrl}
-          labelTag={imageLabel}
-          className={styles.imageWrapper}
-        />
-        <div className={styles.textWrapper}>
-          {title && <div className={styles.title}>{title}</div>}
-          {subTitle && <div className={styles.subTitle}>{subTitle}</div>}
-          <div className={classNames(styles.text, clampText && styles.clamp)}>
-            {text}
+        {url && hasLink && (
+          <div className={styles.buttonWrapper}>
+            <Link
+              tabIndex={-1}
+              href={url}
+              openInNewTab={openInNewTab}
+              iconLeft={<IconArrowRight aria-hidden="true" />}
+              showExternalIcon={false}
+            />
           </div>
-          {customContent && (
-            <div className={styles.customContent}>{customContent}</div>
-          )}
-          {url && hasLink && (
-            <div className={styles.buttonWrapper}>
-              <Link
-                tabIndex={-1}
-                href={url}
-                openInNewTab={openInNewTab}
-                iconLeft={<IconArrowRight aria-hidden="true" />}
-                showExternalIcon={false}
-              />
-            </div>
-          )}
-        </div>
+        )}
       </div>
-    </LinkBox>
+    </div>
+  );
+
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {hasLink ? (
+        <LinkBox
+          id={id}
+          href={url}
+          className={classNames(styles.cardLink, className)}
+          aria-label={ariaLabel || ''}
+          openInNewTab={openInNewTab}
+          onMouseEnter={handleToggleActive}
+          onMouseLeave={handleToggleActive}
+        >
+          {content}
+        </LinkBox>
+      ) : (
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        <>{content}</>
+      )}
+    </>
   );
 }

src/core/hero/Hero.tsx

@@ -137,6 +137,7 @@ export default function Hero({
                   <Link
                     href={backUrl}
                     openInNewTab={false}
+                    aria-label="Back"
                     iconLeft={<IconArrowLeft aria-hidden="true" />}
                   />
                 </div>

src/core/pageContent/__mocks__/page.mock.ts

@@ -252,7 +252,7 @@ const mockPage: PageQuery['page'] = {
   <p><strong>Kulttuurikasvatussuunnitelma </strong></p>
   <p>Kulttuurikasvatussuunnitelma&nbsp;Helsingissä toimii Kulttuuri- ja vapaa-aika -toimialan, Kasvatus ja koulutus -toimialan&nbsp;(sis. yksityisen koulut)&nbsp;sekä taide-&nbsp;ja&nbsp;kulttuuritoimijoiden välisenä&nbsp;ohjaavana suunnitelmana.&nbsp;Yhteistyön tavoitteena on&nbsp;säännöllisten ja helposti&nbsp;lähestyttävien toimintatapojen, kuten kulttuuripolkujen,&nbsp;viestintäpalveluiden (esim. Kultus.fi) ja alan&nbsp;verkostojen&nbsp;kehittäminen ja ylläpitäminen. Suunnitelma koskee varhaiskasvatusta ja kouluja. Taide- ja taitoaineiden tavoitteet määritellään opetussuunnitelmissa ja varhaiskasvatussuunnitelmissa. Kulttuurikasvatusta voi sisältyä myös näiden kokonaisuuksien sisään.&nbsp;</p>
   <p>Helsingin kulttuurikasvatussuunnitelma koskee kulttuuriperinnön, kulttuuriperintökasvatuksen, taiteen ja taidekasvatuksen sisältöjä, menetelmiä ja paikkoja. Se ei kuitenkaan ohjaa lapsen, nuoren tai perheen vapaa-ajan kulttuuri- ja taidekasvatuksen yhteistyön muotoja.</p>
-  <ul><li>List item 1</li><li>List item 1</li><li>List item 1</li><ul><li>Nested list item 1</li></ul></ul>
+  <ul><li>List item 1</li><li>List item 1</li><li>List item 1</li><li><ul><li>Nested list item 1</li></ul></li></ul>
   `,
   title: 'Kulttuurikasvatus',
   featuredImage: {

src/core/pageContent/__mocks__/pageWithDiverseContent.mock.ts

@@ -41,7 +41,7 @@ const pageWithDiverseContent: PageQuery['page'] = {
       </thead>
       <tbody>
         <tr>
-          <td>Row 1 Cell 1 with <a href="https://hel.fi">Link</a></td>
+          <td>Row 1 Cell 1 with <a aria-label="link" href="https://hel.fi">Link</a></td>
           <td>Row 1 Cell 2</td>
         </tr>
         <tr>
@@ -62,7 +62,7 @@ const pageWithDiverseContent: PageQuery['page'] = {
       </thead>
       <tbody>
         <tr>
-          <td>Row 1 Cell 1 with <a href="https://hel.fi">Link</a></td>
+          <td>Row 1 Cell 1 with <a aria-label="link" href="https://hel.fi">Link</a></td>
           <td>Row 1 Cell 2</td>
         </tr>
         <tr>
@@ -72,7 +72,7 @@ const pageWithDiverseContent: PageQuery['page'] = {
       </tbody>
     </table>
   </figure>
-  <p><a href="https://hel.fi">Link</a></p>
+  <p><a aria-label="link" href="https://hel.fi">Link</a></p>
   <p><abbr title="City of Helsinki">CoH</abbr></p>
   <p><b>Bold</b></p>
   <p><bdi>إيان</bdi>: 90 points</p>

src/core/pageContent/__tests__/__snapshots__/Page.test.tsx.snap

@@ -78,11 +78,13 @@ exports[`PageContent renders page with expected content 1`] = `
     <li>
       List item 1
     </li>
-    <ul>
-      <li>
-        Nested list item 1
-      </li>
-    </ul>
+    <li>
+      <ul>
+        <li>
+          Nested list item 1
+        </li>
+      </ul>
+    </li>
   </ul>
 
 

tsconfig.json

@@ -16,6 +16,14 @@
     "alwaysStrict": true
   },
   "include": ["src", "jest-setup.ts"],
+  "exclude": [
+    "dist",
+    "**/__mocks__/*",
+    "**/node_modules/*",
+    "build",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx"
+  ],
   "compileOnSave": false,
   "buildOnSave": false
 }