Improve rendering of “n°” by assistive technologies

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

@@ -1,4 +1,5 @@
 .fr-alert.fr-alert--error.fr-mb-3w{ role: 'alert' }
+
   - if dedup_and_partitioned_errors.size > 0
     %h3#sumup-errors.fr-alert__title{ data: { controller: 'autofocus' }, tabindex: '-1' }
       = t('.sumup_html.title', count: dedup_and_partitioned_errors.size)

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