src/components/Terms/TermsView.tsx

@@ -86,14 +86,24 @@ const TermsView = () => {
                 onChange={handleGCUValidate}
                 checked={GCUValidation}
               />
-              <span
-                onClick={() => toggleCGUModal()}
-                dangerouslySetInnerHTML={{ __html: t('dataShare.validCGU') }}
-              />
-              <span
-                onClick={() => toggleLegalNoticeModal()}
-                dangerouslySetInnerHTML={{ __html: t('dataShare.validLegal') }}
-              />
+              <div>
+                <span
+                  onClick={e => {
+                    e.preventDefault()
+                    toggleCGUModal()
+                  }}
+                  dangerouslySetInnerHTML={{ __html: t('dataShare.validCGU') }}
+                />
+                <span
+                  onClick={e => {
+                    e.preventDefault()
+                    toggleLegalNoticeModal()
+                  }}
+                  dangerouslySetInnerHTML={{
+                    __html: t('dataShare.validLegal'),
+                  }}
+                />
+              </div>
             </label>
           </div>
           <div className="terms-footer">

src/components/Terms/__snapshots__/TermsView.spec.tsx.snap

@@ -137,22 +137,24 @@ exports[`TermsView component should be rendered correctly 1`] = `
             onChange={[Function]}
             type="checkbox"
           />
-          <span
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "dataShare.validCGU",
+          <div>
+            <span
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "dataShare.validCGU",
+                }
               }
-            }
-            onClick={[Function]}
-          />
-          <span
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "dataShare.validLegal",
+              onClick={[Function]}
+            />
+            <span
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "dataShare.validLegal",
+                }
               }
-            }
-            onClick={[Function]}
-          />
+              onClick={[Function]}
+            />
+          </div>
         </label>
       </div>
       <div

src/components/Terms/termsView.scss

 @import 'src/styles/base/color';
 @import 'src/styles/base/mixins';
 
+@include checkBox();
+
 .terms-wrapper {
   padding: 0rem 1.5rem 0 1.5rem;
   box-sizing: border-box;
@@ -21,12 +23,15 @@
 .terms-content {
   max-width: 45rem;
   margin: auto;
+  .action {
+    cursor: pointer;
+    color: $gold-shadow;
+  }
 }
 .dataShare-content-wrapper,
 .dataShare-content-root {
   width: inherit;
 }
-@include checkBox();
 
 .terms-footer {
   max-width: 45rem;
@@ -43,12 +48,3 @@
     }
   }
 }
-button.action {
-  appearance: none;
-  cursor: pointer;
-  display: contents;
-  background: transparent;
-  border: none;
-  padding: 0;
-  color: $gold-shadow;
-}

src/locales/fr.json

@@ -645,7 +645,7 @@
     "link1": "<a href=\"https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/\">https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/</a>",
     "validDataConsent": "Je consens au traitement de mes données tel que décrit ci-dessus.",
     "validCGU": "Je valide les <span class=\"action\">Conditions Générales d’Utilisation</span> ",
-    "validLegal": " du service et ai pris connaissance des <span class=\"action\"> Mentions Légales </span> de celui-ci.",
+    "validLegal": " du service et ai pris connaissance des <span class=\"action\">Mentions Légales</span> de celui-ci.",
     "button_accept": "C'est parti !",
     "accessibility": {
       "button_accept": "Accepter les conditions générales d'utilisation"

src/services/dateChart.service.spec.ts

@@ -1111,20 +1111,6 @@ describe('dateChart service', () => {
       )
       expect(result).toEqual(1)
     })
-    it('should return index -1 for year, 2024', () => {
-      const selectedDate: DateTime = DateTime.fromISO(
-        '2024-01-01T00:00:00.000Z',
-        {
-          zone: 'utc',
-        }
-      )
-      const result = dateChartService.defineDateIndex(
-        TimeStep.YEAR,
-        selectedDate
-      )
-      expect(result).toEqual(-1)
-    })
-
     it('should return index 0 for month, 05-2020', () => {
       const selectedDate: DateTime = DateTime.fromISO(
         '2020-05-01T00:00:00.000Z',

src/services/dateChart.service.ts

@@ -256,10 +256,10 @@ export default class DateChartService {
   }
 
   /**
-   * Return the date incremented in function of the timestep
+   * Return the chart index in function of the timestep and a given date
    * @param {TimeStep} timeStep - current time step
    * @param {DateTime} selectedDate - current selected date
-   * @returns {number} - incremented date
+   * @returns {number} - index
    */
   public defineDateIndex(timeStep: TimeStep, selectedDate: DateTime): number {
     const today = DateTime.local().setZone('utc', {
@@ -267,11 +267,7 @@ export default class DateChartService {
     })
     switch (timeStep) {
       case TimeStep.YEAR:
-        if (today.year >= selectedDate.year) {
-          return Math.trunc((today.year - selectedDate.year) / 5)
-        } else {
-          return Math.trunc((today.year - selectedDate.year) / 5) - 1
-        }
+        return Math.trunc((today.year - selectedDate.year) / 5)
       case TimeStep.MONTH:
         return today.year - selectedDate.year
       case TimeStep.DAY: