Merge pull request #10893 from demarches-simplifiees/a11y-form-errors

Améliore la restitution des message d'erreur lors d'une soumission en erreur

app/components/dossiers/errors_full_messages_component/errors_full_messages_component.en.yml

@@ -1,7 +1,13 @@
 ---
 en:
   sumup_html:
+    title:
       one: |
-      Your file has 1 error. <a href="%{url}">Fix-it</a> to continue :
+        Your file has 1 error
       other: |
-      Your file has %{count} errors. <a href="%{url}">Fix-them</a> to continue :
+        Your file has %{count} errors
+    content:
+      one: |
+        Fix-it to continue:
+      other: |
+        Fix-them to continue:

app/components/dossiers/errors_full_messages_component/errors_full_messages_component.fr.yml

@@ -1,7 +1,13 @@
 ---
 fr:
   sumup_html:
+    title:
       one: |
-      Votre dossier contient 1 champ en erreur. <a href="%{url}">Corrigez-la</a> pour poursuivre :
+        Votre dossier contient 1 champ en erreur
       other: |
-      Votre dossier contient  %{count} champs en erreurs. <a href="%{url}">Corrigez-les</a> pour poursuivre :
+        Votre dossier contient  %{count} champs en erreur
+    content:
+      one: |
+        Corrigez-la pour poursuivre :
+      other: |
+        Corrigez-les pour poursuivre :

app/components/dossiers/errors_full_messages_component/errors_full_messages_component.html.haml

@@ -1,4 +1,7 @@
-.fr-alert.fr-alert--error.fr-mb-3w{ role: "alertdialog" }
+.fr-alert.fr-alert--error.fr-mb-3w{ role: 'alert' }
+
   - if dedup_and_partitioned_errors.size > 0
-    %p#sumup-errors= t('.sumup_html', count: dedup_and_partitioned_errors.size, url: dedup_and_partitioned_errors.first.anchor)
+    %h3#sumup-errors.fr-alert__title{ data: { controller: 'autofocus' }, tabindex: '-1' }
+      = t('.sumup_html.title', count: dedup_and_partitioned_errors.size)
+    %p= t('.sumup_html.content', count: dedup_and_partitioned_errors.size)
     = render ExpandableErrorList.new(errors: dedup_and_partitioned_errors)

app/javascript/controllers/autofocus_controller.ts

@@ -2,8 +2,10 @@ import { Controller } from '@hotwired/stimulus';
 
 export class AutofocusController extends Controller {
   connect() {
-    const element = this.element as HTMLInputElement;
+    const element = this.element as HTMLInputElement | HTMLElement;
     element.focus();
+    if ('value' in element) {
       element.setSelectionRange(0, element.value.length);
     }
   }
+}

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

@@ -2,7 +2,7 @@
   = procedure_libelle(dossier.procedure)
   = status_badge_user(dossier, 'super')
 %h2
-  = t('views.users.dossiers.show.header.dossier_number', dossier_id: dossier.id)
+  = t('views.users.dossiers.show.header.dossier_number_html', dossier_id: dossier.id)
   = t('views.users.dossiers.show.header.created_date', date_du_dossier: I18n.l(dossier.created_at))
 
 = render(partial: 'users/dossiers/expiration_banner', locals: {dossier: dossier})

app/views/users/dossiers/show/_header.html.haml

@@ -5,7 +5,7 @@
       = status_badge_user(dossier, 'super')
       = pending_correction_badge(:for_user) if dossier.pending_correction?
     %h2
-      = t('views.users.dossiers.show.header.dossier_number', dossier_id: dossier.id)
+      = t('views.users.dossiers.show.header.dossier_number_html', dossier_id: dossier.id)
       - if dossier.depose_at.present?
         = t('views.users.dossiers.show.header.submit_date', date_du_dossier: I18n.l(dossier.depose_at))
 

config/locales/en.yml

@@ -461,7 +461,7 @@ en:
             summary: "Summary"
             request: "Request"
             mailbox: "Mailbox"
-            dossier_number: "File n. %{dossier_id}"
+            dossier_number_html: "File <span class='visually-hidden'>number</span> <span aria-hidden='true'>n.</span> %{dossier_id}"
             created_date: "- Draft on %{date_du_dossier}"
             submit_date: "- Submit on %{date_du_dossier}"
           status_overview:

config/locales/fr.yml

@@ -464,7 +464,7 @@ fr:
             summary: "Résumé"
             request: "Demande"
             mailbox: "Messagerie"
-            dossier_number: "Dossier nº %{dossier_id}"
+            dossier_number_html: "Dossier <span class='visually-hidden'>numéro</span> <span aria-hidden='true'>nº</span> %{dossier_id}"
             created_date: "- En brouillon depuis le %{date_du_dossier}"
             submit_date: "- Déposé le %{date_du_dossier}"
           status_overview:

spec/views/users/dossiers/demande.html.haml_spec.rb

@@ -12,7 +12,7 @@ describe 'users/dossiers/demande', type: :view do
   subject! { render }
 
   it 'renders the header' do
-    expect(rendered).to have_text("Dossier nº #{dossier.id}")
+    expect(rendered).to have_text("Dossier numéro nº #{dossier.id}")
   end
 
   it 'renders the dossier infos' do

spec/views/users/dossiers/show.html.haml_spec.rb

@@ -11,7 +11,7 @@ describe 'users/dossiers/show', type: :view do
   subject! { render }
 
   it 'renders a summary of the dossier state' do
-    expect(rendered).to have_text("Dossier nº #{dossier.id}")
+    expect(rendered).to have_text("Dossier numéro nº #{dossier.id}")
     expect(rendered).to have_text('dossier est en construction')
   end
 

spec/views/users/dossiers/show/_header.html.haml_spec.rb

@@ -12,7 +12,7 @@ describe 'users/dossiers/show/header', type: :view do
 
   it 'affiche les informations du dossier' do
     expect(rendered).to have_text(dossier.procedure.libelle)
-    expect(rendered).to have_text("Dossier nº #{dossier.id}")
+    expect(rendered).to have_text("Dossier numéro nº #{dossier.id}")
     expect(rendered).to have_text("en construction")
 
     expect(rendered).to have_selector("nav.fr-tabs")
@@ -25,7 +25,7 @@ describe 'users/dossiers/show/header', type: :view do
     let(:dossier) { create(:dossier, :en_construction, procedure: procedure) }
 
     it "affiche les informations du dossier" do
-      expect(rendered).to have_text("Dossier nº #{dossier.id}")
+      expect(rendered).to have_text("Dossier numéro nº #{dossier.id}")
       expect(rendered).to have_text("en construction")
     end
   end
@@ -35,7 +35,7 @@ describe 'users/dossiers/show/header', type: :view do
     let(:dossier) { create(:dossier, :accepte, procedure: procedure) }
 
     it "n'affiche pas les informations de décision" do
-      expect(rendered).to have_text("Dossier nº #{dossier.id}")
+      expect(rendered).to have_text("Dossier numéro nº #{dossier.id}")
       expect(rendered).to have_text("traité")
     end
   end