fix(a11y): add "formulaire de connexion" to skiplinks & create dedica…

…ted component (#91)

* accessibility(skiplink): add skiplink

* fix(tsx): add key on array to fix warning

src/client/src/Pages/WrapperLayout.tsx

@@ -1,12 +1,14 @@
 import Footer from "../components/Footer/Footer";
 import Header from "../components/Header/Header";
+import SkipLinks from "../components/SkipLinks/SkipLinks";
 import "./layout.css";
 
 function WrapperLayout(props: { children: JSX.Element }) {
   return (
     <div className="app">
+      <SkipLinks />
       <Header />
-      <main role="main" className="content">
+      <main role="main" className="content" id="content">
         {props.children}
       </main>
       <Footer />

src/client/src/components/Footer/Footer.tsx

@@ -3,6 +3,7 @@ import { Footer as DsfrFooter } from "@codegouvfr/react-dsfr/Footer";
 function Footer() {
   return (
     <DsfrFooter
+      id="footer"
       accessibility="non compliant"
       termsLinkProps={{
         to: "/mentions-legales",

src/client/src/components/Header/Header.tsx

@@ -22,7 +22,7 @@ function Header() {
       text: "Feuille de route",
     },
     ...(isConnected
-      ? [<DropDownLogout />]
+      ? [<DropDownLogout key="dropDownLogout" />]
       : [
           {
             iconId: "fr-icon-account-circle-line" as const,

src/client/src/components/SkipLinks/SkipLinks.tsx

@@ -0,0 +1,25 @@
+import { SkipLinks as DsfrSkipLinks } from "@codegouvfr/react-dsfr/SkipLinks";
+
+function SkipLinks() {
+  return (
+    <DsfrSkipLinks
+      links={[
+        {
+          anchor: "#content",
+          label: "Contenu",
+        },
+        {
+          anchor:
+            "#header-menu-modal-fr-header-header-with-quick-access-items-nav-items",
+          label: "Menu",
+        },
+        {
+          anchor: "#footer",
+          label: "Pied de page",
+        },
+      ]}
+    />
+  );
+}
+
+export default SkipLinks;