fix: accessibility testing and fixes (#290)

* chore(.gitignore): add storybook build to the gitignore

* test(accessibility): add axe-storybook-testing for a11y testing

See https://github.com/chanzuckerberg/axe-storybook-testing#options for CLI options

* test(accordion): fix duplicate ids in Accordion story

* fix(accessibility): add accessible labels to icon button examples

* test(accessibility): disable axe rules that aren't applicable or should be resolved at some point

* build(storybook): consistently access storybook at docs-build/

Instead of sometimes docs-build/ and sometimes storybook-static/

* test(accessibility): run accessibility tests on CI

* build: simplify setting up the right version of node

.github/workflows/storybook-tests.yml

@@ -8,17 +8,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version-file: ".node-version"
       - name: Install dependencies
         run: yarn
       - name: Install Playwright
         run: npx playwright install --with-deps
       - name: Build Storybook
-        run: yarn build-storybook-for-tests
+        run: yarn build-storybook --quiet
+      - name: Run accessibility tests 🤟
+        run: yarn storybook:axeOnly
       - name: Serve Storybook and run tests
         run: |
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 6006 --silent" \
+            "npx http-server docs-build --port 6006 --silent" \
             "npx wait-on tcp:6006 && yarn test-storybook"

.gitignore

@@ -75,12 +75,12 @@ typings/
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 
-# Next.js build output
+# build / generated output
 .next
-
-# Nuxt.js build / generate output
 .nuxt
 dist
+docs-build
+storybook-static
 
 # Gatsby files
 .cache/
@@ -107,4 +107,4 @@ dist
 .vscode
 
 # OS Files
-.DS_Store
+.DS_Store

package.json

@@ -10,6 +10,7 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.13.8",
+    "@chanzuckerberg/axe-storybook-testing": "^6.2.0",
     "@chanzuckerberg/story-utils": "^2.1.0",
     "@emotion/core": "^11.0.0",
     "@emotion/css": "^11.1.3",
@@ -102,7 +103,6 @@
     "build-watch": "rollup -c -w",
     "start": "start-storybook -p 6006",
     "build-storybook": "build-storybook -o docs-build",
-    "build-storybook-for-tests": "build-storybook --quiet",
     "test-storybook": "test-storybook",
     "lint": "concurrently \"node_modules/.bin/eslint src/**/*.{ts,tsx} --quiet --fix\" \"node_modules/.bin/stylelint --fix '**/*.{js,ts,tsx,css}'\"  \"npm run type-check\"",
     "type-check": "tsc --noEmit",
@@ -112,6 +112,8 @@
     "test": "jest",
     "sd-build": "yarn style-dictionary build --config src/common/styles-dictionary/config.js",
     "chromatic": "npx chromatic --exit-zero-on-changes --project-token=cad4aacbfeba",
+    "storybook:axe": "yarn build-storybook && yarn storybook:axeOnly",
+    "storybook:axeOnly": "axe-storybook --build-dir docs-build",
     "build-and-pack-a-new-version": "yarn build && yarn version --no-git-tag-version --patch && yarn pack",
     "install-czifui-locally": "yarn add -D file:\"czifui-v$npm_package_version.tgz\"",
     "prenamespace-check": "rm czifui-*.tgz && yarn remove czifui && yarn build-and-pack-a-new-version && yarn install-czifui-locally",

src/core/Accordion/__snapshots__/index.test.tsx.snap

@@ -7,10 +7,10 @@ exports[`<Accordion /> Test story renders snapshot 1`] = `
   id="test-story"
 >
   <div
-    aria-controls="test-story-panel-content"
+    aria-controls="test-story-header-panel-content"
     aria-expanded="false"
     class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-q39ari-MuiButtonBase-root-MuiAccordionSummary-root"
-    id="test-story"
+    id="test-story-header"
     role="button"
     tabindex="0"
   >
@@ -49,7 +49,7 @@ exports[`<Accordion /> Test story renders snapshot 1`] = `
         class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
       >
         <div
-          aria-labelledby="test-story"
+          aria-labelledby="test-story-header"
           class="MuiAccordion-region"
           role="region"
         >

src/core/Accordion/index.stories.tsx

@@ -8,7 +8,7 @@ const Template: Story = (props: Args) => {
   const { id, subtitle, useDivider, togglePosition } = props;
   return (
     <Accordion id={id} useDivider={useDivider} togglePosition={togglePosition}>
-      <AccordionHeader id={id} subtitle={subtitle}>
+      <AccordionHeader id={`${id}-header`} subtitle={subtitle}>
         Accordion Header
       </AccordionHeader>
       <AccordionDetails>

src/core/Banner/__snapshots__/banner.test.tsx.snap

@@ -32,6 +32,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
       Banner text lorem ipsum dolor mit
     </div>
     <button
+      aria-label="Close"
       class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-reo6um-MuiButtonBase-root-MuiIconButton-root"
       data-testid="iconButton"
       tabindex="0"
@@ -96,6 +97,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
       </a>
     </div>
     <button
+      aria-label="Close"
       class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-quxuam-MuiButtonBase-root-MuiIconButton-root"
       data-testid="iconButton"
       tabindex="0"
@@ -151,6 +153,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
       Stylable. Should have pink background color
     </div>
     <button
+      aria-label="Close"
       class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-reo6um-MuiButtonBase-root-MuiIconButton-root"
       data-testid="iconButton"
       tabindex="0"
@@ -207,6 +210,7 @@ exports[`<Banner /> Test story renders snapshot 1`] = `
     test text
   </div>
   <button
+    aria-label="Close"
     class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-reo6um-MuiButtonBase-root-MuiIconButton-root"
     data-testid="iconButton"
     tabindex="0"

src/core/Banner/index.stories.tsx

@@ -34,6 +34,11 @@ export default {
     },
   },
   component: Demo,
+  parameters: {
+    axe: {
+      disabledRules: ["landmark-no-duplicate-banner", "landmark-unique"],
+    },
+  },
   title: "Banner",
 } as Meta<Args>;
 
@@ -83,6 +88,14 @@ const LivePreviewTemplate: Story = (args) => <LivePreviewDemo {...args} />;
 export const LivePreview = LivePreviewTemplate.bind({});
 
 LivePreview.parameters = {
+  axe: {
+    disabledRules: [
+      // FIXME - examples fail color contrast requirements.
+      "color-contrast",
+      "landmark-no-duplicate-banner",
+      "landmark-unique",
+    ],
+  },
   controls: {
     exclude: ["dismissible", "sdsType", "textChild", "dismissed"],
   },

src/core/Banner/index.tsx

@@ -50,6 +50,7 @@ const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
       </Centered>
       {dismissible && (
         <StyledButtonIcon
+          aria-label="Close"
           bannerType={sdsType}
           sdsType="tertiary"
           sdsSize="small"

src/core/ButtonIcon/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<ButtonIcon /> Test story renders snapshot 1`] = `
 <button
-  aria-label="info"
+  aria-label="search"
   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1hws01p-MuiButtonBase-root-MuiIconButton-root"
   data-testid="iconButton"
   tabindex="0"

src/core/ButtonIcon/index.stories.tsx

@@ -76,7 +76,7 @@ Default.parameters = {
 export const Test = Template.bind({});
 
 Test.args = {
-  "aria-label": "info",
+  "aria-label": "search",
   disabled: false,
   icon: <Icon sdsIcon="search" sdsSize="xl" sdsType="iconButton" />,
   sdsSize: "large",
@@ -97,12 +97,14 @@ const LivePreviewDemo = (): JSX.Element => {
     <div style={livePreviewStyles as React.CSSProperties}>
       <div style={{ display: "flex" }}>
         <Demo
+          aria-label="grid"
           style={{ marginRight: spacings?.xxs }}
           icon={<Icon sdsIcon="grid" sdsSize="l" sdsType="iconButton" />}
           sdsSize="large"
           sdsType="primary"
         />
         <Demo
+          aria-label="grid"
           style={{ marginRight: spacings?.xxs }}
           icon={<Icon sdsIcon="grid" sdsSize="l" sdsType="iconButton" />}
           sdsSize="large"
@@ -111,6 +113,7 @@ const LivePreviewDemo = (): JSX.Element => {
       </div>
       <div style={{ display: "flex" }}>
         <Demo
+          aria-label="infoSpeechBubble"
           style={{ marginRight: spacings?.m }}
           icon={
             <Icon sdsIcon="infoSpeechBubble" sdsSize="l" sdsType="iconButton" />
@@ -119,6 +122,7 @@ const LivePreviewDemo = (): JSX.Element => {
           sdsType="secondary"
         />
         <Demo
+          aria-label="infoSpeechBubble"
           style={{ marginRight: spacings?.m }}
           icon={
             <Icon sdsIcon="infoSpeechBubble" sdsSize="l" sdsType="iconButton" />
@@ -129,6 +133,7 @@ const LivePreviewDemo = (): JSX.Element => {
       </div>
       <div>
         <Demo
+          aria-label="xMark"
           style={{ marginRight: spacings?.m }}
           icon={<Icon sdsIcon="xMark" sdsSize="l" sdsType="iconButton" />}
           sdsSize="large"
@@ -137,6 +142,7 @@ const LivePreviewDemo = (): JSX.Element => {
       </div>
       <div>
         <Demo
+          aria-label="xMark"
           style={{ marginRight: spacings?.m }}
           icon={<Icon sdsIcon="xMark" sdsSize="s" sdsType="iconButton" />}
           sdsSize="medium"
@@ -145,6 +151,7 @@ const LivePreviewDemo = (): JSX.Element => {
       </div>
       <div style={{ display: "flex" }}>
         <Demo
+          aria-label="barChartVertical3"
           style={{ marginRight: spacings?.s }}
           icon={
             <Icon
@@ -157,6 +164,7 @@ const LivePreviewDemo = (): JSX.Element => {
           sdsType="primary"
         />
         <Demo
+          aria-label="barChartVertical3"
           style={{ marginRight: spacings?.s }}
           icon={
             <Icon
@@ -171,12 +179,14 @@ const LivePreviewDemo = (): JSX.Element => {
       </div>
       <div style={{ display: "flex" }}>
         <Demo
+          aria-label="plusCircle"
           style={{ marginRight: spacings?.s }}
           icon={<Icon sdsIcon="plusCircle" sdsSize="s" sdsType="iconButton" />}
           sdsSize="small"
           sdsType="secondary"
         />
         <Demo
+          aria-label="plusCircle"
           style={{ marginRight: spacings?.s }}
           icon={<Icon sdsIcon="plusCircle" sdsSize="s" sdsType="iconButton" />}
           sdsSize="small"
@@ -185,6 +195,7 @@ const LivePreviewDemo = (): JSX.Element => {
       </div>
       <div>
         <Demo
+          aria-label="xMark"
           style={{ marginRight: spacings?.s }}
           icon={<Icon sdsIcon="xMark" sdsSize="s" sdsType="iconButton" />}
           sdsSize="small"

src/core/Callout/index.tsx

@@ -70,6 +70,7 @@ const Callout = ({
     if (expandable) {
       return (
         <ButtonIcon
+          aria-label={collapsed ? "open" : "close"}
           onClick={() => {
             setStage(collapsed ? SDS_STAGE_OPEN : SDS_STAGE_CLOSED);
           }}
@@ -86,6 +87,7 @@ const Callout = ({
     }
     return onClose ? (
       <ButtonIcon
+        aria-label="Dismiss"
         onClick={handleClose}
         sdsSize="small"
         sdsType="tertiary"

src/core/CellComponent/index.stories.tsx

@@ -49,6 +49,15 @@ export default {
     },
   },
   component: CellComponent,
+  parameters: {
+    axe: {
+      disabledRules: [
+        // Unfortunately the MUI Switch component renders an input field without a label, which
+        // fails an axe check.
+        "label",
+      ],
+    },
+  },
   title: "Table/CellComponent",
 } as Meta;
 

src/core/CellHeader/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<CellHeader /> Ascending story renders snapshot 1`] = `
+<table>
+  <tbody>
+    <tr>
+      <th
+        class="css-x40omn"
+        direction="asc"
+      >
+        <div
+          class="css-rm9mvq"
+        >
+          <span>
+            Header
+          </span>
+          <button
+            aria-label="Change sort direction from ascending to descending"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-xhp77i-MuiButtonBase-root-MuiIconButton-root"
+            data-testid="iconButton"
+            tabindex="0"
+            type="button"
+          >
+            <div
+              class="css-jbvua0"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+                data-jest-file-name="IconChevronUpSmall.svg"
+                data-jest-svg-name="IconChevronUpSmall"
+                data-testid="IconChevronUpSmall"
+                fillcontrast="white"
+                focusable="false"
+                viewBox="0 0 14 14"
+              />
+            </div>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </th>
+    </tr>
+  </tbody>
+</table>
+`;
+
 exports[`<CellHeader /> Test story renders snapshot 1`] = `
 <table>
   <tbody>
@@ -16,6 +62,7 @@ exports[`<CellHeader /> Test story renders snapshot 1`] = `
             Header
           </span>
           <button
+            aria-label="Change sort direction from descending to ascending"
             class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1c9gy53-MuiButtonBase-root-MuiIconButton-root"
             data-testid="iconButton"
             tabindex="0"

src/core/CellHeader/index.stories.tsx

@@ -79,6 +79,12 @@ Default.parameters = {
   },
 };
 
+export const Ascending = Template.bind({});
+
+Ascending.args = {
+  direction: "asc",
+};
+
 const TestDemo = (): JSX.Element => (
   <table>
     <tbody>

src/core/CellHeader/index.tsx

@@ -45,7 +45,16 @@ const CellHeaderContent = (
     direction === "asc" ? "chevronUp" : "chevronDown";
 
   const sortIcon = (
-    <StyledSortingIcon sdsType="tertiary" sdsSize="small" active={active}>
+    <StyledSortingIcon
+      aria-label={
+        direction === "asc"
+          ? "Change sort direction from ascending to descending"
+          : "Change sort direction from descending to ascending"
+      }
+      sdsType="tertiary"
+      sdsSize="small"
+      active={active}
+    >
       <Icon sdsSize="s" sdsIcon={sdsIconName} sdsType="iconButton" />
     </StyledSortingIcon>
   );