Add Sa11y to dev environment

[adamchaboryk]

Do not delete the following line

@netlify /en/pages-to-review/

(Français)

(Pick the language of your choice to fill out the following information.)

What does this pull request (PR) do?

This PR adds Sa11y to the development environment of the DAT. Sa11y will appear on all pages in the bottom right corner, displaying the respective language based on the page's locale. Thanks to @shawnthompson for giving me some implementation tips!

Additional information (optional)

Customizing Sa11y

It's super easy to customize Sa11y via props. For example, if you'd like to ignore the Government of Canada logo on all pages, you can use one of the various ignore props.

For example:

const sa11y = new Sa11y({
  checkRoot: "main",
  imageIgnore: 'img[src*="sig-blk-en.svg"]',
});

Related issues

• Discussion item Add Sa11y to Accessibility Testing 101 page #685
• Issue add automated a11y testing to project #73

Screenshots

View Netlify deploy link!

[netlify]

✅ Deploy Preview for a11ycanada ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	5122b91
🔍 Latest deploy log	https://app.netlify.com/sites/a11ycanada/deploys/67b0006224670c00086ee835
😎 Deploy Preview	https://deploy-preview-686--a11ycanada.netlify.app/en/pages-to-review/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[adamchaboryk]

I had another thought, it may be better to add Sa11y via .eleventy.js instead...

// Add Sa11y (accessibility checker) to all pages in development mode.
eleventyConfig.addTransform("addSa11y", async (content, outputPath) => {
  if (process.env.ELEVENTY_ENV === "dev" && outputPath && outputPath.endsWith(".html")) {
    const version = "4.1.0"; // Manually update Sa11y version.
    const sa11y = `
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ryersondmp/sa11y@${version}/dist/css/sa11y.min.css"/>
      <script>
      (() => {
        const lang = document.documentElement.getAttribute('lang') || 'en';
        const script = document.createElement('script');
        script.src = \`https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@${version}/dist/js/lang/\${lang}.umd.js,gh/ryersondmp/sa11y@${version}/dist/js/sa11y.umd.min.js\`;
        script.onload = () => {
          const Sa11yLang = lang === 'fr' ? Sa11yLangFr : Sa11yLangEn;
          Sa11y.Lang.addI18n(Sa11yLang.strings);
          new Sa11y.Sa11y({
            checkRoot: 'body', // Optional
            developerChecksOnByDefault: true, // Optional
          });
        };
        document.body.appendChild(script);
      })();
      </script>
    `;
    return content.replace("</body>", `${sa11y}</body>`);
  }
  return content;
});