feat: add page accessibilite

src/components/accessibilite/index.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Declaration from "./";
+
+export default {
+  title: "Déclaration d'accessibilité",
+  component: Declaration,
+} as ComponentMeta<typeof Declaration>;
+
+const Template: ComponentStory<typeof Declaration> = (args) => (
+  <Declaration {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const SomeDeclaration = Template.bind({});
+SomeDeclaration.args = {
+  produit: "NOUVEAU PRODUIT",
+  organisme: "SERVICE DE XXXXXXX",
+  email: "contact@example.fr",
+  conformite: "partiellement conforme",
+  audited: true,
+};

src/components/accessibilite/index.tsx

@@ -0,0 +1,85 @@
+const Declaration = ({
+  produit = "[PRODUIT]",
+  organisme = "Fabrique numérique des ministères sociaux",
+  date = "9 décembre 2021",
+  conformite = "non conforme",
+  audited = false,
+  email = "contact@fabrique.social.gouv.fr",
+}) => {
+  return (
+    <div>
+      <h1>Déclaration d’accessibilité</h1>
+      <p>
+        <span>{produit}</span> s’engage à rendre son service accessible,
+        conformément à{" "}
+        <a href="https://www.legifrance.gouv.fr/loda/article_lc/LEGIARTI000037388867/">
+          l’article 47 de la loi n° 2005-102 du 11 février 2005.
+        </a>
+      </p>
+      <p>
+        Cette déclaration d’accessibilité s’applique à <span>{organisme}</span>.
+      </p>
+      <h2>État de conformité</h2>
+      <p>
+        <span>{produit}</span> est{" "}
+        <b>
+          <span data-printfilter="lowercase">{conformite}</span> avec le{" "}
+          <span data-negate="">RGAA 4.1</span>
+        </b>
+        .{!audited && <span>Le site n’a encore pas été audité.</span>}
+      </p>
+      <h2>Contenus non accessibles</h2>
+      <h2>Établissement de cette déclaration d’accessibilité</h2>
+      <p>
+        Cette déclaration a été établie le{" "}
+        <b>
+          <span>{date}</span>
+        </b>
+        .
+      </p>
+      <h2>Amélioration et contact</h2>
+      <p>
+        Si vous n’arrivez pas à accéder à un contenu ou à un service, vous
+        pouvez contacter le responsable de <span>{organisme}</span> pour être
+        orienté vers une alternative accessible ou obtenir le contenu sous une
+        autre forme.
+      </p>
+      <ul className="basic-information feedback h-card">
+        <li>
+          E-mail : <a href={`mailto:${email}`}>{email}</a>
+        </li>
+      </ul>
+      <h2>Voie de recours</h2>
+      <p>
+        Cette procédure est à utiliser dans le cas suivant : vous avez signalé
+        au responsable du site internet un défaut d’accessibilité qui vous
+        empêche d’accéder à un contenu ou à un des services du portail et vous
+        n’avez pas obtenu de réponse satisfaisante.
+      </p>
+      <p>Vous pouvez :</p>
+      <ul>
+        <li>
+          Écrire un message au{" "}
+          <a href="https://formulaire.defenseurdesdroits.fr/">
+            Défenseur des droits
+          </a>
+        </li>
+        <li>
+          Contacter{" "}
+          <a href="https://www.defenseurdesdroits.fr/saisir/delegues">
+            le délégué du Défenseur des droits dans votre région
+          </a>
+        </li>
+        <li>
+          Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre) :
+          <br />
+          Défenseur des droits
+          <br />
+          Libre réponse 71120 75342 Paris CEDEX 07
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Declaration;

src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as DeclarationAccessibilite } from "./accessibilite";
 export { default as Header } from "./header";
 export { default as Footer } from "./footer";
 export { default as Layout } from "./layout";

src/config/layout.ts

@@ -172,7 +172,7 @@ export const footerBottomSection: FooterBottomSectionProps = {
   links: [
     {
       title: "Accessibilité : non conforme",
-      href: "/mention-legales#accessibilite",
+      href: "/accessibilite",
     },
     {
       title: "Mentions légales",

src/pages/accessibilite.tsx

@@ -0,0 +1,41 @@
+import { DeclarationAccessibilite } from "@components";
+import { Alert } from "@dataesr/react-dsfr";
+import type { NextPage } from "next";
+import { NextSeo } from "next-seo";
+import React from "react";
+
+const Accessibilite: NextPage = () => {
+  return (
+    <>
+      <NextSeo
+        title="Template | Déclaration d'accessibilité"
+        description="Déclaration d'accessibilité de l'application template."
+        additionalLinkTags={[
+          {
+            rel: "icon",
+            href: "/favicon.ico",
+          },
+        ]}
+      />
+      <div className="fr-container fr-my-6w">
+        <Alert
+          description={
+            <div>
+              Utilisez le{" "}
+              <a href="https://betagouv.github.io/a11y-generateur-declaration/#create">
+                générateur de déclaration
+              </a>
+              .
+            </div>
+          }
+          title={<div>Cette page doit être mise à jour</div>}
+          type="info"
+        />
+        <br />
+        <DeclarationAccessibilite />
+      </div>
+    </>
+  );
+};
+
+export default Accessibilite;

src/pages/cgu.tsx

@@ -1,4 +1,5 @@
 import { MentionPart } from "@components";
+import { Alert } from "@dataesr/react-dsfr";
 import type { NextPage } from "next";
 import { NextSeo } from "next-seo";
 import React from "react";
@@ -31,6 +32,8 @@ const Cgu: NextPage = () => {
         ]}
       />
       <div className="fr-container fr-my-6w">
+        <Alert title="Cette page doit être mise à jour. " type="info" />
+        <br />
         <h1>Conditions générales d&apos;utilisation</h1>
         <div>
           <MentionPart

src/pages/mention-legales.tsx

@@ -1,5 +1,5 @@
 import { MentionPart } from "@components";
-import { Title } from "@dataesr/react-dsfr";
+import { Alert, Title } from "@dataesr/react-dsfr";
 import type { NextPage } from "next";
 import { NextSeo } from "next-seo";
 import React from "react";
@@ -18,6 +18,8 @@ const LegalMention: NextPage = () => {
         ]}
       />
       <div className="fr-container fr-my-6w">
+        <Alert title="Cette page doit être mise à jour. " type="info" />
+        <br />
         <h1>Mentions légales</h1>
         <div>
           <MentionPart

src/pages/politique-confidentialite.tsx

@@ -1,4 +1,4 @@
-import { Table } from "@dataesr/react-dsfr";
+import { Alert, Table } from "@dataesr/react-dsfr";
 import type { NextPage } from "next";
 import { NextSeo } from "next-seo";
 import React from "react";
@@ -24,6 +24,8 @@ const Confidentiality: NextPage = () => {
         ]}
       />
       <div className="fr-container fr-my-6w">
+        <Alert title="Cette page doit être mise à jour. " type="info" />
+        <br />
         <h1>Politique de confidentialité</h1>
         <div>
           <h2>Traitement des données à caractère personnel</h2>
@@ -76,7 +78,7 @@ const Confidentiality: NextPage = () => {
           </p>
           <h2>Hébergement</h2>
           <Table
-            rowKey={row => row.name}
+            rowKey={(row) => row.name}
             data={[
               {
                 name: "Microsoft Azure",
@@ -100,7 +102,7 @@ const Confidentiality: NextPage = () => {
                     title={urlName}
                     target="_blank"
                     rel="nofollow, noopener, noreferrer"
-                    href={URL.find(v => v.name === urlName)?.value}
+                    href={URL.find((v) => v.name === urlName)?.value}
                   >
                     {urlName}
                   </a>
@@ -120,7 +122,7 @@ const Confidentiality: NextPage = () => {
             appelés “cookies” permettant d’établir des mesures statistiques.
           </p>
           <Table
-            rowKey={row => row.name}
+            rowKey={(row) => row.name}
             data={[
               {
                 type: "Mesure d’audience anonymisée",