Add storybook a11y testing #142

.circleci/config.yml

@@ -29,6 +29,9 @@ executors:
       REDIS_USE_TLS: "0"
       CLOUDINARY_SECRET: "fake_secret"
       CLOUDINARY_KEY: "fake_key"
+  puppeteer-node:
+    docker:
+      - image: "cimg/node:12.18.4-browsers"
 
 jobs:
   setup:
@@ -58,6 +61,12 @@ jobs:
       - restore_cache:
           key: build-cache-{{ .Environment.CIRCLE_SHA1 }}
       - run: yarn test:shared:ui
+  jest-ui-components-a11y:
+    executor: puppeteer-node
+    steps:
+      - restore_cache:
+          key: build-cache-{{ .Environment.CIRCLE_SHA1 }}
+      - run: yarn test:shared:ui:a11y
   jest-backend:
     executor: standard-node
     steps:
@@ -104,6 +113,9 @@ workflows:
       - jest-ui-components:
           requires:
             - setup
+      - jest-ui-components-a11y:
+          requires:
+            - setup
       - jest-backend:
           requires:
             - setup

CHANGELOG.md

@@ -26,6 +26,7 @@ All notable changes to this project will be documented in this file. The format
 ### UI Components
 
 - Added:
+  - Automated a11y testing for ui-components ([#1450](https://github.com/bloom-housing/bloom/pull/1450))
   - Add ActionBlock component ([#1404](https://github.com/bloom-housing/bloom/pull/1459)) (Marcin Jedras)
 
 ## 1.0.4 / 2021-07-07

package.json

@@ -31,6 +31,7 @@
     "dev:partners": "concurrently \"yarn dev:backend\" \"yarn dev:app:partners\"",
     "dev:public": "concurrently \"yarn dev:backend\" \"yarn dev:app:public\"",
     "test:shared:ui": "cd ui-components && yarn && yarn test",
+    "test:shared:ui:a11y": "cd ui-components && yarn && yarn test:a11y",
     "test:backend:core:dbsetup": "cd backend/core && yarn db:migration:run && yarn db:seed",
     "test:backend:core": "cd backend/core && yarn test",
     "test:e2e:backend:core": "cd backend/core && yarn test:e2e",

ui-components/.storybook/preview.ts

@@ -24,4 +24,15 @@ export const parameters = {
       ],
     },
   },
+  a11y: {
+    config: {
+      rules: [
+        // TODO: Enable color-contrast after resolving #1488
+        {
+          id: "color-contrast",
+          enabled: false,
+        },
+      ],
+    },
+  },
 }

ui-components/__tests__/blocks/ImageCard.test.tsx

@@ -8,13 +8,18 @@ const listing = Object.assign({}, ArcherListing) as Listing
 afterEach(cleanup)
 
 describe("<ImageCard>", () => {
-  it("renders title, subtitle, and image", () => {
+  it("renders title, subtitle, image and alt text", () => {
     const { getByText, getByAltText } = render(
-      <ImageCard imageUrl={"/images/listing.jpg"} title={"My Building"} subtitle={"The Address"} />
+      <ImageCard
+        imageUrl={"/images/listing.jpg"}
+        title={"My Building"}
+        subtitle={"The Address"}
+        description={"A description of the image"}
+      />
     )
     expect(getByText("My Building")).not.toBeNull()
     expect(getByText("The Address")).not.toBeNull()
-    expect(getByAltText("My Building")).not.toBeNull()
+    expect(getByAltText("A description of the image")).not.toBeNull()
   })
   it("renders with a link", () => {
     const { getByAltText } = render(
@@ -25,7 +30,9 @@ describe("<ImageCard>", () => {
         href="/listings"
       />
     )
-    expect(getByAltText("My Building").closest("a")?.getAttribute("href")).toBe("/listings")
+    expect(getByAltText("A picture of the building").closest("a")?.getAttribute("href")).toBe(
+      "/listings"
+    )
   })
   it("renders with an application status bar", () => {
     const { getByText } = render(

ui-components/__tests__/storyshots.spec.ts

@@ -0,0 +1,12 @@
+// From https://www.npmjs.com/package/@storybook/addon-storyshots-puppeteer
+
+import initStoryshots from "@storybook/addon-storyshots"
+import { axeTest } from "@storybook/addon-storyshots-puppeteer"
+import * as path from "path"
+
+initStoryshots({
+  suite: "a11y checks",
+  test: axeTest({
+    storybookUrl: `file://${path.resolve(__dirname, "../storybook-static")}`,
+  }),
+})

ui-components/package.json

@@ -11,7 +11,8 @@
     "start": "start-storybook -s ./public",
     "test": "jest -w 1",
     "test:coverage": "jest -w 1 --coverage --watchAll=false",
-    "prettier": "prettier --write \"**/*.tsx\""
+    "prettier": "prettier --write \"**/*.tsx\"",
+    "test:a11y": "build-storybook -o ./storybook-static && jest storyshot --testRegex=storyshots.spec.ts"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
@@ -21,6 +22,8 @@
     "@storybook/addon-actions": "^6.1.17",
     "@storybook/addon-docs": "^6.0.26",
     "@storybook/addon-knobs": "^6.1.1",
+    "@storybook/addon-storyshots": "^6.3.2",
+    "@storybook/addon-storyshots-puppeteer": "^6.0.26",
     "@storybook/addon-viewport": "^6.0.26",
     "@storybook/react": "^6.0.26",
     "@testing-library/jest-dom": "^5.11.9",
@@ -44,6 +47,8 @@
     "mockdate": "^3.0.2",
     "node-sass": "^4.14.1",
     "postcss-loader": "^3.0.0",
+    "preact": "^10.5.14",
+    "puppeteer": "^10.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",

ui-components/src/actions/Button.stories.tsx

@@ -125,3 +125,17 @@ export const loading = () => (
 export const inaccessible = () => (
   <button style={{ backgroundColor: "red", color: "darkRed" }}>Inaccessible button</button>
 )
+
+// Example of how you can override axe a11y checks
+inaccessible.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: "color-contrast",
+          enabled: false,
+        },
+      ],
+    },
+  },
+}

ui-components/src/blocks/ImageCard.stories.tsx

@@ -32,3 +32,11 @@ export const withListing = () => (
     listing={listing}
   />
 )
+
+export const withDescriptionAsAlt = () => (
+  <ImageCard
+    imageUrl="/images/listing.jpg"
+    title="Hello World"
+    description="An image of the building"
+  />
+)

ui-components/src/blocks/ImageCard.tsx

@@ -10,6 +10,7 @@ export interface ImageCardProps {
   title: string
   href?: string
   listing?: Listing
+  description?: string
 }
 
 const ImageCard = (props: ImageCardProps) => {
@@ -26,7 +27,9 @@ const ImageCard = (props: ImageCardProps) => {
   const image = (
     <div className="image-card__wrapper">
       <figure className="image-card">
-        {props.imageUrl && <img src={props.imageUrl} alt={props.title} />}
+        {props.imageUrl && (
+          <img src={props.imageUrl} alt={props.description || "A picture of the building"} />
+        )}
 
         <figcaption className="image-card__figcaption">
           <h2 className="image-card__title">{props.title}</h2>

ui-components/src/blocks/InfoCard.tsx

@@ -18,13 +18,13 @@ const InfoCard = (props: InfoCardProps) => {
   return (
     <div className={wrapperClasses.join(" ")}>
       {props.externalHref ? (
-        <h4 className="info-card__title">
+        <h3 className="info-card__title">
           <a href={props.externalHref} target="_blank">
             {props.title}
           </a>
-        </h4>
+        </h3>
       ) : (
-        <h4 className="info-card__title">{props.title}</h4>
+        <h3 className="info-card__title">{props.title}</h3>
       )}
       {typeof props.children == "string" ? (
         <div className="markdown">

ui-components/src/forms/Dropzone.stories.tsx

@@ -42,7 +42,12 @@ export const defaultDropzone = () => {
       {progressValue == 0 && (
         <p className="mt-16">(Provide Cloudinary credentials via the Knobs below.)</p>
       )}
-      <img src={cloudinaryImage} style={{ width: "200px" }} />
+      <img
+        src={cloudinaryImage}
+        style={{ width: "200px" }}
+        role={cloudinaryImage ? undefined : "none"}
+        alt={cloudinaryImage && "uploaded file"}
+      />
     </>
   )
 }

ui-components/src/headers/SiteHeader.tsx

@@ -79,7 +79,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
           <img
             className={`logo__image ${props.imageOnly && "navbar-image-only"}`}
             src={props.logoSrc}
-            alt={props.title}
+            alt={"Site logo"}
           />
           {!props.imageOnly && <div className="logo__title">{props.title}</div>}
         </div>

ui-components/src/navigation/TabNav.stories.tsx

@@ -18,6 +18,23 @@ export const Default = () => {
     </TabNav>
   )
 }
+// TODO: Fix tab roles for this component in #1489
+Default.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: "no-focusable-content",
+          enabled: false,
+        },
+        {
+          id: "nested-interactive",
+          enabled: false,
+        },
+      ],
+    },
+  },
+}
 
 export const Other = () => {
   return (
@@ -31,3 +48,21 @@ export const Other = () => {
     </TabNav>
   )
 }
+
+// TODO: Fix tab roles for this component in #1489
+Other.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: "no-focusable-content",
+          enabled: false,
+        },
+        {
+          id: "nested-interactive",
+          enabled: false,
+        },
+      ],
+    },
+  },
+}

ui-components/src/sections/InfoCardGrid.stories.tsx

@@ -33,7 +33,7 @@ More content
       className="is-normal-primary-lighter"
     >
       {`
-### Header 3
+#### Header 4
 
 * A list
 * of items

ui-components/src/tables/MinimalTable.stories.tsx

@@ -40,12 +40,12 @@ const headersWithImage = { image: "Image", ...headers }
 const dataWithImage = [...data] as any
 dataWithImage[0].image = (
   <TableThumbnail>
-    <img src="/images/listing.jpg" />
+    <img src="/images/listing.jpg" alt="listing picture" />
   </TableThumbnail>
 )
 dataWithImage[1].image = (
   <TableThumbnail>
-    <img src="/images/logo_glyph.svg" />
+    <img src="/images/logo_glyph.svg" alt="site logo" />
   </TableThumbnail>
 )
 

ui-components/src/tables/StandardTable.stories.tsx

@@ -40,13 +40,13 @@ const dataWithImage = [...data] as any
 dataWithImage[0].image = (
   <TableThumbnail>
     <a href="#">
-      <img src="/images/listing.jpg" />
+      <img src="/images/listing.jpg" alt="listing image" />
     </a>
   </TableThumbnail>
 )
 dataWithImage[1].image = (
   <TableThumbnail>
-    <img src="/images/logo_glyph.svg" />
+    <img src="/images/logo_glyph.svg" alt="logo" />
   </TableThumbnail>
 )