Merge pull request #10538 from demarches-simplifiees/a11y-fix-unordered-list

Correction des listes mal structurées

app/assets/stylesheets/landing.scss

@@ -133,7 +133,8 @@ $landing-breakpoint: 1040px;
   }
 
   .number {
-    @extend %horizontal-list-item;
+    display: flex;
+    flex-direction: column;
     width: 320px;
     text-align: center;
 
@@ -143,6 +144,8 @@ $landing-breakpoint: 1040px;
   }
 
   .number-value {
+    padding-bottom: 0;
+    padding-inline-start: 0;
     color: var(--text-action-high-blue-france);
     font-size: 2rem;
     line-height: 2rem;
@@ -150,8 +153,9 @@ $landing-breakpoint: 1040px;
   }
 
   .number-label {
+    order: 2;
     max-width: 10rem;
-    margin: auto;
+    margin: 0 auto;
     font-weight: 600;
     font-size: 1.25rem;
     line-height: 1.5rem;
@@ -163,6 +167,10 @@ $landing-breakpoint: 1040px;
   }
 }
 
+html[lang="fr"] .landing .number-label-third::before {
+  content: "de ";
+}
+
 $users-breakpoint: 950px;
 
 .users {

app/views/layouts/_skiplinks.html.haml

@@ -1,5 +1,3 @@
 .fr-skiplinks
   %nav.fr-container{ role: "navigation", 'aria-label': t("skiplinks.quick") }
-    %ul.fr-skiplinks__list
+    %a.fr-link{ href: "#contenu" }= t('skiplinks.content')
-      %li
-        %a.fr-link{ href: "#contenu" }= t('skiplinks.content')

app/views/root/administration.html.haml

@@ -74,28 +74,22 @@
     .fr-py-6w.fr-background-alt--blue-france
       .container
         %h2.center.fr-mb-4w #{Current.application_name} en chiffres
-        %ul.numbers
+        %dl.numbers
-          %li.number
+          .number
-            .number-value
+            %dt.number-label
+              administrations partenaires
+            %dd.number-value
               = number_with_delimiter(Administrateur.with_publiees_ou_closes.uniq.count, :locale => :fr)
-            .number-label<
+          .number
-              administrations
+            %dt.number-label
-              %br<>
+              dossiers déposés
-              partenaires
+            %dd.number-value
-          %li.number
-            .number-value
               = number_with_delimiter(Dossier.state_not_brouillon.count, :locale => :fr)
-            .number-label<
+          .number
-              dossiers
+            %dt.number-label
-              %br<>
+              de réduction des délais de traitement
-              déposés
+            %dd.number-value
-          %li.number
-            .number-value
               = "#{number_with_delimiter(50, :locale => :fr)} %"
-            .number-label<
-              de réduction
-              %br<>
-              des délais de traitement
 
   = render partial: "root/users" if  LANDING_USERS_ENABLED
 

app/views/root/landing.html.haml

@@ -30,19 +30,19 @@
     .container
       %h2.center.fr-mb-4w= t(".our_numbers", name: Current.application_name)
       - cache [I18n.locale, "numbers-panel"], expires_in: 3.hours do
-        %ul.numbers
+        %dl.numbers
-          %li.number
+          .number
-            .number-value
+            %dt.number-label= t(".numbers.administrations")
+            %dd.number-value
               = number_with_delimiter(@stat&.administrations_partenaires)
-            .number-label= t(".numbers.administrations")
+          .number
-          %li.number
+            %dt.number-label= t(".numbers.files")
-            .number-value
+            %dd.number-value
               = number_with_delimiter(@stat&.dossiers_not_brouillon)
-            .number-label= t(".numbers.files")
+          .number
-          %li.number
+            %dt.number-label.number-label-third= t(".numbers.processing_time")
-            .number-value
+            %dd.number-value
               = "#{number_with_delimiter(50)} %"
-            .number-label.number-label-third= t(".numbers.processing_time")
 
   .fr-background-alt--blue-france.fr-py-6w
     .container

config/locales/views/root.fr.yml

@@ -18,7 +18,7 @@ fr:
           dossiers
           déposés
         processing_time: |
-          de réduction
+          réduction
           des délais de traitement
       question: Une question, un problème ?
       answer_in_faq: La réponse est dans l’aide en ligne