Accessibilité : re-design des champs de formulaires DSFR-like

betagouv · Sep 16, 2024 · 8c18100 · 8c18100
1 parent 2acb0f0
commit 8c18100
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 106 deletions.
diff --git a/app/assets/stylesheets/admin/_variables.scss b/app/assets/stylesheets/admin/_variables.scss
@@ -1,6 +1,7 @@
 // Couleurs du DSFR
 $blue-france-sun-113: #000091;
 $blue-france-sun-113-hover: #1212FF;
+$blue-france-950: #ECECFE;
 $blue-france-925: #E3E3FD;
 $success-950: #B8FEC9;
 $success-425: #18753C;
@@ -16,7 +17,7 @@ $error-950: #FFE9E9;
 $error-425: #CE0500;
 $grey-1000: #FFFFFF;
 $grey-1000-hover: #F6F6F6;
-$grey-950: #ECECFE;
+$grey-950: #EEEEEE;
 $grey-900: #DDDDDD;
 $grey-925: #E5E5E5;
 $grey-850: #CECECE;
@@ -35,7 +36,7 @@ $eva_red: $error-425;
 $eva_dark: #161616;
 $eva_less_dark: $grey-425;
 $eva_dark_blue_grey: $grey-200;
-$eva_bluegrey: $grey-950;
+$eva_bluegrey: $blue-france-950;
 $eva_light: #FBF9FA;
 
 $anlci_orange: #fc5d5d; // Couleur officielle : nacarat

