Disable contrast check

gsoft-inc · May 14, 2024 · 0762d59 · 0762d59
1 parent cbe754c
commit 0762d59
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 15 deletions.
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -20,7 +20,7 @@ export const config = {
         const a11yParameters = getA11yAddonParameters(storyContext.parameters);
 
         // Do not run a11y tests on disabled stories.
-        if (a11yParameters?.disabled) {
+        if (a11yParameters?.disable) {
             return;
         }
 

diff --git a/packages/components/src/HopperProvider/tests/chromatic/HopperProvider.stories.tsx b/packages/components/src/HopperProvider/tests/chromatic/HopperProvider.stories.tsx
@@ -22,7 +22,7 @@ const meta = {
     },
     parameters: {
         ...hopperParameters({ disabled: true }),
-        ...a11yParameters({ disabled: true })
+        ...a11yParameters({ disableContrastCheck: true })
     }
 } satisfies Meta<typeof HopperProvider>;
 

diff --git a/packages/components/src/IconList/tests/chromatic/IconList.stories.tsx b/packages/components/src/IconList/tests/chromatic/IconList.stories.tsx
@@ -24,7 +24,7 @@ export const Default: Story = {
 
 export const Styling: Story = {
     parameters: {
-        ...a11yParameters({ disabled: true })
+        ...a11yParameters({ disableContrastCheck: true })
     },
     args: {
         color: "primary",

diff --git a/packages/components/src/Label/tests/chromatic/Label.stories.tsx b/packages/components/src/Label/tests/chromatic/Label.stories.tsx
@@ -38,7 +38,7 @@ export const Inherit: Story = {
 
 export const Styling: Story = {
     parameters: {
-        ...a11yParameters({ disabled: true })
+        ...a11yParameters({ disableContrastCheck: true })
     },
     render: props => (
         <>

diff --git a/packages/components/src/Spinner/tests/chromatic/Spinner.stories.tsx b/packages/components/src/Spinner/tests/chromatic/Spinner.stories.tsx
@@ -44,7 +44,7 @@ export const InheritColor: Story = {
 
 export const Styling: Story = {
     parameters: {
-        ...a11yParameters({ disabled: true })
+        ...a11yParameters({ disableContrastCheck: true })
     },
     render: args => (
         <Inline>

diff --git a/packages/components/src/Text/tests/chromatic/Text.stories.tsx b/packages/components/src/Text/tests/chromatic/Text.stories.tsx
@@ -38,7 +38,7 @@ export const Inherit: Story = {
 
 export const Styling: Story = {
     parameters: {
-        ...a11yParameters({ disabled: true })
+        ...a11yParameters({ disableContrastCheck: true })
     },
     render: props => (
         <>

diff --git a/packages/components/src/errorMessage/tests/chromatic/ErrorMessage.stories.tsx b/packages/components/src/errorMessage/tests/chromatic/ErrorMessage.stories.tsx
@@ -35,7 +35,7 @@ export const Default: Story = {
 
 export const Styling: Story = {
     parameters: {
-        ...a11yParameters({ disabled: true })
+        ...a11yParameters({ disableContrastCheck: true })
     },
     render: props => (
         <SlotProvider values={[

diff --git a/packages/components/src/helperMessage/tests/chromatic/HelperMessage.stories.tsx b/packages/components/src/helperMessage/tests/chromatic/HelperMessage.stories.tsx
@@ -26,7 +26,7 @@ export const Default: Story = {
 
 export const Styling: Story = {
     parameters: {
-        ...a11yParameters({ disabled: true })
+        ...a11yParameters({ disableContrastCheck: true })
     },
     render: props => (
         <>

diff --git a/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx b/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx
@@ -126,7 +126,7 @@ export const Reverse: Story = {
 
 export const Styling: Story = {
     parameters: {
-        ...a11yParameters({ disabled: true })
+        ...a11yParameters({ disableContrastCheck: true })
     },
     render: args => (
         <Inline>

diff --git a/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx b/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx
@@ -124,7 +124,7 @@ export const Reverse: Story = {
 
 export const Styling: Story = {
     parameters: {
-        ...a11yParameters({ disabled: true })
+        ...a11yParameters({ disableContrastCheck: true })
     },
     render: args => (
         <Inline>

diff --git a/packages/styled-system/tests/chromatic/useStyledSystem.stories.tsx b/packages/styled-system/tests/chromatic/useStyledSystem.stories.tsx
@@ -15,7 +15,7 @@ const meta = {
             viewports: viewports
         },
         controls: { hideNoControlsWarning: true },
-        ...a11yParameters({ disabled: true })
+        ...a11yParameters({ disable: true })
     },
     args: {
         color: "core_samoyed",

diff --git a/packages/tokens/src/stories/tokens.stories.ts b/packages/tokens/src/stories/tokens.stories.ts
@@ -10,7 +10,7 @@ const meta = {
     component: List,
     parameters: {
         ...hopperParameters({ disabled: true }), // the story handle their own color scheme
-        ...a11yParameters({ disabled: true }) // Disable a11y rules as this only displays colors
+        ...a11yParameters({ disable: true }) // Disable a11y rules as this only displays colors
     }
 } satisfies Meta<typeof List>;
 

diff --git a/tooling/storybook-addon/a11y.ts b/tooling/storybook-addon/a11y.ts
@@ -5,17 +5,35 @@ export type Rules = NonNullable<Parameters<typeof configureAxe>[1]>["rules"];
 
 export interface A11yAddonParameters {
     a11y: {
-        disabled?: boolean;
+        disable?: boolean;
         config?: {
             rules?: Rules;
         };
+        disableContrastCheck?: boolean;
     };
 }
 
 export function a11yParameters(params: A11yAddonParameters["a11y"]): A11yAddonParameters {
-    return {
-        a11y: params
+    const { disableContrastCheck, ...rest } = params;
+
+    const a11yOptions = {
+        a11y: rest
     };
+
+    if (disableContrastCheck) {
+        a11yOptions.a11y.config = {
+            ...a11yOptions.a11y.config,
+            rules: [
+                ...a11yOptions.a11y.config?.rules ?? [],
+                {
+                    id: "color-contrast",
+                    enabled: false
+                }
+            ]
+        };
+    }
+
+    return a11yOptions;
 }
 
 export function getA11yAddonParameters(parameters: SBParameters): A11yAddonParameters["a11y"] | undefined {