From 5f07d4a88beb80583bd8af37182d699ff49d63c1 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 10 Mar 2025 22:12:14 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20introduce=20dedi?=
 =?UTF-8?q?cated=20accessibility=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Created a proper accessibility page within the application to replace external
doc page redirects. Implemented based on Sophie's accessibility requirements
to improve user experience for all users regardless of ability.
---
 .../features/legalsTerms/Accessibility.tsx    | 80 +++++++++++++++++++
 src/frontend/src/layout/Footer.tsx            | 11 +--
 src/frontend/src/layout/Header.tsx            | 16 ++--
 .../src/locales/de/accessibility.json         | 40 ++++++++++
 .../src/locales/en/accessibility.json         | 40 ++++++++++
 .../src/locales/fr/accessibility.json         | 40 ++++++++++
 .../src/locales/nl/accessibility.json         | 40 ++++++++++
 src/frontend/src/routes.ts                    |  8 +-
 8 files changed, 261 insertions(+), 14 deletions(-)
 create mode 100644 src/frontend/src/features/legalsTerms/Accessibility.tsx
 create mode 100644 src/frontend/src/locales/de/accessibility.json
 create mode 100644 src/frontend/src/locales/en/accessibility.json
 create mode 100644 src/frontend/src/locales/fr/accessibility.json
 create mode 100644 src/frontend/src/locales/nl/accessibility.json

