Merge pull request #19 from betagouv/staging

Staging
betagouv · Nov 26, 2024 · 4715a70 · 4715a70
2 parents 95114a5 + 6d87622
commit 4715a70
Show file tree

Hide file tree

Showing 98 changed files with 1,783 additions and 55,335 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -39,6 +39,7 @@
     "react-datepicker": "^7.3.0",
     "react-day-picker": "^9.0.9",
     "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.2",
     "react-toastify": "^10.0.5",

diff --git a/app/src/App.jsx b/app/src/App.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { HelmetProvider } from "react-helmet-async";
 import { BrowserRouter, Navigate, Outlet, Route, Routes, useNavigate } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 
@@ -58,45 +59,47 @@ const App = () => {
         position="top-right"
         autoClose={5000}
       />
-      <BrowserRouter>
-        <Routes>
-          <Route element={<AuthLayout />}>
-            <Route path="/login" element={<Login />} />
-            <Route path="/signup" element={<Signup />} />
-            <Route path="/forgot-password" element={<ForgotPassword />} />
-            <Route path="/reset-password" element={<ResetPassword />} />
-            <Route path="/connect" element={<LoginAs />} />
-          </Route>
-
-          <Route element={<StatsLayout />}>
-            <Route path="/public-stats" element={<PublicStats />} />
-          </Route>
-          <Route element={<ProtectedLayout />}>
-            <Route path="/performance/*" element={<Performance />} />
-            <Route path="/broadcast/*" element={<Broadcast />} />
-            <Route path="/my-missions/*" element={<MyMissions />} />
-            <Route path="/settings/*" element={<Settings />} />
-            <Route path="/cgu" element={<CGU />} />
-            <Route path="/mission/*" element={<Mission />} />
-            <Route path="/warning/*" element={<Warnings />} />
-            <Route path="/my-account" element={<Account />} />
-
-            <Route element={<AdminLayout />}>
-              <Route path="/broadcast/campaign/*" element={<Campaign />} />
-              <Route path="/broadcast/widget/*" element={<Widget />} />
-              <Route path="/publisher/*" element={<Publisher />} />
-              <Route path="/user/*" element={<User />} />
-              <Route path="/admin-mission/*" element={<AdminMissions />} />
-              <Route path="/admin-rna/*" element={<AdminRna />} />
-              <Route path="/admin-account/*" element={<AdminAccounts />} />
-              <Route path="/admin-stats/*" element={<AdminStats />} />
-              <Route path="/admin-warning/*" element={<AdminWarnings />} />
-              <Route path="/admin-report/*" element={<AdminReport />} />
+      <HelmetProvider>
+        <BrowserRouter>
+          <Routes>
+            <Route element={<AuthLayout />}>
+              <Route path="/login" element={<Login />} />
+              <Route path="/signup" element={<Signup />} />
+              <Route path="/forgot-password" element={<ForgotPassword />} />
+              <Route path="/reset-password" element={<ResetPassword />} />
+              <Route path="/connect" element={<LoginAs />} />
             </Route>
-          </Route>
-          <Route path="*" element={<Navigate to="/performance" />} />
-        </Routes>
-      </BrowserRouter>
+
+            <Route element={<StatsLayout />}>
+              <Route path="/public-stats" element={<PublicStats />} />
+            </Route>
+            <Route element={<ProtectedLayout />}>
+              <Route path="/performance/*" element={<Performance />} />
+              <Route path="/broadcast/*" element={<Broadcast />} />
+              <Route path="/my-missions/*" element={<MyMissions />} />
+              <Route path="/settings/*" element={<Settings />} />
+              <Route path="/cgu" element={<CGU />} />
+              <Route path="/mission/*" element={<Mission />} />
+              <Route path="/warning/*" element={<Warnings />} />
+              <Route path="/my-account" element={<Account />} />
+
+              <Route element={<AdminLayout />}>
+                <Route path="/broadcast/campaign/*" element={<Campaign />} />
+                <Route path="/broadcast/widget/*" element={<Widget />} />
+                <Route path="/publisher/*" element={<Publisher />} />
+                <Route path="/user/*" element={<User />} />
+                <Route path="/admin-mission/*" element={<AdminMissions />} />
+                <Route path="/admin-rna/*" element={<AdminRna />} />
+                <Route path="/admin-account/*" element={<AdminAccounts />} />
+                <Route path="/admin-stats/*" element={<AdminStats />} />
+                <Route path="/admin-warning/*" element={<AdminWarnings />} />
+                <Route path="/admin-report/*" element={<AdminReport />} />
+              </Route>
+            </Route>
+            <Route path="*" element={<Navigate to="/performance" />} />
+          </Routes>
+        </BrowserRouter>
+      </HelmetProvider>
     </>
   );
 };

