A11y storybook test runner (#9447)

* Added test runner

* Update code to build the stories.json file

* Fixed broken banner component

* Removed not used file

* Clean up code

package.json

@@ -47,6 +47,7 @@
     "coverage": "npx nyc merge coverage coverage/coverage.json",
     "storybook": "cd storybook && yarn install && yarn storybook",
     "build-storybook": "cd storybook && yarn install --no-lockfile && NODE_OPTIONS=--max_old_space_size=4096 yarn build-storybook --quiet",
+    "storybook-test": "cd storybook && yarn test-storybook --stories-json ",
     "docs:install": "cd docusaurus/ && yarn install",
     "docs:build": "cd docusaurus/ && yarn build",
     "docs:start": "cd docusaurus/ && yarn start",

storybook/.storybook/main.js

@@ -16,6 +16,9 @@ module.exports = {
     "storybook-dark-mode",
     "@storybook/addon-actions"
   ],
+  features: {
+    buildStoriesJson: true, // 👈 Enable this to build the stories.json file
+  },
 
   staticDirs: [
     'public',
@@ -99,5 +102,5 @@ module.exports = {
     });
 
     return config;
-  },  
+  },
 }

storybook/.storybook/preview.js

@@ -21,7 +21,7 @@ require('../../shell/plugins/i18n');
 
 require('../../shell/plugins/v-select');
 require('../../shell/plugins/tooltip');
-
+require('../../shell/plugins/clean-html-directive');
 
 Vue.use(Vuex);
 Vue.use(ShortKey, { prevent: ['input', 'textarea', 'select'] });

storybook/.storybook/test-runner.js

@@ -0,0 +1,17 @@
+// .storybook/test-runner.js
+
+const { injectAxe, checkA11y } = require('axe-playwright');
+
+module.exports = {
+  async preRender(page) {
+    await injectAxe(page);
+  },
+  async postRender(page) {
+    await checkA11y(page, '#root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};

storybook/package.json

@@ -18,7 +18,9 @@
     "@storybook/addon-actions": "^6.3.8",
     "@storybook/addon-essentials": "^6.3.8",
     "@storybook/addon-links": "^6.3.8",
+    "@storybook/test-runner": "^0.11.0",
     "@storybook/vue": "^6.3.8",
+    "axe-playwright": "^1.2.3",
     "shell": "file:./..",
     "storybook-auto-events": "^0.1.1",
     "storybook-dark-mode": "^1.0.8",