Merge pull request #225 from DISIC/feat/accessibility

feat: declaration a11é
DISIC · Nov 14, 2024 · 35ba70b · 35ba70b
2 parents 9603592 + aec3479
commit 35ba70b
Show file tree

Hide file tree

Showing 6 changed files with 347 additions and 4 deletions.
diff --git a/webapp-backoffice/src/layouts/PublicLayout.tsx b/webapp-backoffice/src/layouts/PublicLayout.tsx
@@ -359,7 +359,10 @@ export default function PublicLayout({ children, light }: PublicLayoutProps) {
 			</main>
 			<div id="footer" tabIndex={-1}>
 				<Footer
-					accessibility="non compliant"
+					accessibility="partially compliant"
+					accessibilityLinkProps={{
+						href: '/public/accessibility'
+					}}
 					bottomItems={[
 						{
 							text: 'Données personnelles',

diff --git a/webapp-backoffice/src/pages/public/accessibility.tsx b/webapp-backoffice/src/pages/public/accessibility.tsx
@@ -0,0 +1,110 @@
+import { fr } from '@codegouvfr/react-dsfr';
+import Head from 'next/head';
+import React from 'react';
+import { tss } from 'tss-react/dsfr';
+import { Accessibility as A11E } from '../../utils/content';
+
+const LegalNotice = () => {
+	const { cx, classes } = useStyles();
+
+	return (
+		<>
+			<Head>
+				<title>Accessibilité | Je donne mon avis</title>
+				<meta
+					name="description"
+					content={`Accessibilité | Je donne mon avis`}
+				/>
+			</Head>
+			<div
+				className={fr.cx(
+					'fr-container',
+					'fr-col-lg-10',
+					'fr-col-xl-8',
+					'fr-py-20v'
+				)}
+			>
+				<div
+					className={fr.cx(
+						'fr-grid-row',
+						'fr-grid-row--gutters',
+						'fr-grid-row--middle'
+					)}
+				>
+					<div className={'fr-col-lg-12'}>
+						<h1 className={fr.cx('fr-mb-12v')}>Déclaration d'accessibilité</h1>
+						{Object.keys(A11E).map(key => (
+							<div key={key} className={cx(classes.blockWrapper)}>
+								{A11E[key].title !== 'En savoir plus' &&
+									A11E[key].title !== '' && (
+										<h2 className={fr.cx('fr-mt-8v')}>{A11E[key].title}</h2>
+									)}
+								<div>
+									{A11E[key].content.map((line, index) => {
+										const isLink =
+											typeof line === 'object' && line.type === 'link';
+										const isMailto =
+											typeof line === 'object' && line.type === 'mailto';
+										const isList =
+											typeof line === 'object' && line.type === 'list';
+										const isBold =
+											typeof line === 'object' && line.type === 'bold';
+										return (
+											<React.Fragment key={index}>
+												{isLink ? (
+													<span>
+														<a
+															href={line.href}
+															target="_blank"
+															rel="noopener noreferrer"
+														>
+															{line.text}
+														</a>
+													</span>
+												) : isMailto ? (
+													<a href={line.href}>{line.text}</a>
+												) : isList ? (
+													<ul>
+														<li>{line.text}</li>
+													</ul>
+												) : typeof line === 'string' ? (
+													<span>{line}</span>
+												) : isBold ? (
+													<span className={fr.cx('fr-text--bold')}>
+														{line.text}
+													</span>
+												) : (
+													<span className={fr.cx()}>{line.text}</span>
+												)}
+											</React.Fragment>
+										);
+									})}
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+		</>
+	);
+};
+
+const useStyles = tss.withName(LegalNotice.name).create(() => ({
+	blockWrapper: {
+		display: 'inline-block',
+		flexDirection: 'column',
+		marginBottom: '2rem',
+
+		a: {
+			width: 'fit-content'
+		}
+	},
+	noSpacesParagraph: {
+		marginBottom: '0 !important'
+	},
+	inLine: {
+		display: 'inline-flex'
+	}
+}));
+
+export default LegalNotice;
diff --git a/webapp-backoffice/src/utils/content.ts b/webapp-backoffice/src/utils/content.ts
@@ -7,8 +7,9 @@ interface MainStructure {
 			| string
 			| {
 					text: string;
-					type?: 'noSpaces' | 'link' | 'mailto' | 'list' | 'subtitle';
+					type?: 'noSpaces' | 'link' | 'mailto' | 'list' | 'subtitle' | 'bold';
 					href?: string;
+					inLine?: boolean;
 			  }
 		)[];
 	};
@@ -192,6 +193,64 @@ export const CGU: MainStructure = {
 	}
 };
 
+export const Accessibility: MainStructure = {
+	intro: {
+		title: '',
+		content: [
+			'La direction interministérielle du numérique (DINUM) s’engage à rendre ses sites internet, intranet, extranet et ses progiciels accessibles (et ses applications mobiles et mobilier urbain numérique) conformément à l’article 47 de la loi n°2005-102 du 11 février 2005.'
+		]
+	},
+	intro_p2: {
+		title: '',
+		content: [
+			{text: `Cette déclaration d'accessibilité s'applique à${' '}`, type: 'noSpaces'},
+			{text: " jedonnemonavis.numerique.gouv.fr", type: 'link', href: 'https://jedonnemonavis.numerique.gouv.fr/'},
+		]
+	},
+	state: {
+		title: 'État de conformité',
+		content: [
+			{text: `Le site est `, type:'noSpaces'},
+			{text: `non conforme `, type:'bold'},
+			{text: `avec le référentiel général d’amélioration de l’accessibilité, RGAA version 4.1, en raison de l’absence d’audit de conformité.`, type:'noSpaces'},
+		]
+	},
+	state_p2: {
+		title: '',
+		content: [
+			{text: `Un audit de conformité est en cours. L’état de conformité sera mis à jour lorsque l’audit sera terminé.`, type:'noSpaces'}
+		]
+	},
+	info_contact: {
+		title: 'Retour d’information et contact',
+		content: [
+			{text: `Si vous n’arrivez pas à accéder à un contenu ou à un service, vous pouvez nous contacter par courriel à l’adresse `, type:'noSpaces'},
+			{text: `[email protected] `, type:'bold'},
+			{text: `pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme.`, type:'noSpaces'},
+		]
+	},
+	rights: {
+		title: 'Défenseur des droits',
+		content: [
+			{text: `Si vous constatez un défaut d'accessibilité vous empêchant d'accéder à un contenu ou une fonctionnalité du site, que vous nous le signalez et que vous ne parvenez pas à obtenir une réponse de notre part, vous êtes en droit de faire parvenir vos doléances ou une demande de saisine au Défenseur des droits.`, type:'noSpaces'}
+		]
+	},
+	rights_p2: {
+		title: '',
+		content: [
+			{text: `Plusieurs moyens sont à votre disposition :`, type:'noSpaces'}
+		]
+	},
+	rights_p3: {
+		title: '',
+		content: [
+			{text: `Écrire un message au Défenseur des droits (https://www.defenseurdesdroits.fr/nous-contacter-355)`, type:'list'},
+			{text: `Contacter le délégué du Défenseur des droits près de chez vous (https://www.defenseurdesdroits.fr/carte-des-delegues)`, type:'list'},
+			{text: `Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre) Défenseur des droits Libre réponse 71120 75342 Paris CEDEX 07`, type:'list'},
+		]
+	}
+};
+
 export const LegalNotice: MainStructure = {
 	editeur: {
 		title: 'Éditeur de la plateforme',

diff --git a/webapp-form/src/layouts/PublicLayout.tsx b/webapp-form/src/layouts/PublicLayout.tsx
@@ -103,7 +103,10 @@ export default function PublicLayout({ children }: { children: ReactNode }) {
       </main>
       <Footer
         id="footer"
-        accessibility="non compliant"
+        accessibility="partially compliant"
+        accessibilityLinkProps={{
+          href: "/accessibility",
+        }}
         bottomItems={[
           { text: "Données personnelles", linkProps: { href: "/cgu" } },
           {

diff --git a/webapp-form/src/pages/accessibility.tsx b/webapp-form/src/pages/accessibility.tsx
@@ -0,0 +1,110 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import Head from "next/head";
+import React from "react";
+import { tss } from "tss-react/dsfr";
+import { Accessibility as A11E } from "../utils/content";
+
+const LegalNotice = () => {
+  const { cx, classes } = useStyles();
+
+  return (
+    <>
+      <Head>
+        <title>Accessibilité | Je donne mon avis</title>
+        <meta
+          name="description"
+          content={`Accessibilité | Je donne mon avis`}
+        />
+      </Head>
+      <div
+        className={fr.cx(
+          "fr-container",
+          "fr-col-lg-10",
+          "fr-col-xl-8",
+          "fr-py-20v"
+        )}
+      >
+        <div
+          className={fr.cx(
+            "fr-grid-row",
+            "fr-grid-row--gutters",
+            "fr-grid-row--middle"
+          )}
+        >
+          <div className={"fr-col-lg-12"}>
+            <h1 className={fr.cx("fr-mb-12v")}>Déclaration d'accessibilité</h1>
+            {Object.keys(A11E).map((key) => (
+              <div key={key} className={cx(classes.blockWrapper)}>
+                {A11E[key].title !== "En savoir plus" &&
+                  A11E[key].title !== "" && (
+                    <h2 className={fr.cx("fr-mt-8v")}>{A11E[key].title}</h2>
+                  )}
+                <div>
+                  {A11E[key].content.map((line, index) => {
+                    const isLink =
+                      typeof line === "object" && line.type === "link";
+                    const isMailto =
+                      typeof line === "object" && line.type === "mailto";
+                    const isList =
+                      typeof line === "object" && line.type === "list";
+                    const isBold =
+                      typeof line === "object" && line.type === "bold";
+                    return (
+                      <React.Fragment key={index}>
+                        {isLink ? (
+                          <span>
+                            <a
+                              href={line.href}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              {line.text}
+                            </a>
+                          </span>
+                        ) : isMailto ? (
+                          <a href={line.href}>{line.text}</a>
+                        ) : isList ? (
+                          <ul>
+                            <li>{line.text}</li>
+                          </ul>
+                        ) : typeof line === "string" ? (
+                          <span>{line}</span>
+                        ) : isBold ? (
+                          <span className={fr.cx("fr-text--bold")}>
+                            {line.text}
+                          </span>
+                        ) : (
+                          <span className={fr.cx()}>{line.text}</span>
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const useStyles = tss.withName(LegalNotice.name).create(() => ({
+  blockWrapper: {
+    display: "inline-block",
+    flexDirection: "column",
+    marginBottom: "2rem",
+
+    a: {
+      width: "fit-content",
+    },
+  },
+  noSpacesParagraph: {
+    marginBottom: "0 !important",
+  },
+  inLine: {
+    display: "inline-flex",
+  },
+}));
+
+export default LegalNotice;
diff --git a/webapp-form/src/utils/content.ts b/webapp-form/src/utils/content.ts
@@ -5,7 +5,7 @@ interface MainStructure {
       | string
       | {
           text: string;
-          type?: "noSpaces" | "link" | "mailto" | "list" | "subtitle";
+          type?: "noSpaces" | "link" | "mailto" | "list" | "subtitle" | "bold";
           href?: string;
         }
     )[];
@@ -74,6 +74,64 @@ export const CGU: MainStructure = {
   },
 };
 
+export const Accessibility: MainStructure = {
+	intro: {
+		title: '',
+		content: [
+			'La direction interministérielle du numérique (DINUM) s’engage à rendre ses sites internet, intranet, extranet et ses progiciels accessibles (et ses applications mobiles et mobilier urbain numérique) conformément à l’article 47 de la loi n°2005-102 du 11 février 2005.'
+		]
+	},
+	intro_p2: {
+		title: '',
+		content: [
+			{text: `Cette déclaration d'accessibilité s'applique à${' '}`, type: 'noSpaces'},
+			{text: " jedonnemonavis.numerique.gouv.fr", type: 'link', href: 'https://jedonnemonavis.numerique.gouv.fr/'},
+		]
+	},
+	state: {
+		title: 'État de conformité',
+		content: [
+			{text: `Le site est `, type:'noSpaces'},
+			{text: `non conforme `, type:'bold'},
+			{text: `avec le référentiel général d’amélioration de l’accessibilité, RGAA version 4.1, en raison de l’absence d’audit de conformité.`, type:'noSpaces'},
+		]
+	},
+	state_p2: {
+		title: '',
+		content: [
+			{text: `Un audit de conformité est en cours. L’état de conformité sera mis à jour lorsque l’audit sera terminé.`, type:'noSpaces'}
+		]
+	},
+	info_contact: {
+		title: 'Retour d’information et contact',
+		content: [
+			{text: `Si vous n’arrivez pas à accéder à un contenu ou à un service, vous pouvez nous contacter par courriel à l’adresse `, type:'noSpaces'},
+			{text: `[email protected] `, type:'bold'},
+			{text: `pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme.`, type:'noSpaces'},
+		]
+	},
+	rights: {
+		title: 'Défenseur des droits',
+		content: [
+			{text: `Si vous constatez un défaut d'accessibilité vous empêchant d'accéder à un contenu ou une fonctionnalité du site, que vous nous le signalez et que vous ne parvenez pas à obtenir une réponse de notre part, vous êtes en droit de faire parvenir vos doléances ou une demande de saisine au Défenseur des droits.`, type:'noSpaces'}
+		]
+	},
+	rights_p2: {
+		title: '',
+		content: [
+			{text: `Plusieurs moyens sont à votre disposition :`, type:'noSpaces'}
+		]
+	},
+	rights_p3: {
+		title: '',
+		content: [
+			{text: `Écrire un message au Défenseur des droits (https://www.defenseurdesdroits.fr/nous-contacter-355)`, type:'list'},
+			{text: `Contacter le délégué du Défenseur des droits près de chez vous (https://www.defenseurdesdroits.fr/carte-des-delegues)`, type:'list'},
+			{text: `Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre) Défenseur des droits Libre réponse 71120 75342 Paris CEDEX 07`, type:'list'},
+		]
+	}
+};
+
 export const LegalNotice: MainStructure = {
   editeur: {
     title: "Éditeur de la plateforme",