diff --git a/src/frontend/src/features/legalsTerms/Accessibility.tsx b/src/frontend/src/features/legalsTerms/Accessibility.tsx
new file mode 100644
index 00000000..9ec89337
--- /dev/null
+++ b/src/frontend/src/features/legalsTerms/Accessibility.tsx
@@ -0,0 +1,80 @@
+import { Screen } from '@/layout/Screen'
+import { Bold, H, P, A, Italic, Ul } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { HStack } from '@/styled-system/jsx'
+import { useTranslation } from 'react-i18next'
+
+export const AccessibilityRoute = () => {
+  const { t } = useTranslation('accessibility', { keyPrefix: 'accessibility' })
+
+  const indentedStyle = css({
+    paddingLeft: '1.5rem',
+    marginLeft: '1rem',
+    borderLeft: '1px solid black',
+    marginTop: '1.5rem',
+  })
+
+  return (
+    <Screen layout="centered" headerTitle={t('title')}>
+      <HStack display={'block'} padding={'2rem'}>
+        <P dangerouslySetInnerHTML={{ __html: t('introduction') }}></P>
+
+        <H lvl={2} bold>
+          {t('declaration.title')}
+        </H>
+        <Italic>{t('declaration.date')}</Italic>
+        <P>{t('scope')}</P>
+
+        <H lvl={2} bold>
+          {t('complianceStatus.title')}
+        </H>
+        <P>{t('complianceStatus.body')}</P>
+        <H lvl={2} bold>
+          {t('improvement.title')}
+        </H>
+        <P>{t('improvement.body')}</P>
+        <Ul
+          style={{
+            marginBottom: '1rem',
+          }}
+        >
+          <li>
+            {t('improvement.contact.email').replace(
+              'visio@numerique.gouv.fr',
+              ''
+            )}
+            <A href="mailto:visio@numerique.gouv.fr" color="primary">
+              visio@numerique.gouv.fr
+            </A>
+          </li>
+          <li>{t('improvement.contact.address')}</li>
+        </Ul>
+        <P>{t('improvement.response')}</P>
+
+        <H lvl={2} bold>
+          {t('recourse.title')}
+        </H>
+        <P>{t('recourse.introduction')}</P>
+
+        <P>{t('recourse.options.intro')}</P>
+
+        <Ul>
+          <li>{t('recourse.options.option1')}</li>
+          <li>{t('recourse.options.option2')}</li>
+          <li>
+            {t('recourse.options.option3')}
+            <P className={indentedStyle}>
+              <Bold>{t('dataProtection.line1')}</Bold>
+              <br />
+              {t('dataProtection.line2')}
+              <br />
+              {t('dataProtection.line3')}
+              <br />
+              {t('dataProtection.line4')}
+            </P>
+          </li>
+        </Ul>
+      </HStack>
+    </Screen>
+  )
+}
diff --git a/src/frontend/src/layout/Footer.tsx b/src/frontend/src/layout/Footer.tsx
index 5c2db023..8f35d77a 100644
--- a/src/frontend/src/layout/Footer.tsx
+++ b/src/frontend/src/layout/Footer.tsx
@@ -242,17 +242,14 @@ export const Footer = () => {
             </A>
           </StyledLi>
           <StyledLi divider>
-            <A
-              externalIcon
+            <Link
               underline={false}
               footer="minor"
-              href="https://docs.numerique.gouv.fr/docs/94bd1e3b-a44d-4cf5-b7ee-708a5386a111/"
-              aria-label={
-                t('links.accessibility') + ' - ' + t('links.ariaLabel')
-              }
+              to="/accessibilite"
+              aria-label={t('links.accessibility')}
             >
               {t('links.accessibility')}
-            </A>
+            </Link>
           </StyledLi>
           <StyledLi divider>
             <A
diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index 406f9b9f..f430d4ac 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -154,6 +154,7 @@ export const Header = () => {
   const { t } = useTranslation()
   const isHome = useMatchesRoute('home')
   const isLegalTerms = useMatchesRoute('legalTerms')
+  const isAccessibility = useMatchesRoute('accessibility')
   const isRoom = useMatchesRoute('room')
   const { user, isLoggedIn, logout } = useUser()
 
@@ -203,12 +204,15 @@ export const Header = () => {
           </header>
           <nav>
             <Stack gap={1} direction="row" align="center">
-              {isLoggedIn === false && !isHome && !isLegalTerms && (
-                <>
-                  <ProConnectButton hint={false} />
-                  <LoginHint />
-                </>
-              )}
+              {isLoggedIn === false &&
+                !isHome &&
+                !isLegalTerms &&
+                !isAccessibility && (
+                  <>
+                    <ProConnectButton hint={false} />
+                    <LoginHint />
+                  </>
+                )}
               {!!user && (
                 <Menu>
                   <Button
diff --git a/src/frontend/src/locales/de/accessibility.json b/src/frontend/src/locales/de/accessibility.json
new file mode 100644
index 00000000..a9a863ae
--- /dev/null
+++ b/src/frontend/src/locales/de/accessibility.json
@@ -0,0 +1,40 @@
+{
+  "accessibility": {
+    "title": "",
+    "introduction": "",
+    "declaration": {
+      "title": "",
+      "date": ""
+    },
+    "scope": "",
+    "complianceStatus": {
+      "title": "",
+      "body": ""
+    },
+    "improvement": {
+      "title": "",
+      "body": "",
+      "contact": {
+        "email": "",
+        "address": ""
+      },
+      "response": ""
+    },
+    "recourse": {
+      "title": "",
+      "introduction": "",
+      "options": {
+        "intro": "",
+        "option1": "",
+        "option2": "",
+        "option3": ""
+      }
+    },
+    "dataProtection": {
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
+    }
+  }
+}
diff --git a/src/frontend/src/locales/en/accessibility.json b/src/frontend/src/locales/en/accessibility.json
new file mode 100644
index 00000000..75dd0d7f
--- /dev/null
+++ b/src/frontend/src/locales/en/accessibility.json
@@ -0,0 +1,40 @@
+{
+  "accessibility": {
+    "title": "Accessibility",
+    "introduction": "Visio is committed to making its digital services accessible, in accordance with Article 47 of Law No. 2005-102 of February 11, 2005.",
+    "declaration": {
+      "title": "Accessibility Declaration",
+      "date": "Established on March 5, 2025."
+    },
+    "scope": "This accessibility declaration applies to the site visio.numerique.gouv.fr",
+    "complianceStatus": {
+      "title": "Compliance Status",
+      "body": "visio.numerique.gouv.fr is not compliant with RGAA 4.1. The site has not yet been audited. However, the team is striving to create a site accessible to all by following RGAA recommendations."
+    },
+    "improvement": {
+      "title": "Improvement and Contact",
+      "body": "If you are unable to access content or a service, you can contact the administrator of lasuite.numerique.gouv.fr to be directed to an accessible alternative or obtain the content in another format.",
+      "contact": {
+        "email": "Email: visio@numerique.gouv.fr",
+        "address": "Address: DINUM, 20 avenue de Ségur 75007 Paris"
+      },
+      "response": "We try to respond within 2 business days."
+    },
+    "recourse": {
+      "title": "Recourse",
+      "introduction": "This procedure should be used in the following case: you have reported an accessibility issue to the website administrator that prevents you from accessing content or services on the portal, and you have not received a satisfactory response.",
+      "options": {
+        "intro": "You can:",
+        "option1": "Send a message to the Defender of Rights",
+        "option2": "Contact the delegate of the Defender of Rights in your region",
+        "option3": "Send a letter by mail (free, do not put a stamp):"
+      }
+    },
+    "dataProtection": {
+      "line1": "Service du Premier ministre",
+      "line2": "A l'attention du délégué à la protection des données (DPD)",
+      "line3": "56 rue de Varenne",
+      "line4": "75007 Paris"
+    }
+  }
+}
diff --git a/src/frontend/src/locales/fr/accessibility.json b/src/frontend/src/locales/fr/accessibility.json
new file mode 100644
index 00000000..7608080b
--- /dev/null
+++ b/src/frontend/src/locales/fr/accessibility.json
@@ -0,0 +1,40 @@
+{
+  "accessibility": {
+    "title": "Accessibilité",
+    "introduction": "Visio s'engage à rendre ses services numériques accessibles, conformément à l'article 47 de la loi n°2005-102 du 11 février 2005.",
+    "declaration": {
+      "title": "Déclaration d'accessibilité",
+      "date": "Établie le 05 mars 2025."
+    },
+    "scope": "Cette déclaration d'accessibilité s'applique au site visio.numerique.gouv.fr",
+    "complianceStatus": {
+      "title": "État de conformité",
+      "body": "visio.numerique.gouv.fr est non conforme avec le RGAA 4.1. Le site n'a pas encore été audité. Cependant, l'équipe s'efforce de créer un site accessible à tous en suivant les recommandations du RGAA."
+    },
+    "improvement": {
+      "title": "Amélioration et contact",
+      "body": "Si vous n'arrivez pas à accéder à un contenu ou à un service, vous pouvez contacter le responsable de lasuite.numerique.gouv.fr pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme.",
+      "contact": {
+        "email": "E-mail : visio@numerique.gouv.fr",
+        "address": "Adresse : DINUM, 20 avenue de Ségur 75007 Paris"
+      },
+      "response": "Nous essayons de répondre dans les 2 jours ouvrés."
+    },
+    "recourse": {
+      "title": "Voie de recours",
+      "introduction": "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.",
+      "options": {
+        "intro": "Vous pouvez :",
+        "option1": "Écrire un message au Défenseur des droits",
+        "option2": "Contacter le délégué du Défenseur des droits dans votre région",
+        "option3": "Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre) :"
+      }
+    },
+    "dataProtection": {
+      "line1": "Service du Premier ministre",
+      "line2": "A l'attention du délégué à la protection des données (DPD)",
+      "line3": "56 rue de Varenne",
+      "line4": "75007 Paris"
+    }
+  }
+}
diff --git a/src/frontend/src/locales/nl/accessibility.json b/src/frontend/src/locales/nl/accessibility.json
new file mode 100644
index 00000000..75dd0d7f
--- /dev/null
+++ b/src/frontend/src/locales/nl/accessibility.json
@@ -0,0 +1,40 @@
+{
+  "accessibility": {
+    "title": "Accessibility",
+    "introduction": "Visio is committed to making its digital services accessible, in accordance with Article 47 of Law No. 2005-102 of February 11, 2005.",
+    "declaration": {
+      "title": "Accessibility Declaration",
+      "date": "Established on March 5, 2025."
+    },
+    "scope": "This accessibility declaration applies to the site visio.numerique.gouv.fr",
+    "complianceStatus": {
+      "title": "Compliance Status",
+      "body": "visio.numerique.gouv.fr is not compliant with RGAA 4.1. The site has not yet been audited. However, the team is striving to create a site accessible to all by following RGAA recommendations."
+    },
+    "improvement": {
+      "title": "Improvement and Contact",
+      "body": "If you are unable to access content or a service, you can contact the administrator of lasuite.numerique.gouv.fr to be directed to an accessible alternative or obtain the content in another format.",
+      "contact": {
+        "email": "Email: visio@numerique.gouv.fr",
+        "address": "Address: DINUM, 20 avenue de Ségur 75007 Paris"
+      },
+      "response": "We try to respond within 2 business days."
+    },
+    "recourse": {
+      "title": "Recourse",
+      "introduction": "This procedure should be used in the following case: you have reported an accessibility issue to the website administrator that prevents you from accessing content or services on the portal, and you have not received a satisfactory response.",
+      "options": {
+        "intro": "You can:",
+        "option1": "Send a message to the Defender of Rights",
+        "option2": "Contact the delegate of the Defender of Rights in your region",
+        "option3": "Send a letter by mail (free, do not put a stamp):"
+      }
+    },
+    "dataProtection": {
+      "line1": "Service du Premier ministre",
+      "line2": "A l'attention du délégué à la protection des données (DPD)",
+      "line3": "56 rue de Varenne",
+      "line4": "75007 Paris"
+    }
+  }
+}
diff --git a/src/frontend/src/routes.ts b/src/frontend/src/routes.ts
index b6bab6cc..38dfdc49 100644
--- a/src/frontend/src/routes.ts
+++ b/src/frontend/src/routes.ts
@@ -1,9 +1,10 @@
 import { FeedbackRoute, RoomRoute, roomIdPattern } from '@/features/rooms'
 import { HomeRoute } from '@/features/home'
 import { LegalTermsRoute } from '@/features/legalsTerms/LegalTermsRoute'
+import { AccessibilityRoute } from '@/features/legalsTerms/Accessibility'
 
 export const routes: Record<
-  'home' | 'room' | 'feedback' | 'legalTerms',
+  'home' | 'room' | 'feedback' | 'legalTerms' | 'accessibility',
   {
     name: RouteName
     path: RegExp | string
@@ -33,6 +34,11 @@ export const routes: Record<
     path: '/mentions-legales',
     Component: LegalTermsRoute,
   },
+  accessibility: {
+    name: 'accessibility',
+    path: '/accessibilite',
+    Component: AccessibilityRoute,
+  },
 }
 
 export type RouteName = keyof typeof routes