Fix: Update en and fr json - add accessibility page

.eleventy.js

@@ -30,7 +30,8 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy('./src/scripts/code-showcase.js');
   eleventyConfig.addPassthroughCopy('./src/scripts/search.js');
   eleventyConfig.addPassthroughCopy('./src/scripts/code-copy.js');
-  eleventyConfig.addPassthroughCopy('./src/admin/config.yml');
+  eleventyConfig.addPassthroughCopy('./src/scripts/component-preview.js');
+  eleventyConfig.addPassthroughCopy('./src/scripts/component-preview-iframe.js');
   eleventyConfig.addPassthroughCopy('./src/favicon.ico');
   eleventyConfig.addPassthroughCopy({ './src/variables/': 'variables' });
   eleventyConfig.addPassthroughCopy({
@@ -199,7 +200,7 @@ module.exports = function (eleventyConfig) {
 
     return `
         <div class="code-showcase mb-300">
-          <textarea class="showcase text-light mb-300 p-300" id="${id}" rows="8" aria-label="${langStrings[lang].code} - ${name}" aria-hidden="true" readonly>${content}</textarea>
+          <textarea class="showcase text-light mb-300 p-300" id="${id}" rows="8" aria-label="${langStrings[lang].code} - ${name}" tabindex="-1" aria-hidden="true" readonly>${content}</textarea>
           <div>
             <gcds-button
               class="showcase-view-button"
@@ -285,7 +286,7 @@ module.exports = function (eleventyConfig) {
       const content = children;
 
       return `
-      <div class="${margin} b-sm b-default component-preview" id="component-preview">
+      <div class="${margin} b-sm b-default component-preview">
         <p class="container-full font-semibold px-225 py-150 bb-sm b-default bg-light">
           ${title}
         </p>
@@ -297,6 +298,29 @@ module.exports = function (eleventyConfig) {
     },
   );
 
+  eleventyConfig.addPairedShortcode(
+    'baseComponentPreview',
+    (children, title, url) => {
+      return `
+      <div class="my-600 b-sm b-default component-preview">
+        <h2 class="container-full font-text font-semibold px-225 py-150 bb-sm b-default bg-light">
+          ${title}
+        </h2>
+        <div>
+          <iframe
+            title="${title}"
+            src="${url.replace('/base', '/preview')}"
+            style="display: block; margin: 0 auto;"
+            frameBorder="0"
+            width="100%"
+            id="component-preview"
+          ></iframe>
+        </div>
+      </div>
+    `;
+    },
+  );
+
   /*
    * Shortcode to render demo dates
    * Renders based on data file at ./src/_data/registerdemos.js

.github/workflows/a11y-tests.yaml

@@ -1,32 +1,32 @@
-name: A11y test
+name: A11y test documentation site
+
 on:
+  workflow_dispatch:
   push:
     paths-ignore:
       - 'reports/**'
     branches:
-      - gh-pages
+      - main
+  pull_request:
+    branches:
+      - main
 
 jobs:
-  build-deploy:
-    name: A11y test
+  a11y-test:
+    name: A11y test documentation site
     runs-on: ubuntu-latest
+    container: 
+      image: cypress/included:11.2.0
     steps:
       - name: Git Checkout
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-      - name: Install pa11y
-        run: npm install -g pa11y-ci pa11y-ci-reporter-html
-      - name: run pa11y test
-        run: pa11y-ci --sitemap https://cds-snc.github.io/${{ github.event.repository.name }}/sitemap.xml
-      - name: Commit
-        if: always()
-        run: |
-          git config --local user.email "github-actions[bot]@users.noreply.github.com"
-          git config --local user.name "github-actions[bot]"
-          git add -A
-          git commit -m "A11y report"
-      - name: Push changes
-        if: always()
-        uses: ad-m/github-push-action@77c5b412c50b723d2a4fbc6d71fb5723bcd439aa
+
+      - uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2
+        with:
+          node-version: '18.x'
+
+      - name: Cypress run
+        uses: cypress-io/github-action@7271bed2a170d73c0b08939cd192db51a1c46c50 # v6.7.10
         with:
-          github_token: ${{ secrets.ACCESS_TOKEN }}
-          branch: 'gh-pages'
+          build: npm run build:eleventy
+          start: npm run watch:eleventy

.github/workflows/docker-build-push-production.yml

@@ -45,7 +45,7 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Configure AWS credentials using OIDC
-        uses: aws-actions/configure-aws-credentials@e3dd6a429d7300a6a4c196c26e071d42e0343502 # v4.0.2
+        uses: aws-actions/configure-aws-credentials@4fc4975a852c8cd99761e2de1f4ba73402e44dd9 # v4.0.3
         with:
           role-to-assume: arn:aws:iam::307395567143:role/gcds-docs-apply
           role-session-name: ECRPush

.github/workflows/ossf-scorecard.yml

@@ -25,7 +25,7 @@ jobs:
           persist-credentials: false
 
       - name: "Run analysis"
-        uses: ossf/scorecard-action@e48dbb732fab761267783321dfa71e2a5c6e263d
+        uses: ossf/scorecard-action@e46782f7871619d6c6fdee79dacc84f2d7738a50
         with:
           results_file: ossf-results.json
           results_format: json

.github/workflows/s3-backup.yml

@@ -15,7 +15,7 @@ jobs:
         fetch-depth: 0 # retrieve all history
 
     - name: Configure AWS credentials
-      uses: aws-actions/configure-aws-credentials@e3dd6a429d7300a6a4c196c26e071d42e0343502 # v4.0.2
+      uses: aws-actions/configure-aws-credentials@4fc4975a852c8cd99761e2de1f4ba73402e44dd9 # v4.0.3
       with:
         aws-access-key-id: ${{ secrets.AWS_S3_BACKUP_ACCESS_KEY_ID }}
         aws-secret-access-key: ${{ secrets.AWS_S3_BACKUP_SECRET_ACCESS_KEY }}

.gitignore

@@ -13,4 +13,4 @@ _site/
 src/_includes/partials/templates/en/
 src/_includes/partials/templates/fr/
 
-package-lock.json
+cypress/screenshots/

customHttp.yml

@@ -4,7 +4,7 @@ customHeaders:
       - key: Strict-Transport-Security
         value: max-age=31536000; includeSubDomains
       - key: X-Frame-Options
-        value: DENY
+        value: SAMEORIGIN
       - key: X-XSS-Protection
         value: 1; mode=block
       - key: X-Content-Type-Options
@@ -21,10 +21,10 @@ customHeaders:
           default-src 'self' https://kit.fontawesome.com/ https://cdn.jsdelivr.net/npm/;
           font-src 'self' fonts.gstatic.com https://unpkg.com/[email protected]/ https://cdnjs.cloudflare.com/ajax/libs/font-awesome/;
           script-src 'self' 'wasm-unsafe-eval' https://cdn.design-system.alpha.canada.ca www.googletagmanager.com www.google-analytics.com https://cdnjs.cloudflare.com/ajax/libs/font-awesome/ https://cdn.jsdelivr.net/npm/ 'unsafe-inline';
-          frame-src www.googletagmanager.com www.google-analytics.com https://cds-snc.github.io/;
+          frame-src www.googletagmanager.com www.google-analytics.com https://cds-snc.github.io/ https://design-system.alpha.canada.ca/ https://systeme-design.alpha.canada.ca/;
           connect-src 'self' www.googletagmanager.com www.google-analytics.com www.canada.ca;
           img-src 'self' data: https: www.w3.org;
           style-src 'unsafe-inline' https: 'strict-dynamic' 'self' https://fonts.googleapis.com;
           base-uri 'self';
           form-action 'self';
-          object-src 'none'
+          object-src 'none'

cypress.config.js

@@ -0,0 +1,25 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      on('task', {
+        log(message) {
+          console.log(message)
+
+          return null
+        },
+        table(message) {
+          console.table(message)
+
+          return null
+        }
+      })
+    },
+    baseUrl: 'http://localhost:8080',
+    viewportWidth: 1280,
+    viewportHeight: 850,
+    screenshotOnRunFailure: false,
+    video: false,
+  },
+});

cypress/e2e/a11y-en.cy.js

@@ -0,0 +1,54 @@
+/// <reference types="cypress" />
+
+const enLinks = require('../../src/en/en.json');
+
+const pagesEn = [];
+
+// Create index of English pages
+Object.keys(enLinks.links).forEach(key => {
+  const url = enLinks.links[key];
+  if (
+    !url.includes('coming-soon') &&
+    !url.includes('https') &&
+    !url.includes('mailto') &&
+    !url.includes('demo')
+  ) {
+    let regex = /components\/[a-z]/;
+    const pageName = key.replace(/([A-Z])/g, ' $1');
+    if (regex.test(url)) {
+      pagesEn.push({
+        name: `${pageName} - use case`,
+        url,
+      });
+      pagesEn.push({
+        name: `${pageName} - design`,
+        url: `${url}/design/`,
+      });
+      pagesEn.push({
+        name: `${pageName} - code`,
+        url: `${url}/code/`,
+      });
+    } else {
+      pagesEn.push({
+        name: pageName,
+        url,
+      });
+    }
+  }
+});
+
+describe(`A11Y test English documentation site`, () => {
+  for (const page of pagesEn) {
+    it(`${page.name}: ${page.url}`, () => {
+      cy.visit(page.url, { timeout: 30000 });
+      cy.get('.hydrated').then(() => {
+        cy.injectAxe();
+        cy.checkA11y(null, null, cy.terminalLog);
+        // skip theme and topic menu since links are pulled from external source
+        if (!page.url.includes('theme-and-topic-menu')) {
+          cy.scanDeadLinks();
+        }
+      });
+    });
+  }
+});

cypress/e2e/a11y-fr.cy.js

@@ -0,0 +1,55 @@
+/// <reference types="cypress" />
+
+const frLinks = require('../../src/fr/fr.json');
+
+const pagesFr = [];
+
+// Create index of French pages
+Object.keys(frLinks.links).forEach(key => {
+  const url = frLinks.links[key];
+  if (
+    !url.includes('developpement-en-cours') &&
+    !url.includes('https') &&
+    !url.includes('mailto') &&
+    !url.includes('demo')
+  ) {
+    let regex = /composants\/[a-z]/;
+    const pageName = key.replace(/([A-Z])/g, ' $1');
+    if (regex.test(url)) {
+      pagesFr.push({
+        name: `${pageName} - use case`,
+        url,
+      });
+      pagesFr.push({
+        name: `${pageName} - design`,
+        url: `${url}/design/`,
+      });
+      pagesFr.push({
+        name: `${pageName} - code`,
+        url: `${url}/code/`,
+      });
+    } else {
+      pagesFr.push({
+        name: `${pageName}`,
+        url,
+      });
+    }
+  }
+});
+
+describe(`A11Y test French documentation site`, () => {
+  after
+  for (const page of pagesFr) {
+    it(`${page.name}: ${page.url}`, () => {
+      cy.visit(page.url, { timeout: 30000 });
+      cy.get('.hydrated').then(() => {
+        cy.injectAxe();
+        cy.checkA11y(null, null, cy.terminalLog);
+        // skip theme and topic menu since links are pulled from external source
+        if (!page.url.includes('menu-thematique')) {
+          cy.scanDeadLinks();
+        }
+      });
+    });
+  }
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,81 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// keep track of what we test so we dont test the same thing twice
+let links_checked = [];
+
+Cypress.Commands.add('scanDeadLinks', () => {
+  cy.get('body').within(() => {
+    let checked = 0;
+
+    cy.get('a', { includeShadowDom: true })
+      .each(link => {
+        if (
+          link.prop('href').startsWith('mailto') ||
+          link.prop('href').includes('.pdf')
+        )
+          return;
+
+        const check_url = link.prop('href');
+
+        // skip if its already been checked
+        if (links_checked.includes(check_url)) return;
+
+        cy.request(link.prop('href')).as('link');
+
+        links_checked.push(check_url);
+        checked++;
+      })
+      .as('links');
+
+    cy.get('@links').then(links => {
+      cy.log('links checked', checked);
+    });
+  });
+});
+
+// Make the violation impacts more human readable
+const displayImpacts = violations => {
+  const impacts = violations.map(violation => violation.impact);
+
+  const uniqueArr = [...new Set(impacts)];
+
+  if (uniqueArr.length === 1) {
+    return `with a ${uniqueArr[0]} impact`;
+  }
+
+  return (
+    'with ' +
+    uniqueArr.slice(0, -1).join(', ') +
+    ' and ' +
+    uniqueArr.slice(-1) +
+    ' impacts.'
+  );
+};
+
+Cypress.Commands.add('terminalLog', violations => {
+  cy.task(
+    'log',
+    `${violations.length} accessibility violation${
+      violations.length === 1 ? '' : 's'
+    } ${violations.length === 1 ? 'was' : 'were'} detected ${displayImpacts(violations)}`,
+  );
+  // pluck specific keys to keep the table readable
+  const violationData = violations.map(
+    ({ id, impact, description, nodes }) => ({
+      id,
+      impact,
+      description,
+      nodes: nodes.length,
+    }),
+  );
+
+  cy.task('table', violationData);
+});