Merge pull request #107 from MTES-MCT/chore/a11y

Setup lighthouse
MTES-MCT · Jan 16, 2025 · 138ce93 · 138ce93
2 parents af399c3 + 8ae9a51
commit 138ce93
Show file tree

Hide file tree

Showing 37 changed files with 5,842 additions and 1,195 deletions.
diff --git a/.github/workflows/tests.yml → .github/workflows/client-e2e-tests.yml b/.github/workflows/tests.yml → .github/workflows/client-e2e-tests.yml
@@ -1,25 +1,10 @@
-name: Tests
+name: Client e2e tests
 
 on:
   pull_request:
 
 jobs:
-  client-test-unit:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20.x]
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      - run: npm ci
-      - run: npm run test:unit -w client
-
-  client-test-e2e:
+  client-e2e-tests:
     runs-on: ubuntu-latest
     env:
       LANDBOT_CONFIG_URL: ${{ secrets.LANDBOT_CONFIG_URL }}

diff --git a/.github/workflows/client-unit-tests.yml b/.github/workflows/client-unit-tests.yml
@@ -0,0 +1,20 @@
+name: Client unit tests
+
+on:
+  pull_request:
+
+jobs:
+  client-unit-tests:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run test:unit -w client
diff --git a/.github/workflows/lighthouse-desktop.yml b/.github/workflows/lighthouse-desktop.yml
@@ -0,0 +1,32 @@
+name: Lighthouse desktop
+
+on:
+  pull_request:
+
+jobs:
+  lighthouse-desktop:
+    runs-on: ubuntu-latest
+    env:
+      LANDBOT_CONFIG_URL: ${{ secrets.LANDBOT_CONFIG_URL }}
+      PUBLIC_BORIS_CMS_URL: ${{ secrets.PUBLIC_BORIS_CMS_URL }}
+    strategy:
+      matrix:
+        node-version: [20.x]
+        runs-on: [ubuntu-latest]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build -w client
+      - run: npm run preview -w client & npm run lighthouse-desktop -w client
+      - name: Upload Lighthouse Report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          include-hidden-files: true
+          name: lighthouse-report-${{ matrix.runs-on }}
+          path: ${{ github.workspace }}/client/.lighthouseci/*
diff --git a/.github/workflows/lighthouse-mobile.yml b/.github/workflows/lighthouse-mobile.yml
@@ -0,0 +1,32 @@
+name: Lighthouse mobile
+
+on:
+  pull_request:
+
+jobs:
+  lighthouse-mobile:
+    runs-on: ubuntu-latest
+    env:
+      LANDBOT_CONFIG_URL: ${{ secrets.LANDBOT_CONFIG_URL }}
+      PUBLIC_BORIS_CMS_URL: ${{ secrets.PUBLIC_BORIS_CMS_URL }}
+    strategy:
+      matrix:
+        node-version: [20.x]
+        runs-on: [ubuntu-latest]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build -w client
+      - run: npm run preview -w client & npm run lighthouse-mobile -w client
+      - name: Upload Lighthouse Report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          include-hidden-files: true
+          name: lighthouse-report-${{ matrix.runs-on }}
+          path: ${{ github.workspace }}/client/.lighthouseci/*
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@ node_modules
 /client/.svelte-kit
 /client/test-results/
 /client/e2e/**/.setup/
+/client/.lighthouseci/
 
 # Logs
 logs

diff --git a/.talismanrc b/.talismanrc
diff --git a/client/.lighthouse-desktop.json b/client/.lighthouse-desktop.json
@@ -0,0 +1,17 @@
+{
+  "ci": {
+    "collect": {
+      "url": ["http://localhost:4173/"],
+      "numberOfRuns": 1,
+      "settings": {
+        "preset": "desktop"
+      }
+    },
+    "assert": {
+      "assertions": {
+        "categories:performance": ["error", { "minScore": 0.8 }],
+        "categories:accessibility": ["error", { "minScore": 1 }]
+      }
+    }
+  }
+}
diff --git a/client/.lighthouse-mobile.json b/client/.lighthouse-mobile.json
@@ -0,0 +1,14 @@
+{
+  "ci": {
+    "collect": {
+      "url": ["http://localhost:4173"],
+      "numberOfRuns": 1
+    },
+    "assert": {
+      "assertions": {
+        "categories:performance": ["error", { "minScore": 0.5 }],
+        "categories:accessibility": ["error", { "minScore": 1 }]
+      }
+    }
+  }
+}
diff --git a/client/package.json b/client/package.json
@@ -17,21 +17,26 @@
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
     "test:e2e": "playwright test",
