diff --git a/app/assets/stylesheets/new_design/accessibilite.scss b/app/assets/stylesheets/new_design/accessibilite.scss index eb2953da6..d3917e970 100644 --- a/app/assets/stylesheets/new_design/accessibilite.scss +++ b/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; +} diff --git a/app/assets/stylesheets/new_design/dossiers_table.scss b/app/assets/stylesheets/new_design/dossiers_table.scss index 1af317cdb..64ec0dc9f 100644 --- a/app/assets/stylesheets/new_design/dossiers_table.scss +++ b/app/assets/stylesheets/new_design/dossiers_table.scss @@ -67,6 +67,7 @@ .label { width: 110px; text-align: center; + margin: 0 4px; } } diff --git a/app/views/users/dossiers/index.html.haml b/app/views/users/dossiers/index.html.haml index 0c73c103e..f2271b8d3 100644 --- a/app/views/users/dossiers/index.html.haml +++ b/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)