Merge pull request #5301 from betagouv/dossiers-accessibility

Usager : amélioration de l'accessibilité de la liste des dossiers

app/assets/stylesheets/new_design/accessibilite.scss

@@ -16,3 +16,17 @@ $new-p-margin-bottom: 3 * $default-space;
 .new-p {
   margin-bottom: $new-p-margin-bottom;
 }
+
+// A class to make elements only accessible to screen-readers
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: none;
+}

app/assets/stylesheets/new_design/dossiers_table.scss

@@ -67,6 +67,7 @@
     .label {
       width: 110px;
       text-align: center;
+      margin: 0 4px;
     }
   }
 

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

@@ -29,36 +29,31 @@
     %table.table.dossiers-table.hoverable
       %thead
         %tr
-          %th.notification-col
           %th.number-col Nº dossier
           %th Démarche
           - if @dossiers.count > 1
             %th Demandeur
           %th.status-col Statut
           %th.updated-at-col Mis à jour
-          %th
+          %th.sr-only Actions
       %tbody
         - @dossiers.each do |dossier|
           %tr{ data: { 'dossier-id': dossier.id } }
-            %td.folder-col
-              = link_to(url_for_dossier(dossier), class: 'cell-link') do
-                %span.icon.folder
             %td.number-col
-              = link_to(url_for_dossier(dossier), class: 'cell-link') do
+              = link_to(url_for_dossier(dossier), class: 'cell-link', tabindex: -1) do
+                %span.icon.folder
                 = dossier.id
             %td
               = link_to(url_for_dossier(dossier), class: 'cell-link') do
                 = procedure_libelle(dossier.procedure)
             - if @dossiers.count > 1
-              %td.number-col
+              %td.cell-link
                 = demandeur_dossier(dossier)
             %td.status-col
-              = link_to(url_for_dossier(dossier), class: 'cell-link') do
-                = status_badge(dossier.state)
-            %td.updated-at-col
-              = link_to(url_for_dossier(dossier), class: 'cell-link') do
-                = try_format_date(dossier.updated_at)
-            %td.action-col.action-col
+              = status_badge(dossier.state)
+            %td.updated-at-col.cell-link
+              = try_format_date(dossier.updated_at)
+            %td.action-col
               = render partial: 'dossier_actions', locals: { dossier: dossier }
     = paginate(@dossiers)