Automatically run accessibility tests on each PR run

pegasystems · Mar 22, 2024 · b33cb03 · b33cb03
1 parent d770dc3
commit b33cb03
Show file tree

Hide file tree

Showing 13 changed files with 230 additions and 14 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -7,7 +7,7 @@ const config: StorybookConfig = {
   framework: '@storybook/react-webpack5',
   staticDirs: ['./static'],
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-essentials'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-essentials'],
   docs: {
     autodocs: true
   },

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -11,7 +11,6 @@ import {
   ModalManager,
   PopoverManager,
   Toaster,
-  LiveLog,
   Aries2023Theme,
   Aries2023DarkTheme,
   ThemeMachine,
@@ -74,15 +73,13 @@ const preview: Preview = {
           disableDefaultFontLoading
           id='Preview'
         >
-          <LiveLog maxLength={context.args.liveLogMaxLength || 50}>
-            <PopoverManager>
-              <Toaster dismissAfter={5000}>
-                <ModalManager>
-                  <Story {...context} />
-                </ModalManager>
-              </Toaster>
-            </PopoverManager>
-          </LiveLog>
+          <PopoverManager>
+            <Toaster dismissAfter={5000}>
+              <ModalManager>
+                <Story {...context} />
+              </ModalManager>
+            </Toaster>
+          </PopoverManager>
         </Configuration>
       );
     },

diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -0,0 +1,32 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { getStoryContext } from '@storybook/test-runner';
+
+import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page, context) {
+    // Get the entire context of a story, including parameters, args, argTypes, etc.
+    const storyContext = await getStoryContext(page, context);
+
+    // Apply story-level a11y rules
+    await configureAxe(page, {
+      rules: storyContext.parameters?.a11y?.config?.rules
+    });
+
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true
+      }
+    });
+  }
+};
+
+export default config;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "@pega/eslint-config": "^0.7.1",
     "@pega/pcore-pconnect-typedefs": "^2.1.1",
     "@pega/tsconfig": "^0.7.1",
+    "@storybook/addon-a11y": "^7.6.8",
     "@storybook/addon-essentials": "^7.6.8",
     "@storybook/manager-api": "^7.6.8",
     "@storybook/react": "^7.6.16",
@@ -79,6 +80,7 @@
     "@types/react-dom": "^17.0.25",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "axe-playwright": "^2.0.1",
     "cspell": "^8.3.2",
     "cspell-dict-lorem-ipsum": "^1.1.2",
     "eslint": "^8.4.1",

diff --git a/src/components/Pega_Extensions_Calendar/index.tsx b/src/components/Pega_Extensions_Calendar/index.tsx
@@ -267,8 +267,30 @@ export default function PegaExtensionsCalendar(props: CalendarProps) {
         <CardContent>
           <FullCalendar
             ref={calendarRef}
+            customButtons={{
+              prevButton: {
+                text: 'Previous',
+                click: () => {
+                  if (calendarRef) {
+                    const cal: any = calendarRef.current;
+                    const calendarAPI = cal.getApi();
+                    calendarAPI?.prev();
+                  }
+                }
+              },
+              nextButton: {
+                text: 'Next',
+                click: () => {
+                  if (calendarRef) {
+                    const cal: any = calendarRef.current;
+                    const calendarAPI = cal.getApi();
+                    calendarAPI?.next();
+                  }
+                }
+              }
+            }}
             headerToolbar={{
-              left: 'prev,next',
+              left: 'prevButton,nextButton',
               center: 'title',
               right: `${VIEW_TYPE.MONTH},${VIEW_TYPE.WEEK},${VIEW_TYPE.DAY}`
             }}

diff --git a/src/components/Pega_Extensions_DisplayAttachments/demo.stories.tsx b/src/components/Pega_Extensions_DisplayAttachments/demo.stories.tsx
@@ -15,6 +15,23 @@ export default {
       }
     }
   },
+  parameters: {
+    a11y: {
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            id: 'list',
+            enabled: false
+          },
+          {
+            id: 'nested-interactive',
+            enabled: false
+          }
+        ]
+      }
+    }
+  },
   component: PegaExtensionsDisplayAttachments
 };
 

diff --git a/src/components/Pega_Extensions_KanbanBoard/demo.stories.tsx b/src/components/Pega_Extensions_KanbanBoard/demo.stories.tsx
@@ -27,6 +27,23 @@ export default {
       }
     }
   },
+  parameters: {
+    a11y: {
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            id: 'aria-allowed-role',
+            enabled: false
+          },
+          {
+            id: 'nested-interactive',
+            enabled: false
+          }
+        ]
+      }
+    }
+  },
   component: PegaExtensionsKanbanBoard
 };
 

diff --git a/src/components/Pega_Extensions_NetworkDiagram/demo.stories.tsx b/src/components/Pega_Extensions_NetworkDiagram/demo.stories.tsx
@@ -15,6 +15,19 @@ export default {
       }
     }
   },
+  parameters: {
+    a11y: {
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            id: 'nested-interactive',
+            enabled: false
+          }
+        ]
+      }
+    }
+  },
   component: PegaExtensionsNetworkDiagram
 };
 

diff --git a/src/components/Pega_Extensions_RatingLayout/demo.stories.tsx b/src/components/Pega_Extensions_RatingLayout/demo.stories.tsx
@@ -24,6 +24,19 @@ export default {
       }
     }
   },
+  parameters: {
+    a11y: {
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            id: 'aria-valid-attr-value',
+            enabled: false
+          }
+        ]
+      }
+    }
+  },
   component: PegaExtensionsRatingLayout
 };
 

diff --git a/src/components/Pega_Extensions_Scheduler/index.tsx b/src/components/Pega_Extensions_Scheduler/index.tsx
@@ -80,7 +80,8 @@ const PegaExtensionsScheduler = (props: PegaExtensionsSchedulerProps) => {
           aria-label={description}
           style={{
             wordBreak: 'break-all',
-            color: '#FFFFFF'
+            color: '#FFFFFF',
+            fontSize: '1rem'
           }}
           onPreview={() => {
             getPConnect().getActionsApi().showCasePreview(encodeURI(obj.InsKey), {

diff --git a/src/components/Pega_Extensions_Scheduler/styles.ts b/src/components/Pega_Extensions_Scheduler/styles.ts
@@ -3,15 +3,17 @@ import styled, { css, createGlobalStyle } from 'styled-components';
 
 export const StyledCardContent = styled.div(() => {
   return css`
-    background: red;
+    background: #cc0000;
     height: 100%;
+    font-size: 1rem;
   `;
 });
 
 export const GlobalStyle = createGlobalStyle`
   :root {
     --fc-today-bg-color: none !important;
     --fc-event-border-color: none !important;
+    --fc-event-bg-color: #2778C8 !important;
   }
 `;