-    "test:unit": "vitest"
+    "test:unit": "vitest",
+    "lighthouse-mobile": "lhci autorun --config=./.lighthouse-mobile.json",
+    "lighthouse-desktop": "lhci autorun --config=./.lighthouse-desktop.json"
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "^3.0.0",
+    "@fullhuman/postcss-purgecss": "^7.0.2",
     "@gouvfr/dsfr": "^1.12.1",
+    "@lhci/cli": "^0.14.0",
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-node": "^5.2.9",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+    "cssnano": "^7.0.6",
     "eslint-plugin-svelte": "^2.36.0",
     "globals": "^15.0.0",
     "husky": "^9.1.6",
     "nanoid": "^5.0.8",
-    "postcss": "^8.4.49",
     "papaparse": "^5.4.1",
+    "postcss": "^8.4.49",
     "postcss-custom-media": "^11.0.5",
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^5.16.6",

diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -1,11 +1,27 @@
 import postcssCustomMedia from 'postcss-custom-media';
 import postcssGlobalData from '@csstools/postcss-global-data';
+import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
+import cssNano from 'cssnano';
 
-export default {
-  plugins: [
-    postcssGlobalData({
-      files: ['src/assets/styles/_vars.css'],
+const plugins = [
+  postcssGlobalData({
+    files: ['src/assets/styles/_vars.css'],
+  }),
+  postcssCustomMedia(),
+  cssNano({
+    preset: 'default',
+  }),
+];
+
+if (process.env.NODE_ENV !== 'development') {
+  plugins.push(
+    purgeCSSPlugin({
+      content: ['./src/**/*.svelte', './src/**/*.html'],
+      safelist: [/svelte-/, /placement/, /modal/],
     }),
-    postcssCustomMedia(),
-  ],
+  );
+}
+
+export default {
+  plugins,
 };
diff --git a/client/src/assets/styles/main.css b/client/src/assets/styles/main.css
@@ -26,3 +26,7 @@ html {
 .color-blue-primary {
   color: var(--color-blue-primary);
 }
+
+.background-color-white {
+  background-color: white;
+}
diff --git a/client/src/lib/components/common/Accordion.svelte b/client/src/lib/components/common/Accordion.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import '@gouvfr/dsfr/dist/component/accordion/accordion.min.css';
   import type { Heading } from '$lib/utils/definitions';
   import { nanoid } from 'nanoid';
   import type { Snippet } from 'svelte';

diff --git a/client/src/lib/components/common/HorizontalCard.svelte b/client/src/lib/components/common/HorizontalCard.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import '@gouvfr/dsfr/dist/component/card/card.min.css';
+  import '@gouvfr/dsfr/dist/utility/icons/icons-editor/icons-editor.min.css';
+  import '@gouvfr/dsfr/dist/utility/icons/icons-system/icons-system.min.css';
   import Photograph from '$components/common/Photograph.svelte';
 
   type Props = {

diff --git a/client/src/lib/components/common/Section.svelte b/client/src/lib/components/common/Section.svelte
@@ -27,27 +27,29 @@
 </section>
 
 <style lang="postcss">
-  :global(.section) {
+  .section {
     padding-block: var(--2w);
+  }
 
-    &:nth-child(1) {
-      padding-block-start: var(--4w);
-    }
+  .section:nth-last-child(1) {
+    padding-block-end: var(--4w);
+  }
 
-    &:nth-last-child(1) {
-      padding-block-end: var(--4w);
-    }
+  .section:nth-child(1) {
+    padding-block-start: var(--4w);
+  }
 
-    @media (--sm-viewport) {
+  @media (--sm-viewport) {
+    .section {
       padding-block: var(--4w);
+    }
 
-      &:nth-child(1) {
-        padding-block-start: var(--8w);
-      }
+    .section:nth-child(1) {
+      padding-block-start: var(--8w);
+    }
 
-      &:nth-last-child(1) {
-        padding-block-end: var(--8w);
-      }
+    .section:nth-last-child(1) {
+      padding-block-end: var(--8w);
     }
   }
 </style>
diff --git a/client/src/lib/components/common/Tooltip.svelte b/client/src/lib/components/common/Tooltip.svelte
@@ -1,7 +1,16 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+  import '@gouvfr/dsfr/dist/component/tooltip/tooltip.min.css';
+  import '@gouvfr/dsfr/dist/utility/icons/icons-system/icons-system.min.css';
+  import { onMount, type Snippet } from 'svelte';
   import { nanoid } from 'nanoid';
 
+  onMount(async () => {
+    await import(
+      // @ts-expect-error: no declaration file
+      '@gouvfr/dsfr/dist/component/tooltip/tooltip.module.min'
+    );
+  });
+
   type Props = {
     children: Snippet;
   };

diff --git a/client/src/lib/components/layout/Footer.svelte b/client/src/lib/components/layout/Footer.svelte
@@ -1,3 +1,9 @@
+<script lang="ts">
+  import '@gouvfr/dsfr/dist/component/link/link.min.css';
+  import '@gouvfr/dsfr/dist/component/logo/logo.min.css';
+  import '@gouvfr/dsfr/dist/component/footer/footer.min.css';
+</script>
+
 <footer
   class="fr-footer"
   id="footer">
@@ -106,13 +112,6 @@
     </div>
     <div class="fr-footer__bottom">
       <ul class="fr-footer__bottom-list">
-        <!-- <li class="fr-footer__bottom-item">
-          <a
-            class="fr-footer__bottom-link"
-            href="/plan-du-site">
-            Plan du site
-          </a>
-        </li> -->
         <li class="fr-footer__bottom-item">
           <a
             class="fr-footer__bottom-link"

diff --git a/client/src/lib/components/layout/Header.svelte b/client/src/lib/components/layout/Header.svelte
@@ -1,6 +1,27 @@
 <script lang="ts">
+  import '@gouvfr/dsfr/dist/component/link/link.main.min.css';
+  import '@gouvfr/dsfr/dist/component/button/button.min.css';
+  import '@gouvfr/dsfr/dist/component/logo/logo.min.css';
+  import '@gouvfr/dsfr/dist/component/navigation/navigation.min.css';
+  import '@gouvfr/dsfr/dist/component/modal/modal.min.css';
+  import '@gouvfr/dsfr/dist/component/header/header.min.css';
+
+  onMount(async () => {
+    // @ts-expect-error: no declaration file
+    await import('@gouvfr/dsfr/dist/core/core.module.min');
+    await import(
+      // @ts-expect-error: no declaration file
+      '@gouvfr/dsfr/dist/component/navigation/navigation.module.min'
+    );
+    // @ts-expect-error: no declaration file
+    await import('@gouvfr/dsfr/dist/component/modal/modal.module.min.js');
+    // @ts-expect-error: no declaration file
+    await import('@gouvfr/dsfr/dist/component/header/header.module.min.js');
+  });
+
   import { page } from '$app/stores';
   import { default as Logo } from '$assets/illustrations/logo.svg?raw';
+  import { onMount } from 'svelte';
 
   let pathname = $state($page.url.pathname);
 

diff --git a/...rc/lib/components/common/SkipLinks.svelte → ...rc/lib/components/layout/SkipLinks.svelte b/...rc/lib/components/common/SkipLinks.svelte → ...rc/lib/components/layout/SkipLinks.svelte