Setup for Accessibility testing (storybook for starters)

[gobyrne]

Gray and patcon felt that storybook was the most appropriate path forward in the short term.

Timeline would be for this work to happen either in the next sprint, or this sprint (PPPRE) if someone finds time.

There were a number of other proposals (opening UAT up to public with or without disabling auth, heroku or other external host) but Gray and patcon both thought they'd present challenges in short-term. Please do chime in if you think differently :)

Proposed To Dos

• [x] inventory which pages of profile have stories and which don't
• [x] share links with Gray for Fable testing

[patcon]

This may be helpful to stitch together flows in storybook: https://github.com/storybookjs/storybook/blob/next/code/addons/links/README.md

In longer term, I really like the idea of us hosting our own dev environment for accessibility testing! This has the added perk of helping us practice/learn from building a [continuous] deployment process, with a strong supporting rationale (removing pain points for accessibility testers).

[esizer]

Going to take a stab at this. Debating an estimate between 3-5, what are your thoughts @patcon ?

[esizer]

So, I put together a UseProfile story which sets the links using the hrefTo function from the recommended addon. It seems to do exactyl what we need it to do but it is not navigating properly. My initial suspicion is that it is related to #3422 . If no one picks this up, I may circle back once that issue has been resolved.

Example

 const [paths, setPaths] = React.useState<Record<string, string> | null>(null);
  const getPaths = React.useCallback(async () => {
    const newPaths = {
      about: await hrefTo("AboutMeForm", "Individual About Me"),
      ...
    };

    setPaths(newPaths);
  }, []);

  React.useEffect(() => {
    getPaths();
  }, [getPaths]);

  return (
    <UserProfile
      applicant={fakeUserData as Applicant}
      sections={{
        ...
          about: { isVisible: true, editUrl: paths.about },
        ...
      }}
    />
  );

[esizer]

@gobyrne These are the links to each story that represent what we currently have for the applicant profiles.

Links

Pages

• User Profile
• Experience and Skills Page

Forms

• About Me Form
• Language Information Form
• Government Information Form
• Work Location Form
• Work Preferences Form
• Diversity, Equity and Inclusion Form
• Role and Salary Expectations Form
• Experience Form

[gobyrne]

These look great @esizer. Would it be easy to get the interactive part of the Diversity, Equity and Inclusion Form working in storybook? I would like to get that tested.

If that is going to be work, feel free to break it into a separate issue. I intend to immediately start using these links to get the interactive components tested in isolation.

I love that we can use the Experience Form to test the skills UI! I'm concerned about accessibility for that one.

[esizer]

Would it be easy to get the interactive part of the Diversity, Equity and Inclusion Form working in storybook? I would like to get that tested.

@gobyrne , Got that in with https://github.com/GCTC-NTGC/gc-digital-talent/pull/3636