feat(dsfr): ajout des liens d'évitement

packages/code-du-travail-frontend/cypress/integration/light/header.spec.ts

@@ -0,0 +1,19 @@
+describe("Header", () => {
+  it("doit afficher les liens d'évitement", () => {
+    cy.visit("/mentions-legales");
+    cy.get("[id^=fr-skiplinks]").as("skipLink").should("not.be.visible");
+    cy.window().focus().realPress("Tab");
+    cy.get("@skipLink").should("be.visible");
+    cy.focused().should("have.attr", "href", "#main");
+    cy.realPress("Tab");
+    cy.focused().should("have.attr", "href", "#fr-header-main-navigation");
+    cy.realPress("Tab");
+    cy.focused().should("have.attr", "href", "#fr-header-search-input");
+    cy.realPress("Tab");
+    cy.focused().should("have.attr", "href", "#more-info");
+    cy.realPress("Enter");
+    cy.get("@skipLink").should("not.have.focus").and("not.be.visible");
+    cy.realPress("Tab");
+    cy.focused().should("have.text", "Trouver les services près de chez moi");
+  });
+});

packages/code-du-travail-frontend/cypress/support/index.ts

@@ -17,6 +17,7 @@
 
 import "./commands";
 import "./errors";
+import "cypress-real-events";
 
 // in cypress/support/index.ts
 // load type definitions that come with Cypress module

packages/code-du-travail-frontend/cypress/tsconfig.json

@@ -3,8 +3,16 @@
   "compilerOptions": {
     "noEmit": true,
     "isolatedModules": false,
-    "types": ["cypress"]
+    "types": [
+      "cypress",
+      "cypress-real-events"
+    ]
   },
-  "include": ["../node_modules/cypress", "./**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "../node_modules/cypress",
+    "./**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

packages/code-du-travail-frontend/package.json

@@ -95,6 +95,7 @@
     "cypress": "^13.13.2",
     "cypress-html-validate": "^6.1.0",
     "cypress-iframe": "^1.0.1",
+    "cypress-real-events": "^1.13.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "eslint-plugin-cypress": "^3.4.0",

packages/code-du-travail-frontend/src/modules/layout/NeedMoreInfo.tsx

@@ -4,7 +4,7 @@ import { css } from "../../../styled-system/css";
 
 export const NeedMoreInfo = () => {
   return (
-    <div className={mainContainer}>
+    <div className={mainContainer} id="more-info">
       <div className={fr.cx("fr-container")}>
         <div className={fr.cx("fr-grid-row", "fr-grid-row--center")}>
           <div className={`${fr.cx("fr-col-md-6", "fr-py-6w")}`}>

packages/code-du-travail-frontend/src/modules/layout/SkipLinks.tsx

@@ -0,0 +1,24 @@
+import { SkipLinks as DsfrSkipLinks } from "@codegouvfr/react-dsfr/SkipLinks";
+
+export const SkipLinks = () => (
+  <DsfrSkipLinks
+    links={[
+      {
+        anchor: "#main",
+        label: "Contenu",
+      },
+      {
+        anchor: "#fr-header-main-navigation",
+        label: "Menu",
+      },
+      {
+        anchor: "#fr-header-search-input",
+        label: "Recherche",
+      },
+      {
+        anchor: "#more-info",
+        label: "Pied de page",
+      },
+    ]}
+  />
+);

packages/code-du-travail-frontend/src/modules/layout/__tests__/SkipLinks.test.tsx

@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { SkipLinks } from "../SkipLinks";
+
+describe("<SkipLinks />", () => {
+  it("should match snapshot", () => {
+    const { container } = render(<SkipLinks />);
+    expect(container).toMatchSnapshot();
+  });
+});

packages/code-du-travail-frontend/src/modules/layout/__tests__/__snapshots__/NeedMoreInfo.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`<NeedMoreInfo /> should match snapshot 1`] = `
 <div>
   <div
     class="bg_var(--background-alt-blue-france)"
+    id="more-info"
   >
     <div
       class="fr-container"

packages/code-du-travail-frontend/src/modules/layout/header/index.tsx

@@ -75,6 +75,7 @@ export const Header = () => {
         />
       )}
       onSearchButtonClick={onSearchSubmit}
+
     />
   );
 };

packages/code-du-travail-frontend/src/modules/layout/index.tsx

@@ -2,13 +2,17 @@ import { fr } from "@codegouvfr/react-dsfr";
 import { Footer } from "./Footer";
 import { Header } from "./header";
 import { NeedMoreInfo } from "./NeedMoreInfo";
+import { SkipLinks } from "./SkipLinks";
 
 export const DsfrLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html>
       <body>
+        <SkipLinks />
         <Header />
-        <main className={fr.cx("fr-container")}>{children}</main>
+        <main className={fr.cx("fr-container")} id="main">
+          {children}
+        </main>
         <NeedMoreInfo />
         <Footer />
       </body>

yarn.lock

@@ -1905,6 +1905,7 @@ __metadata:
     cypress: ^13.13.2
     cypress-html-validate: ^6.1.0
     cypress-iframe: ^1.0.1
+    cypress-real-events: ^1.13.0
     date-fns: ^2.22.1
     debounce-promise: ^3.1.2
     downshift: ^9.0.6
@@ -11476,6 +11477,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cypress-real-events@npm:^1.13.0":
+  version: 1.13.0
+  resolution: "cypress-real-events@npm:1.13.0"
+  peerDependencies:
+    cypress: ^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x || ^13.x
+  checksum: 9da229ab8a6eea9ebea511dbecbe421592360ea7bcb7e7f1e9cec41d7309a5f3d5404e5c2db8be13c7d6746b8e118b93ff221fabf22d5c5330996510592aed2d
+  languageName: node
+  linkType: hard
+
 "cypress@npm:^13.13.2":
   version: 13.13.2
   resolution: "cypress@npm:13.13.2"