diff --git a/app/src/components/Autocomplete.jsx b/app/src/components/Autocomplete.jsx
@@ -3,7 +3,8 @@ import { RiArrowDownSLine, RiCloseLine } from "react-icons/ri";
 
 import Loader from "./Loader";
 
-const Autocomplete = ({ options, value, onChange, onSelect, onClear, loading = false, placeholder, className }) => {
+
+const Autocomplete = ({ options, value, onChange, onSelect, onClear, loading = false, placeholder, className, id }) => {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef(null);
 
@@ -20,7 +21,12 @@ const Autocomplete = ({ options, value, onChange, onSelect, onClear, loading = f
   return (
     <div className="relative w-full" ref={ref}>
       <div className="relative w-full">
+        <label htmlFor="autocomplete" className="sr-only">
+          {placeholder}
+        </label>
         <input
+          id="autocomplete"
+          name="autocomplete"
           className="input w-full"
           onChange={(e) => {
             setIsOpen(true);

diff --git a/app/src/components/MultiSearchSelect.jsx b/app/src/components/MultiSearchSelect.jsx
@@ -32,7 +32,12 @@ const MultiSearchSelect = ({ options, value, onChange, placeholder, className, l
   return (
     <div className="relative w-full " ref={ref}>
       <div className="relative w-full">
+        <label htmlFor="multi-search-select" className="sr-only">
+          {placeholder}
+        </label>
         <input
+          id="multi-search-select"
+          name="multi-search-select"
           className={`input w-full ${selected.length ? "pr-16 placeholder:text-black" : "pr-8"}`}
           onChange={(e) => setSearch(e.target.value)}
           placeholder={selected.length > 0 ? `${selected.length} sélections` : placeholder}

diff --git a/app/src/components/Nav.jsx b/app/src/components/Nav.jsx
@@ -166,28 +166,30 @@ const PublisherMenu = ({ options, value, onChange }) => {
   return (
     <div className="relative h-full" ref={ref}>
       <button
-        className="flex h-full cursor-pointer items-center justify-between gap-4 px-4 text-sm data-[focus]:bg-gray-hover hover:bg-gray-hover"
+        className="flex h-full cursor-pointer items-center justify-between gap-4 px-4 text-sm hover:bg-gray-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-[#015fcc]"
         onClick={() => setIsOpen(!isOpen)}
       >
         <span className="font-semibold">{value.name}</span>
         <RiArrowDownSLine className={`text-lg ${isOpen ? "transform rotate-180" : ""}`} />
       </button>
 
-      <div className={`absolute z-10 origin-top-right mt-1 transition duration-200 ease-in-out ${isOpen ? "" : "scale-95 opacity-0"}`}>
+      <div className={`absolute z-10 origin-top-right mt-1 transition duration-200 ease-in-out ${isOpen ? "" : "scale-95 opacity-0 pointer-events-none"}`}>
         {isOpen && (
           <div className={`w-72 bg-white border border-gray-border shadow-lg focus:outline-none`}>
-            <div className="flex items-center gap-4 p-3 border-b border-gray-border">
+            <div className="flex items-center gap-4 p-3 border-b border-gray-border focus-visible:ring-2 focus-visible:ring-[#015fcc]">
               <RiSearchLine />
-              <input className="w-full focus-visible:outline-none" onChange={(e) => setSearch(e.target.value)} />
+              <label htmlFor="publisher-search" className="sr-only">
+                Rechercher un partenaire
+              </label>
+              <input id="publisher-search" name="publisher-search" className="w-full focus:outline-none rounded" onChange={(e) => setSearch(e.target.value)} />
             </div>
-            <div className="max-h-80 divide-y divide-gray-border overflow-y-scroll" tabIndex={0} onBlur={() => setIsOpen(false)}>
+            <div className="max-h-80 overflow-y-scroll">
               {options
                 .filter((option) => option.name.toLowerCase().includes(search.toLowerCase()))
                 .map((option, index) => (
                   <button
                     key={index}
-                    tabIndex={-1}
-                    className="w-full p-4 text-sm text-left hover:bg-gray-hover flex items-center justify-between"
+                    className="w-full border-b border-gray-border p-4 text-sm text-left hover:bg-gray-hover focus:outline-none focus-visible:bg-gray-hover focus-visible:ring-1 focus-visible:ring-[#015fcc] flex items-center justify-between"
                     onClick={() => {
                       setSearch("");
                       setIsOpen(false);

diff --git a/app/src/components/SearchSelect.jsx b/app/src/components/SearchSelect.jsx
@@ -1,7 +1,7 @@
 import { Fragment, useEffect, useRef, useState } from "react";
 import { RiArrowDownSLine, RiCloseFill } from "react-icons/ri";
 
-const SearchSelect = ({ options, value, onChange, placeholder, className, loading = false }) => {
+const SearchSelect = ({ id, options, value, onChange, placeholder, className, loading = false }) => {
   const ref = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -33,6 +33,7 @@ const SearchSelect = ({ options, value, onChange, placeholder, className, loadin
     <div className="relative w-full " ref={ref}>
       <div className="relative w-full">
         <input
+          id={id}
           className={`input w-full ${selected ? "pr-16 placeholder:text-black" : ""}`}
           onChange={(e) => setSearch(e.target.value)}
           placeholder={selected ? selected.label : placeholder}

diff --git a/app/src/scenes/account/index.jsx b/app/src/scenes/account/index.jsx
@@ -76,7 +76,13 @@ const Account = () => {
             <label className="mb-2 text-sm" htmlFor="firstname">
               Prénom
             </label>
-            <input className={`input mb-2 ${errors.firstname ? "border-b-red-main" : "border-b-black"}`} name="firstname" value={values.firstname} onChange={handleChange} />
+            <input
+              id="firstname"
+              className={`input mb-2 ${errors.firstname ? "border-b-red-main" : "border-b-black"}`}
+              name="firstname"
+              value={values.firstname}
+              onChange={handleChange}
+            />
             {errors.firstname && (
               <div className="flex items-center text-sm text-red-main">
                 <RiErrorWarningFill className="mr-2" />
@@ -89,13 +95,19 @@ const Account = () => {
             <label className="mb-2 text-sm" htmlFor="lastname">
               Nom de famille
             </label>
-            <input className={`input mb-2 ${errors.lastname ? "border-b-red-main" : "border-b-black"}`} name="lastname" value={values.lastname} onChange={handleChange} />
+            <input
+              id="lastname"
+              className={`input mb-2 ${errors.lastname ? "border-b-red-main" : "border-b-black"}`}
+              name="lastname"
+              value={values.lastname}
+              onChange={handleChange}
+            />
           </div>
           <div className="col-span-2 flex flex-col">
             <label className="mb-2 text-sm" htmlFor="email">
               E-mail
             </label>
-            <input className="input mb-2 border-b-black" name="email" disabled value={values.email} />
+            <input id="email" className="input mb-2 border-b-black" name="email" disabled value={values.email} />
           </div>
 
           <div className="col-span-2 flex justify-end gap-4">
@@ -184,12 +196,13 @@ const ResetPasswordModal = ({ open, setOpen }) => {
         <h2 className="mb-12">Changement du mot de passe</h2>
         <form onSubmit={handleSubmit} className="flex flex-col">
           <div className="flex flex-col">
-            <label className="mb-2 text-sm" htmlFor="oldPassword">
+            <label className="mb-2 text-sm" htmlFor="old-password">
               Ancien mot de passe
             </label>
             <input
+              id="old-password"
               className={`input mb-2 ${errors.oldPassword ? "border-b-red-main" : "border-b-black"}`}
-              name="oldPassword"
+              name="old-password"
               type="password"
               value={values.oldPassword}
               onChange={handleChange}
@@ -203,7 +216,7 @@ const ResetPasswordModal = ({ open, setOpen }) => {
           </div>
           <div className="flex flex-col mt-4">
             <div className="flex justify-between">
-              <label className="mb-2 text-sm" htmlFor="newPassword">
+              <label className="mb-2 text-sm" htmlFor="new-password">
                 Nouveau mot de passe
               </label>
               <div className="flex items-center gap-1 cursor-pointer" onClick={() => setShowNewPassword(!showNewPassword)}>
@@ -212,8 +225,9 @@ const ResetPasswordModal = ({ open, setOpen }) => {
               </div>
             </div>
             <input
+              id="new-password"
               className={`input mb-2 ${errors.newPassword ? "border-b-red-main" : "border-b-black"}`}
-              name="newPassword"
+              name="new-password"
               type={showNewPassword ? "text" : "password"}
               value={values.newPassword}
               onChange={handleChange}
@@ -228,7 +242,7 @@ const ResetPasswordModal = ({ open, setOpen }) => {
           </div>
           <div className="flex flex-col mt-4">
             <div className="flex justify-between">
-              <label className="mb-2 text-sm" htmlFor="confirmPassword">
+              <label className="mb-2 text-sm" htmlFor="confirm-password">
                 Confirmez le nouveau mot de passe
               </label>
               <div className="flex items-center gap-1 cursor-pointer" onClick={() => setShowConfirmPassword(!showConfirmPassword)}>
@@ -237,8 +251,9 @@ const ResetPasswordModal = ({ open, setOpen }) => {
               </div>
             </div>
             <input
+              id="confirm-password"
               className={`input mb-2 ${errors.confirmPassword ? "border-b-red-main" : "border-b-black"}`}
-              name="confirmPassword"
+              name="confirm-password"
               type={showConfirmPassword ? "text" : "password"}
               value={values.confirmPassword}
               onChange={handleChange}