Orbit Storybook - a11y issues #4497
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,3 +21,4 @@ cypress/videos | |
| /test-results/ | ||
| /playwright-report/ | ||
| /playwright/.cache/ | ||
| artifacts/ | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| # About | ||
|
There was a problem hiding this comment. I created this file to document somewhere information on how to run test-runner and that's important to run this script once the storybook local server is running as well. This could be as a point of discussion if we want to have this file, ofc. |
||
|
|
||
| Storybook included the list of Orbit components. | ||
|
|
||
| URL: https://kiwicom.github.io/orbit/ | ||
|
|
||
| ## Run | ||
|
|
||
| **Install dependencies:** | ||
|
|
||
| ``` | ||
| yarn install | ||
| ``` | ||
|
|
||
| **Run Storybook:** | ||
|
|
||
| ``` | ||
| yarn storybook | ||
| ``` | ||
|
|
||
| **Run a11y tests:** | ||
|
|
||
| This will run test-runner script and generates HTML files with the list of a11y issues. Be aware that the local storybook server must be running as well (`yarn storybook`). | ||
|
|
||
| ``` | ||
| yarn test-storybook | ||
| ``` | ||
|
There was a problem hiding this comment. Is this issue still relevant? Do we have problems with the Orbit storybook? I remember Nitro's Storybook being problematic but Orbit one was working correctly, wasn't it? There was a problem hiding this comment. no, Orbit also has an issue with no-updating a11y issues when switching the stories. however, Orbit is working well after this change, but Nitro is still problematic. There was a problem hiding this comment. It's working for me now (Chrome) on master... 🤔 There was a problem hiding this comment. Since it seems we have different behaviors on different machines and different browsers. What do you think about closing this PR for the time being? We can always re-open it if this becomes annoying again. There was a problem hiding this comment. Recording of my experience: Screen.Recording.2024-11-14.at.15.43.51.mov |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,6 +2,7 @@ import * as React from "react"; | |
| import type { Decorator } from "@storybook/react"; | ||
| import jsxToString from "react-element-to-jsx-string"; | ||
| import { Highlight, themes } from "prism-react-renderer"; | ||
| import { addons } from "@storybook/preview-api"; | ||
|
|
||
| import defaultTheme from "../src/defaultTheme"; | ||
| import OrbitProvider from "../src/OrbitProvider"; | ||
|
|
@@ -15,8 +16,18 @@ const OrbitDecorator: Decorator = (storyFn, context) => { | |
| React.useEffect(() => { | ||
| const html = document.querySelector("html"); | ||
| if (html && !html.getAttribute("dir")) html.setAttribute("dir", "ltr"); | ||
| const componentForceRerender = () => { | ||
| // Invokes Storybook's addon API method event to trigger a UI refresh. | ||
| // Ensures that a11y addons is refreshed and shows the correct list of component accessibility issues. | ||
| console.log("Component is being rerendered."); | ||
| addons.getChannel().emit("forceReRender"); | ||
|
There was a problem hiding this comment. An explanation of the function is described here. |
||
| }; | ||
|
|
||
| componentForceRerender(); | ||
| return () => { | ||
| if (html) { | ||
| html.removeAttribute("dir"); | ||
| } | ||
| }; | ||
| }, []); | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import type { TestRunnerConfig } from "@storybook/test-runner"; | ||
| import { injectAxe, checkA11y } from "axe-playwright"; | ||
|
|
||
| /* | ||
| * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api | ||
|
There was a problem hiding this comment. Using the |
||
| * to learn more about the test-runner hooks API. | ||
| */ | ||
| const config: TestRunnerConfig = { | ||
| async preVisit(page) { | ||
| await injectAxe(page); | ||
| }, | ||
| async postVisit(page, story) { | ||
| const fileName = story.name.replace(/\s+/g, ""); | ||
| await checkA11y( | ||
|
There was a problem hiding this comment. We agreed we don't need the HTML reports for Orbit components, right? There was a problem hiding this comment. This was done before I was struggling with Nitro, and then we agreed we won't generate HTML reports. I thought that the "agreement" was only for Nitro, anyway, but I can remove it from Orbit. There was a problem hiding this comment. If I recall correctly, the final conclusion is that HTML reports were not bringing that much value at this period as problems will be detected with the general Accessibility audits. I really value your proactivity on exploring this idea, great work! I believe these fine-grained reports could have more utility in the future when we have a higher accessibility score on all the Kiwi.com pages, so we can get more into the details to find problems we don't see at first sight. What do you think? |
||
| page, | ||
| ".story-content", | ||
| { | ||
| detailedReport: true, | ||
| detailedReportOptions: { | ||
| html: true, | ||
| }, | ||
| }, | ||
| undefined, | ||
| "html", | ||
| { | ||
| reportFileName: `${fileName}-result.html`, | ||
| }, | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| export default config; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've changed the PW version based on this error log.
https://github.com/kiwicom/orbit/actions/runs/11632651461/job/32396199861?pr=4497
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, I had to update visual tests as they were failing.