Storybook bugs in csnx

[jamesmockett]

• Running make storybooks results in apps/csnx/package.json being created.
• All 3 Source packages have the same error in tsconfig.json:

  Cannot write file '/csnx/.storybook/main.js' because it would overwrite input file`

• Stories using the Backgrounds addon may fail colour contrast checks when running locally and the story is first opened. [Bug]: sb-show-main uses transition which impacts accessibility testing when stories set specific backgrounds storybookjs/storybook#25257)

[SiAdcock]

All 3 Source packages have the same error in tsconfig.json:

I'm not able to recreate this error, although admittedly I don't know where to look 😅 I've tried:

• make storybook
• make validate
• viewing the tsconfig.json for each Source project in my editor

Stories using the Backgrounds addon may fail colour contrast checks when running locally and the story is first opened.

The linked issue has been resolved, so maybe this has been fixed. I tried to investigate, however the Accessibility pane is currently giving me the following error message for all stories 🤦‍♂️

The accessibility scan encountered an error.
{"name":"TypeError"}

Upgrading Storybook doesn't help.

My hunch, although I might be on the wrong track: the .storybook/main.js has all this weird Webpack jiggery pokery that is hideously complex. It was created to support Storybook v5 back in the day and has been added to ever since... it can probably now be greatly simplified. Hopefully. Might be worth a shot.

[sndrs]

confirm if this is still an issue

[jamesmockett]

I'm no longer seeing the error in tsconfig.json so this seems to be fixed. (I was seeing it in VS Code where the file was highlighted in red to indicate an error and the "path": "./tsconfig.spec.json" line had a red squiggly which would show the error from the description on hover.)

[jamesmockett]

The colour contrast check is still an issue. You can see it on the Inline Error component with the Brand theme selected:
https://main--635a6fffacd30d393597c1ff.chromatic.com/index.html?path=/story/inlineerror--inline-error-brand-theme&globals=viewport:responsive

Because the background fades from white to blue the contrast check happens during an intermediate state. If you switch from the Accessibility tab and back again it reruns the check and passes because there's no fade.

[SiAdcock]

Thanks for the explainer @jamesmockett. To me that sounds like a bug in the accessibility plugin rather than something in our setup. What are the next steps? And is this currently blocking anything from our perspective?