Accessiblité : nouvelles couleurs pour le composant qcm

betagouv · Sep 18, 2024 · d8d25c7 · d8d25c7
1 parent 8822aab
commit d8d25c7
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 34 deletions.
diff --git a/app/assets/stylesheets/admin/_utilities.scss b/app/assets/stylesheets/admin/_utilities.scss
@@ -21,7 +21,3 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.carte--deroulee {
-  border-radius: .5rem .5rem 0 0;
-}
diff --git a/app/assets/stylesheets/admin/composants/_buttons.scss b/app/assets/stylesheets/admin/composants/_buttons.scss
@@ -64,15 +64,15 @@ button.bouton, .bouton {
   }
 
   &.valide-qcm:hover {
-    background-color: $grey-1000-hover ;
+    background-color: $grey-1000-hover;
   }
 
   &.bouton-outline--main {
     background-color: $grey-1000 ;
   }
 
-  &.bouton-outline--light, &.bouton-outline--grey,
-  &.bouton-outline--light:hover, &.bouton-outline--grey:hover {
+  &.bouton-outline--light,
+  &.bouton-outline--light:hover {
     background-color: transparent;
   }
 
@@ -87,11 +87,6 @@ button.bouton, .bouton {
     border-color: $eva_light;
   }
 
-  &.bouton-outline--grey {
-    color: $eva_bluegrey;
-    border-color: $eva_bluegrey;
-  }
-
   &.bouton-principal {
     @include bouton();
   }
@@ -108,4 +103,8 @@ button.bouton, .bouton {
     background-color: $grey-925;
     border-color: $grey-925;
   }
+
+  &.bouton-tertiaire {
+    @include bouton-tertiaire;
+  }
 }
diff --git a/app/assets/stylesheets/admin/composants/_card_validation.scss b/app/assets/stylesheets/admin/composants/_card_validation.scss
@@ -8,7 +8,7 @@
   font-size: .875rem;
   min-height: 3rem;
 
-  .information-principale, 
+  .information-principale,
   .information-secondaire {
     word-break: break-word;
   }

diff --git a/app/assets/stylesheets/admin/composants/_qcm.scss b/app/assets/stylesheets/admin/composants/_qcm.scss
@@ -1,6 +1,6 @@
 .qcm {
-  color: white;
-  background-color: $eva_main_light;
+  border: none;
+  background-color: $grey-950;
   padding: 1rem;
   border-radius: 0px 0px 1rem 1rem;
 
@@ -11,7 +11,7 @@
     }
   }
 
-  input:checked + .tag { @include tag-couleur-plein($eva_green); }
+  input:checked + .tag { @include tag-couleur-plein($success-950); }
 
   .tag {
     cursor: pointer;
@@ -20,10 +20,6 @@
     color: $eva_dark;
     border: none;
   }
-
-  .bouton-fermer {
-    margin-right: .25rem;
-  }
 }
 
 .image-preview {

diff --git a/app/assets/stylesheets/admin/mixins/_buttons.scss b/app/assets/stylesheets/admin/mixins/_buttons.scss
@@ -48,27 +48,29 @@
   border-radius: 0.25rem;
   border-color: $eva_main_blue;
   background-color: $grey-1000;
+  box-shadow: none;
   &:not(.disabled):hover {
     filter: brightness(96%);
   }
 }
 
-@mixin bouton-tertiaire-sans-contour {
+@mixin bouton-tertiaire {
   @include bouton();
-  border: none;
-  border-radius: 0;
-  padding: .75rem 1rem;
-  text-align: left;
-
-  &, &:link, &:visited {
-    color: $eva_dark;
-  }
+  border-color: $grey-900;
 
   &:hover {
     background-color: $grey-1000-hover;
   }
 }
 
+@mixin bouton-tertiaire-sans-contour {
+  @include bouton-tertiaire();
+  border: none;
+  border-radius: 0;
+  padding: .75rem 1rem;
+  text-align: left;
+}
+
 $hauteur_roue_dentee: 1.25rem;
 @mixin roue-dentee() {
   background: image-url('roue-dentee.svg') left center no-repeat;

diff --git a/app/assets/stylesheets/admin/pages/dashboard/_dashboard.scss b/app/assets/stylesheets/admin/pages/dashboard/_dashboard.scss
@@ -103,6 +103,20 @@
 
   .evaluations-sans-mise-en-action {
     box-shadow: none;
+    background-color: $eva_bluegrey;
+
+    .card {
+      box-shadow: none;
+
+      &.carte--deroulee {
+        border-radius: .5rem .5rem 0 0;
+        box-shadow: 0px 0px 8px rgba(30, 65, 106, 0.25);
+
+        & ~ .qcm {
+          box-shadow: 0px 0px 8px rgba(30, 65, 106, 0.25);
+        }
+      }
+    }
 
     .carte-liste {
       height: 3rem;
@@ -177,8 +191,6 @@
 
     .qcm {
       position: absolute;
-      border: solid 1px white;
-      border-top: none;
     }
   }
 

diff --git a/app/components/qcm.html.erb b/app/components/qcm.html.erb
@@ -1,4 +1,4 @@
-<div class="card qcm w-100 <%= "questions-#{@questionnaire.nom}" %> <%= @qcm_affiche ? '' : 'hidden' %>" style="z-index: <%= @priorite %>;">
+<div class="qcm w-100 <%= "questions-#{@questionnaire.nom}" %> <%= @qcm_affiche ? '' : 'hidden' %>" style="z-index: <%= @priorite %>;">
   <p><%= @questionnaire.question %></p>
   <form class="mt-3">
     <ul style="list-style-type: none" class="m-0 p-0">
@@ -11,7 +11,7 @@
         </li>
       <% end %>
       <li class="d-flex justify-content-end">
-        <button type="button" class="bouton bouton-fermer bouton-outline--grey">
+        <button type="button" class="bouton bouton-tertiaire bouton-fermer mr-1">
           <%= t('.action_fermer') %>
         </button>
         <button type="button" class="bouton valide-qcm mr-0 bouton--desactive">

diff --git a/app/views/nouvelles_structures/_modal_mise_en_garde.html.erb b/app/views/nouvelles_structures/_modal_mise_en_garde.html.erb
@@ -7,7 +7,7 @@
           <p><%= md t('.message')%></p>
         </div>
         <div class='actions'>
-          <%= link_to t('.bouton_retour'), 'javascript:history.back()', class: 'bouton bouton-light' %>
+          <%= link_to t('.bouton_retour'), 'javascript:history.back()', class: 'bouton bouton-tertiaire' %>
           <%= link_to t('.bouton'),
             url_for(params.permit(:code_postal)),
             class: 'bouton' %>