feat: added a11y to storybook

Author: shairez

package.json

@@ -31,6 +31,7 @@
     "@nrwl/storybook": "15.8.7",
     "@nrwl/vite": "15.8.7",
     "@nrwl/workspace": "15.8.7",
+    "@storybook/addon-a11y": "7.0.0-rc.10",
     "@storybook/addon-essentials": "7.0.0-rc.7",
     "@storybook/addon-interactions": "7.0.0-rc.7",
     "@storybook/addon-links": "7.0.0-rc.7",
@@ -48,11 +49,13 @@
     "@vitest/ui": "^0.28.5",
     "all-contributors-cli": "^6.24.0",
     "autoprefixer": "^10.4.13",
+    "axe-core": "4.6.3",
     "commitizen": "^4.3.0",
     "commitlint": "^17.4.3",
     "country-list-json": "1.1.0",
-    "cypress": "^12.6.0",
-    "cypress-ct-qwik": "0.0.5",
+    "cypress": "^12.9.0",
+    "cypress-axe": "1.4.0",
+    "cypress-ct-qwik": "0.0.9",
     "cz-conventional-changelog": "^3.3.0",
     "daisyui": "^2.50.1",
     "danger": "11.2.4",
@@ -83,7 +86,7 @@
     "ts-node": "10.9.1",
     "typescript": "5.0.2",
     "undici": "5.21.0",
-    "vite": "4.1.2",
+    "vite": "4.2.1",
     "vite-plugin-dts": "~1.7.3",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "4.0.7",

packages/headless/.storybook/main.ts

@@ -13,6 +13,8 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-coverage',
   ],
   // addons: ['@storybook/addon-essentials', ...(rootMain.addons || [])],
 

packages/headless/cypress/support/component.ts

@@ -15,3 +15,4 @@
 
 // Import commands.ts using ES2015 syntax:
 import './commands';
+import 'cypress-axe';

packages/headless/src/components/accordion/accordion.spec.tsx

@@ -20,8 +20,12 @@ describe('Accordion', () => {
       </Accordion>
     );
 
+    // cy.injectAxe();
+
     cy.contains(/Heading 1/i).click();
     cy.get('.content').should('exist');
     cy.contains(/Heading 2/i).should('exist');
+
+    // cy.checkA11y();
   });
 });

packages/headless/src/components/tooltip/tooltip.stories.tsx

@@ -1,5 +1,7 @@
+import { userEvent, within } from '@storybook/testing-library';
 import { Meta, StoryObj } from 'storybook-framework-qwik';
 import { Tooltip, TooltipProps } from './tooltip';
+import { expect } from '@storybook/jest';
 
 const meta: Meta<TooltipProps> = {
   component: Tooltip,
@@ -13,9 +15,12 @@ export const Primary: Story = {
   args: {
     content: 'Hi there',
   },
-  render: () => (
-    <Tooltip content="test">
-      <button>Hello</button>
-    </Tooltip>
-  ),
+  render: (args) => <Tooltip content={args.content}>Please hover me</Tooltip>,
+  // play: async ({ canvasElement }) => {
+  //   const canvas = within(canvasElement);
+
+  //   await userEvent.hover(canvas.getByText('Please hover me'));
+
+  //   await expect(canvas.getByText('Hi there')).toBeInTheDocument();
+  // }
 };

packages/headless/tsconfig.spec.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["vitest/globals", "cypress", "node"]
+    "types": ["vitest/globals", "cypress", "cypress-axe", "node"]
   },
   "include": [
     "vite.config.ts",
@@ -17,5 +17,6 @@
     "src/**/*.test.jsx",
     "src/**/*.spec.jsx",
     "src/**/*.d.ts"
-  ]
+  ],
+  "exclude": ["**/*.stories.ts", "**/*.stories.js"]
 }