diff --git a/app/assets/stylesheets/admin/composants/_filtres.scss b/app/assets/stylesheets/admin/composants/_filtres.scss
@@ -1,24 +1,46 @@
 .sidebar_section {
-  form.filter_form {
-    .filter_form_field {
-      &.select_and_search {
-        input[type='text'] {
-          width: 6.4rem;
+  form {
+    &.filter_form {
+      input[type="text"] {
+      }
+      ::placeholder {
+        color: $couleur-texte;
+      }
+
+      .filter_form_field {
+        &.select_and_search {
+          input[type='text'] {
+            width: 6.4rem;
+          }
+        }
+        &.filter_date_range {
+          input[type='text'] {
+            width: 7.188rem;
+          }
         }
       }
-      &.filter_date_range {
-        input[type='text'] {
-          width: 7.188rem;
+      .input:not(.select_and_search) {
+        select {
+          width: 100%;
         }
       }
-    }
-    .input:not(.select_and_search) {
-      select {
-        width: 100%;
+      .select2-selection {
+        padding: .5rem 0.5rem;
       }
     }
-    .select2-selection {
-      height: 100%;
+
+    .filter_form_field {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    label {
+      text-transform: none;
+      font-weight: normal;
+      color: $eva_dark;
+      width: 100%;
+      line-height: 1.5rem;
     }
   }
 }
diff --git a/app/assets/stylesheets/admin/composants/_forms.scss b/app/assets/stylesheets/admin/composants/_forms.scss
@@ -1,27 +1,41 @@
 @mixin base-input {
-  color: $eva_dark;
-  border-radius: .5rem;
-  border: 1px solid $eva_bluegrey;
-  padding: 0.5rem;
-
-  &:focus-visible {
-    outline: none;
-  }
+  background-color: $grey-950;
+  border-radius: .25rem .25rem 0 0;
+  border: 0;
+  box-shadow: inset 0 -2px 0 0 $grey-200;
+  color: $grey-200;
+  display: block;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  padding: .5rem 1rem;
+  width: 100%;
+  text-rendering: optimizeLegibility;
 
   &:focus {
-    border-color: $eva_main_blue;
-    @include ombre();
+    border: 0;
+    outline-color: #0a76f6;
+    outline-offset: 2px;
+    outline-style: solid;
+    outline-width: 2px;
   }
 
   &::placeholder {
     color: $couleur-texte;
   }
 }
 
+form fieldset.inputs {
+  max-width: 70%;
+}
+
+.panel form fieldset.inputs, form .panel fieldset.inputs {
+  max-width: 100%;
+}
+
+
 form {
   fieldset {
     padding: 0;
-    margin-bottom: 0;
 
     &.inputs,
     legend span {
@@ -40,8 +54,6 @@ form {
     > ol > li {
       padding: 0;
       margin-bottom: 1rem;
-      display: flex;
-      flex-wrap: wrap;
 
       &.has_many_container {
         display: block;
@@ -51,17 +63,10 @@ form {
         margin-bottom: 0;
       }
 
-      fieldset {
-        flex: 1;
-        &:not(.inputs) ol {
-          padding-left:33%;
-        }
-      }
-
       label {
         line-height: 1.875rem;
         font-size: .875rem;
-        width: 33%;
+        width: 100%;
         padding-right: .75rem;
         text-transform: none;
         font-weight: normal;
@@ -76,16 +81,7 @@ form {
         display: flex;
         align-items: center;
         width: 100%;
-      }
-
-      &.boolean label, .liens-partages {
-        padding-left: 33%;
-      }
-
-      &.libelle-long {
-        label {
-          line-height: 1;
-        }
+        padding-left: 0;
       }
 
       &.error {
@@ -103,12 +99,9 @@ form {
         }
       }
 
-      p.inline-errors,
-      p.inline-hints {
-        margin-left: 33%;
-      }
       p.inline-errors {
         color: $eva_red;
+        margin: 0.3em 0 0 0;
       }
       p.inline-hints {
         color: $eva_dark;
@@ -119,36 +112,30 @@ form {
     }
     select {
       appearance: none;
-      height: 2rem;
       position: relative;
       padding-left: .5rem;
       padding-right: 2rem;
-      background-color: white;
     }
     li.select {
       position: relative;
 
-      &:after {
+      &::after {
         content: '';
         color: $eva_main_blue;
         right: 0.7rem;
-        top: 0.4rem;
+        top: 2.4rem;
         position: absolute;
         pointer-events: none;
         background-image: asset-data-url('fleche_select.svg');
         height: 1rem;
         width: 1rem;
       }
-
       .select2-selection__arrow {
         display: none;
       }
       .select2-selection__clear {
         margin-right: .7rem;
       }
-      .select2-selection {
-        height: 100%;
-      }
     }
     &.actions {
       margin-top: 1rem;
@@ -174,7 +161,6 @@ form {
   select,
   textarea {
     @include base-input();
-    width: 67%;
   }
 
   input[type="search"] {
@@ -196,38 +182,15 @@ form {
   }
 }
 
-/* FILTRES */
-.sidebar_section form {
-  label {
-    text-transform: none;
-    font-weight: normal;
-    color: $eva_dark;
-  }
-  &.filter_form {
-    input[type="text"] {
-      color: $eva_dark;
-      border-color: $eva_bluegrey;
-      border-radius: .5rem;
-      &:focus {
-        border: 1px solid $eva_main_blue;
-        @include ombre();
-      }
-    }
-    ::placeholder {
-      color: $couleur-texte;
-    }
-  }
-}
-
 /* SELECT2 */
 form:not(.filter_form) .select2-container {
-  width: 67% !important;
+  width: 100% !important;
 }
 .select2 {
   &-container {
-    height: 32px;
     .select2-selection {
-      border-radius: .5rem;
+      @include base-input();
+      height: 2.5rem;
     }
   }
   &-results__option {

diff --git a/app/assets/stylesheets/admin/composants/_input_choix.scss b/app/assets/stylesheets/admin/composants/_input_choix.scss
@@ -79,6 +79,21 @@
     }
   }
 
+  input + .choix-item {
+    .choix-item__icone {
+      .icone-loupe {
+        path, rect {
+          fill: $eva_main_blue;
+        }
+      }
+      .icone-pin {
+        path {
+          stroke: $eva_main_blue;
+        }
+      }
+    }
+  }
+
   input:checked + .choix-item {
     border-color: $couleur-texte;
     background: $eva_main_blue;

diff --git a/app/assets/stylesheets/admin/composants/_panels.scss b/app/assets/stylesheets/admin/composants/_panels.scss
@@ -1,6 +1,11 @@
-.section,
-.panel,
 body.logged_out #content_wrapper #active_admin_content {
+  box-shadow: none;
+  background: none;
+  padding: 0;
+}
+
+.section,
+.panel {
   @include carte-avec-ombre();
   padding: 1.5rem;
   margin-bottom: 1.5rem;

diff --git a/app/assets/stylesheets/admin/pages/_campagne.scss b/app/assets/stylesheets/admin/pages/_campagne.scss
@@ -148,12 +148,12 @@
       color: $eva_dark_blue_grey;
     }
 
-    fieldset.inputs {
+    fieldset.inputs, fieldset.input-choix, fieldset.choices {
       background-color: #fff;
+
       input[type="text"],
       .select2 {
-        width: auto;
-        flex: 1;
+        width: 100%;
       }
     }
   }
@@ -162,6 +162,7 @@
 
   form fieldset.actions {
     margin-top: 2rem;
+
     ol {
       display: flex;
       justify-content: space-between;

diff --git a/app/assets/stylesheets/admin/pages/_logged_out.scss b/app/assets/stylesheets/admin/pages/_logged_out.scss
@@ -154,7 +154,7 @@ body.logged_out {
         }
         .panel-content {
           form {
-            margin-top: 2rem;
+            margin-top: 1rem;
           }
         }
       }
@@ -233,8 +233,7 @@ body.logged_out {
       input[type="text"],
       input[type="email"],
       input[type="password"] {
-        width: auto;
-        flex: 1;
+        width: 100%;
       }
       li {
         padding: 0;

diff --git a/app/views/active_admin/devise/registrations/new.html.erb b/app/views/active_admin/devise/registrations/new.html.erb
@@ -14,7 +14,7 @@
                 ville_ou_code_postal: params[:ville_ou_code_postal]
               ),
               class: 'lien-retour' %>
-  <div id="login">
+  <div id="login" class="panel">
     <h3><%= t('.instruction') -%></h3>
     <p><%= t('.description') -%></p>
 

diff --git a/app/views/components/_input_type_programme.html.erb b/app/views/components/_input_type_programme.html.erb
@@ -2,13 +2,13 @@
   <div class="choix-item__icone">
     <% if programme == :pre_positionnement %>
       <svg width="50" height="64" fill="none" xmlns="http://www.w3.org/2000/svg" class="icone-pin">
-        <path d="m7.91 38.578-.024-.029C4.804 34.907 3.25 30.07 3.25 24.541 3.25 12.69 13.206 3 25 3s21.75 9.689 21.75 21.541c0 5.427-1.685 10.222-4.685 14.067L27.314 56.483a3 3 0 0 1-4.628 0L7.91 38.578Z" stroke="#6E84FE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M27.75 23.75c0 1.912-1.457 3.25-3 3.25s-3-1.338-3-3.25 1.457-3.25 3-3.25 3 1.338 3 3.25Z" fill="#000" stroke="#6E84FE" stroke-width="6"/>
+        <path d="m7.91 38.578-.024-.029C4.804 34.907 3.25 30.07 3.25 24.541 3.25 12.69 13.206 3 25 3s21.75 9.689 21.75 21.541c0 5.427-1.685 10.222-4.685 14.067L27.314 56.483a3 3 0 0 1-4.628 0L7.91 38.578Z" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M27.75 23.75c0 1.912-1.457 3.25-3 3.25s-3-1.338-3-3.25 1.457-3.25 3-3.25 3 1.338 3 3.25Z" fill="#000" stroke-width="6"/>
       </svg>
     <% elsif programme == :positionnement %>
       <svg width="64" height="64" fill="none" xmlns="http://www.w3.org/2000/svg" class="icone-loupe">
-        <rect x="19.2" y="32" width="12.8" height="12.8" rx="2" transform="rotate(-90 19.2 32)" fill="#6E84FE"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M41.044 45.673a25.375 25.375 0 0 1-15.558 5.298C11.41 50.971 0 39.561 0 25.486 0 11.41 11.41 0 25.486 0 39.56 0 50.97 11.41 50.97 25.486a25.375 25.375 0 0 1-5.298 15.558c.367.168.711.403 1.014.706l16.29 16.29a3.49 3.49 0 1 1-4.936 4.938L41.75 46.686a3.485 3.485 0 0 1-.706-1.014Zm2.946-20.187c0 10.22-8.285 18.504-18.504 18.504-10.22 0-18.504-8.285-18.504-18.504 0-10.22 8.284-18.504 18.504-18.504S43.99 15.266 43.99 25.486Z" fill="#6E84FE"/>
+        <rect x="19.2" y="32" width="12.8" height="12.8" rx="2" transform="rotate(-90 19.2 32)"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M41.044 45.673a25.375 25.375 0 0 1-15.558 5.298C11.41 50.971 0 39.561 0 25.486 0 11.41 11.41 0 25.486 0 39.56 0 50.97 11.41 50.97 25.486a25.375 25.375 0 0 1-5.298 15.558c.367.168.711.403 1.014.706l16.29 16.29a3.49 3.49 0 1 1-4.936 4.938L41.75 46.686a3.485 3.485 0 0 1-.706-1.014Zm2.946-20.187c0 10.22-8.285 18.504-18.504 18.504-10.22 0-18.504-8.285-18.504-18.504 0-10.22 8.284-18.504 18.504-18.504S43.99 15.266 43.99 25.486Z"/>
       </svg>
     <% end %>
   </div>