Skip to content

Commit

Permalink
chore: implement re-render addon event
Browse files Browse the repository at this point in the history
This implementation ensures that every story is re-rendered.
Without that the Storybook doesn't show the correct number
and list of accessibility issues.
  • Loading branch information
sarkaaa committed Nov 1, 2024
1 parent 41d52f4 commit 27acf99
Showing 1 changed file with 12 additions and 1 deletion.
13 changes: 12 additions & 1 deletion packages/orbit-components/.storybook/orbitDecorator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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");
};

componentForceRerender();
return () => {
if (html) html.removeAttribute("dir");
if (html) {
html.removeAttribute("dir");
}
};
}, []);

Expand Down

0 comments on commit 27acf99

Please sign in to comment.