From a71458a5e80e391f1e88576ababcbd08cf17a375 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 1 Oct 2024 07:59:20 +0200
Subject: [PATCH] fix(docs): change tarteaucitron design and rendering for a
 better accessibility (#2695)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hannah Issermann <hannah.issermann@orange.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/assets/js/tac.js                |  6 +++---
 site/assets/scss/_tarteaucitron.scss | 29 +++++++++-------------------
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/site/assets/js/tac.js b/site/assets/js/tac.js
index e57e1d1680..3119956863 100644
--- a/site/assets/js/tac.js
+++ b/site/assets/js/tac.js
@@ -11,12 +11,12 @@
     const tac = document.getElementById('tarteaucitron')
 
     tac.querySelectorAll('.tarteaucitronAllow').forEach(button => {
-      button.classList.add('btn', 'btn-sm', 'btn-success', 'my-2', 'my-lg-0')
+      button.classList.add('btn', 'btn-sm', 'btn-success')
       button.innerHTML = tarteaucitron.lang.allowAll
     })
 
     tac.querySelectorAll('.tarteaucitronDeny').forEach(button => {
-      button.classList.add('btn', 'btn-sm', 'btn-danger', 'my-2', 'my-lg-0', 'ms-lg-2')
+      button.classList.add('btn', 'btn-sm', 'btn-danger', 'mt-1', 'mt-md-0', 'ms-md-3')
       button.innerHTML = tarteaucitron.lang.denyAll
     })
 
@@ -79,7 +79,7 @@
       const toggle = document
         .createRange()
         .createContextualFragment(
-          `<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none"></div>`
+          `<div class="form-check form-switch ps-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none"></div>`
         )
       ask.innerHTML = ''
       ask.append(toggle)
diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss
index 91da3b3f7f..c76ac9743c 100644
--- a/site/assets/scss/_tarteaucitron.scss
+++ b/site/assets/scss/_tarteaucitron.scss
@@ -4,6 +4,7 @@
   z-index: $zindex-modal;
   display: none;
   width: 100%;
+  max-width: $modal-md;
   padding: $modal-content-padding;
   background-color: $modal-content-bg;
   background-clip: padding-box;
@@ -15,23 +16,6 @@
     font-weight: $font-weight-bold;
     color: $modal-content-color;
   }
-
-  @include media-breakpoint-up(sm) {
-    max-width: $modal-sm;
-    margin: $modal-dialog-margin-y-sm-up auto;
-  }
-
-  @include media-breakpoint-up(md) {
-    max-width: $modal-md;
-  }
-
-  @include media-breakpoint-up(lg) {
-    max-width: $modal-lg * 1.125;
-  }
-
-  @include media-breakpoint-up(xl) {
-    max-width: $modal-xl * 1.25;
-  }
 }
 
 @include tac("Root") {
@@ -120,23 +104,28 @@
 }
 
 @include tac("Name", true) {
-  float: left;
   font-size: $font-size-sm;
   color: var(--bs-secondary-color);
 }
 
 @include tac("Ask", true) {
-  float: right;
+  display: flex;
+  flex-direction: column;
+  margin-top: $spacer * .5;
+
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+  }
 }
 
 @include tac("Line", true) {
+  margin-bottom: $spacer;
   overflow: visible;
   @include clearfix();
 }
 
 @include tac("MainLine", true) {
   padding-bottom: $spacer;
-  margin-bottom: $spacer;
   border-bottom: $modal-content-border-width solid $modal-content-border-color;
 }