Accessibilité : l'écran de login est accessible en zoom 200%

betagouv · Nov 13, 2024 · 93f91f8 · 93f91f8
1 parent 43db635
commit 93f91f8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/app/assets/stylesheets/admin/layout/_footer.scss b/app/assets/stylesheets/admin/layout/_footer.scss
@@ -4,22 +4,33 @@
   color: $couleur-texte;
   padding: 1.75rem 0 0;
 
+  .footer__a-propos {
+    margin: 0;
+    padding-top: 0.8rem;
+  }
+
   .footer__ligne {
     border-top: 1px solid $eva_dark_blue_grey;
     width: 100%;
     margin-top: 1rem;
     margin-bottom: 0;
   }
 
+  @media (max-width: 630px) {
+    .footer__logos {
+      flex-direction: column;
+    }
+  }
+
   .footer__logos {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1.75rem 155px 1.25rem 155px;
-    background-color: $eva_light;
+    padding: 1rem 10% 1.25rem 10%;
     width: 100%;
 
     img { max-height: 4rem; }
+    .logo-eva { width: 7.25rem; }
     .logo-ministere-travail { max-height: 7.25rem; }
 
     .logos__groupe {

diff --git a/app/assets/stylesheets/admin/pages/_logged_out.scss b/app/assets/stylesheets/admin/pages/_logged_out.scss
@@ -57,10 +57,10 @@ body.logged_out {
 
 
     .groupe-titres {
-      width: $largeur-colonne;
-      margin: 0 auto 3rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       font-family: $font-titre;
-      text-align: center;
       .logo-eva {
         width: 6rem;
       }
@@ -111,6 +111,7 @@ body.logged_out {
       justify-content: center;
       .panel {
         width: $panels-largeur;
+        max-width: 47vw;
         padding: 0;
         margin-bottom: 0;
         .panel-content {
@@ -266,26 +267,22 @@ body.logged_out {
 
   #footer-principal {
     box-sizing: border-box;
-    color: $eva_light;
     padding: 1rem 1.875rem 0 1.875rem;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
 
     .footer__a-propos {
-      width: $largeur-colonne;
-      margin: 0;
+      background-color: $eva_light;
     }
 
     .footer__logos {
-      padding-left: 0;
+      background-color: $eva_light;
       padding-right: 0;
+      padding-left: 0;
       width: ($panels-largeur * 2 + $panels-gap);
-    }
-
-    a {
-      color: white;
+      max-width: 100%;
     }
   }
 

diff --git a/app/views/components/_footer.html.erb b/app/views/components/_footer.html.erb
@@ -1,13 +1,14 @@
 <% sponsors = local_assigns.fetch :sponsors, true %>
 <footer id="footer-principal">
-  <p class="footer__a-propos"><%= t('active_admin.footer').html_safe %></p>
   <% if sponsors %>
     <div class="footer__ligne"></div>
+    <p class="footer__a-propos"><%= t('active_admin.footer').html_safe %></p>
     <div class="footer__logos">
       <div class="logos__groupe">
         <%= image_tag 'logo_ministere_travail.svg', alt: "Ministere du travail, de l'emploi et de l'insertion",
                       class: 'logo-ministere-travail' %>
-        <%= image_tag 'logo_anlci.svg', alt: t('logo_anlci') %>
+        <%= image_tag 'logo_anlci.svg', alt: t('logo_anlci'),
+                      class: 'logo-eva' %>
       </div>
       <div class="logos__groupe">
         <%= image_tag 'logo_france_relance.svg', alt: 'France relance' %>