diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts index f6c59504e..8d6d1aeb2 100644 --- 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 index 94c489d30..38a63bfcc 100644 --- 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; diff --git a/packages/components/src/IconList/tests/chromatic/IconList.stories.tsx b/packages/components/src/IconList/tests/chromatic/IconList.stories.tsx index 9087fec69..5fd08b297 100644 --- 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 index 79907dbc4..2b25ecd9d 100644 --- 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 index 116384b78..a923b8663 100644 --- 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 => ( diff --git a/packages/components/src/Text/tests/chromatic/Text.stories.tsx b/packages/components/src/Text/tests/chromatic/Text.stories.tsx index a6a23f3e7..82a615008 100644 --- 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 index e4f33b159..efeb9dc19 100644 --- 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 => ( ( <> diff --git a/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx b/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx index cf0d36f36..bf2b94dec 100644 --- 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 => ( diff --git a/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx b/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx index 100eb5323..502c585ef 100644 --- 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 => ( diff --git a/packages/styled-system/tests/chromatic/useStyledSystem.stories.tsx b/packages/styled-system/tests/chromatic/useStyledSystem.stories.tsx index 14abf0db6..c3f96f0e0 100644 --- 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 index e2f865c56..e3745e99e 100644 --- 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; diff --git a/tooling/storybook-addon/a11y.ts b/tooling/storybook-addon/a11y.ts index 9a1f488f8..61bea0c94 100644 --- a/tooling/storybook-addon/a11y.ts +++ b/tooling/storybook-addon/a11y.ts @@ -5,17 +5,35 @@ export type Rules = NonNullable[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 {