Merge pull request #8159 from colinux/fix-a11y-tables

a11y: fix for tables

app/assets/stylesheets/dossiers_table.scss

@@ -51,7 +51,7 @@
   }
 
   .number-col {
-    width: 110px;
+    white-space: nowrap;
   }
 
   .folder-col {

app/assets/stylesheets/table.scss

@@ -9,7 +9,8 @@
     border-top: 1px solid $border-grey;
   }
 
-  td {
+  td,
+  th[scope="row"] {
     @include vertical-padding($default-spacer);
     vertical-align: middle;
   }

app/views/shared/dossiers/_champs.html.haml

@@ -1,4 +1,4 @@
-%table.table.vertical.dossier-champs
+%table.table.vertical.dossier-champs{ role: :presentation }
   %tbody
     - if dossier.show_groupe_instructeur_details?
       %td.libelle= dossier.procedure.routing_criteria_name

app/views/shared/dossiers/_identite_entreprise.html.haml

@@ -1,5 +1,5 @@
 - if etablissement.as_degraded_mode?
-  %table.table.vertical.dossier-champs
+  %table.table.vertical.dossier-champs{ role: :presentation }
     %tbody
       %tr
         %td.libelle{ colspan: 2 } ⚠ LʼINSEE est indisponible, les informations sur lʼentreprise arriveront dʼici quelques heures.
@@ -7,7 +7,7 @@
         %td.libelle SIRET :
         %td= etablissement.siret
 - else
-  %table.table.vertical.dossier-champs
+  %table.table.vertical.dossier-champs{ role: :presentation }
     %tbody
       - if etablissement.diffusable_commercialement == false && profile != 'instructeur'
         %tr

app/views/shared/dossiers/_identite_individual.html.haml

@@ -1,4 +1,4 @@
-%table.table.vertical.dossier-champs
+%table.table.vertical.dossier-champs{ role: :presentation }
   %tbody
     %tr
       %td.libelle

app/views/shared/dossiers/_infos_generales.html.haml

@@ -1,4 +1,4 @@
-%table.table.vertical.dossier-champs
+%table.table.vertical.dossier-champs{ role: :presentation }
   %tbody
     %tr
       %td.libelle Déposé le :

app/views/shared/dossiers/_user_infos.html.haml

@@ -1,4 +1,4 @@
-%table.table.vertical.dossier-champs
+%table.table.vertical.dossier-champs{ role: :presentation }
   %tbody
     %tr
       %td.libelle Email :

app/views/users/dossiers/_dossiers_list.html.haml

@@ -1,18 +1,19 @@
 - if dossiers.present?
   %table.table.dossiers-table.hoverable
+    %caption= t('views.users.dossiers.dossiers_list.caption')
     %thead
       %tr
-        %th.number-col= t('views.users.dossiers.dossiers_list.n_dossier')
-        %th= t('views.users.dossiers.dossiers_list.procedure')
+        %th.number-col{ scope: :col }= t('views.users.dossiers.dossiers_list.n_dossier')
+        %th{ scope: :col }= t('views.users.dossiers.dossiers_list.procedure')
         - if dossiers.present?
-          %th= t('views.users.dossiers.dossiers_list.requester')
-        %th.status-col= t('views.users.dossiers.dossiers_list.status')
-        %th.updated-at-col= t('views.users.dossiers.dossiers_list.updated')
-        %th.sr-only= t('views.users.dossiers.dossiers_list.actions')
+          %th{ scope: :col }= t('views.users.dossiers.dossiers_list.requester')
+        %th.status-col{ scope: :col }= t('views.users.dossiers.dossiers_list.status')
+        %th.updated-at-col{ scope: :col }= t('views.users.dossiers.dossiers_list.updated')
+        %th.sr-only{ scope: :col }= t('views.users.dossiers.dossiers_list.actions')
     %tbody
       - dossiers.each do |dossier|
         %tr{ data: { 'dossier-id': dossier.id } }
-          %td.number-col
+          %th.number-col{ scope: :row }
             = link_to(url_for_dossier(dossier), class: 'cell-link', tabindex: -1) do
               %span.icon.folder
               = dossier.id

config/locales/en.yml

@@ -245,6 +245,7 @@ en:
         index:
           dossiers: "Files"
         dossiers_list:
+          caption: My files
           procedure: "Procedure"
           n_dossier: "File n."
           requester: "Requester"

config/locales/fr.yml

@@ -241,6 +241,7 @@ fr:
         index:
           dossiers: "Dossiers"
         dossiers_list:
+          caption: Mes dossiers
           procedure: "Démarche"
           n_dossier: "Nº dossier"
           requester: "Demandeur"