Orbit Storybook - a11y issues #4497
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Storybook staging is available at https://kiwicom-orbit-sarka-sb-a11y-fixes.surge.sh |
|
Size Change: 0 B Total Size: 459 kB ℹ️ View Unchanged
|
Deploying orbit with
|
| Latest commit: |
f00e5c0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5c5d6c47.orbit.pages.dev |
| Branch Preview URL: | https://sarka-sb-a11y-fixes.orbit.pages.dev |
sarkaaa
force-pushed
the
sarka/sb-a11y-fixes
branch
from
603a5f8 to
ffa2f1b
Compare
sarkaaa
force-pushed
the
sarka/sb-a11y-fixes
branch
from
ffa2f1b to
1e4e5d0
Compare
sarkaaa
force-pushed
the
sarka/sb-a11y-fixes
branch
3 times, most recently
from
0209f84 to
7b9dd78
Compare
sarkaaa
commented
Nov 1, 2024
| // 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.
sarkaaa
commented
Nov 1, 2024
| 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 test-runner and depended packages, we are able to run a11y SB checks and generate an HTML report.
sarkaaa
force-pushed
the
sarka/sb-a11y-fixes
branch
2 times, most recently
from
9a05101 to
613e57c
Compare
sarkaaa
commented
Nov 1, 2024
| @@ -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.
sarkaaa
force-pushed
the
sarka/sb-a11y-fixes
branch
from
613e57c to
27acf99
Compare
sarkaaa
changed the title
sarkaaa
force-pushed
the
sarka/sb-a11y-fixes
branch
3 times, most recently
from
68c1a0a to
8723ace
Compare
sarkaaa
commented
Nov 1, 2024
| @@ -12,7 +12,7 @@ jobs: | |||
| update-visual-tests: | |||
| runs-on: ubuntu-latest | |||
| container: | |||
| image: mcr.microsoft.com/playwright:v1.44.1-jammy | |||
| image: mcr.microsoft.com/playwright:v1.48.2-jammy | |||
There was a problem hiding this comment.
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.
Also, I had to update visual tests as they were failing.
sarkaaa
force-pushed
the
sarka/sb-a11y-fixes
branch
from
1ba425a to
8723ace
Compare
mvidalgarcia
reviewed
Nov 6, 2024
sarkaaa
force-pushed
the
sarka/sb-a11y-fixes
branch
from
a187afc to
5a8b07c
Compare
This implementation ensures that every story is re-rendered. Without that the Storybook doesn't show the correct number and list of accessibility issues.
sarkaaa
force-pushed
the
sarka/sb-a11y-fixes
branch
from
5a8b07c to
f00e5c0
Compare
| }, | ||
| 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?
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This Pull Request meets the following criteria:
For new components:
d.tsfiles and are exported inindex.d.tsList of SB errors:
Closes: https://kiwicom.atlassian.net/browse/FEPLT-2146