Merge pull request #15 from code0-tech/enable-contrast-test

Enable contrast test
code0-tech · Dec 17, 2023 · 1ac74c3 · 1ac74c3
2 parents b56b4b5 + 5553be3
commit 1ac74c3
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -24,7 +24,6 @@ const preview: Preview = {
           { id: 'landmark-one-main', enabled: false }, // not relevant to single components
           { id: 'page-has-heading-one', enabled: false }, // not relevant to single components
           { id: 'region', enabled: false }, // not relevant to single components
-          { id: 'color-contrast', enabled: false }, // doesn't work with gradients
         ],
       },
     },

diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -1,5 +1,5 @@
 import type { TestRunnerConfig } from '@storybook/test-runner';
-import { getStoryContext } from '@storybook/test-runner'
+import { getStoryContext, waitForPageReady } from '@storybook/test-runner'
 import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
 
 const prepareA11y = async (page) => await injectAxe(page);
@@ -28,10 +28,9 @@ const executeA11y = async (page, context) => {
 }
 
 const config: TestRunnerConfig = {
-  async preVisit(page) {
-    await prepareA11y(page);
-  },
   async postVisit(page, context) {
+    await waitForPageReady(page);
+    await prepareA11y(page);
     await executeA11y(page, context);
   },
 };

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -26,7 +26,8 @@ const Button: React.FC<ButtonType> = (props) => {
     const content = getContent(children, ButtonIcon)
 
 
-    return <a {...args} className={`button button--${variant} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""}`}>
+    return <a {...args} className={`button button--${variant} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""}`}
+        aria-disabled={disabled ? "true" : "false"}>
         {icon}
         {content ? <span className={"button__content"}>{content}</span> : null}
     </a>

diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
@@ -16,7 +16,8 @@ const Input: React.FC<InputType> = (props: InputType) => {
     const {disabled, children, valid} = props
 
     return <div
-        className={`input ${disabled ? "input--disabled" : ""} ${valid ? "input--valid" : valid !== undefined ? "input--not-valid" : ""}`}>
+        className={`input ${disabled ? "input--disabled" : ""} ${valid ? "input--valid" : valid !== undefined ? "input--not-valid" : ""}`}
+        aria-disabled={disabled ? "true" : "false"}>
         {children}
     </div>
 }