fix(docs): change tarteaucitron design and rendering for a better acc…

…essibility (#2695) Co-authored-by: Hannah Issermann <[email protected]> Co-authored-by: Julien Déramond <[email protected]>
Orange-OpenSource · Oct 1, 2024 · a71458a · a71458a
1 parent c591efb
commit a71458a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 23 deletions.
diff --git 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
@@ -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;
 }