From 06138b6109d0985cdf1e8eb39039ecdc12962469 Mon Sep 17 00:00:00 2001
From: simon lehericey <mail@simon.lehericey.net>
Date: Fri, 29 Nov 2024 09:27:41 +0100
Subject: [PATCH] add hint_id to pj attachment described_by

---
 app/components/attachment/edit_component.rb        | 14 +++++++++++++-
 .../edit_component/edit_component.html.haml        |  4 ++--
 spec/components/attachment/edit_component_spec.rb  | 10 ++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/components/attachment/edit_component.rb b/app/components/attachment/edit_component.rb
index 36e731d01e4..e52d3379df9 100644
--- a/app/components/attachment/edit_component.rb
+++ b/app/components/attachment/edit_component.rb
@@ -68,6 +68,10 @@ def attachment_input_class
     "attachment-input-#{attachment_id}"
   end
 
+  def show_hint?
+    first? && !persisted?
+  end
+
   def file_field_options
     track_issue_with_missing_validators if missing_validators?
 
@@ -75,13 +79,17 @@ def file_field_options
       class: class_names("fr-upload attachment-input": true, "#{attachment_input_class}": true),
       direct_upload: @direct_upload,
       id: input_id,
-      aria: { describedby: champ&.describedby_id },
       data: {
         auto_attach_url:,
         turbo_force: :server
       }.merge(has_file_size_validator? ? { max_file_size: max_file_size } : {})
     }
 
+    describedby = []
+    describedby << champ.describedby_id if champ&.description.present?
+    describedby << describedby_hint_id if show_hint?
+    options[:aria] = { describedby: describedby.join(' ') }
+
     options.merge!(has_content_type_validator? ? { accept: accept_content_type } : {})
     options[:multiple] = true if as_multiple?
     options[:disabled] = true if (@max && @index >= @max) || persisted?
@@ -169,6 +177,10 @@ def error_message(attachment)
 
   private
 
+  def describedby_hint_id
+    "#{input_id}-pj-hint"
+  end
+
   def input_id
     if champ.present?
       # There is always a single input by champ, its id must match the label "for" attribute.
diff --git a/app/components/attachment/edit_component/edit_component.html.haml b/app/components/attachment/edit_component/edit_component.html.haml
index 423490e5019..829b5168389 100644
--- a/app/components/attachment/edit_component/edit_component.html.haml
+++ b/app/components/attachment/edit_component/edit_component.html.haml
@@ -37,8 +37,8 @@
         - if error?(attachment)
           %p.fr-error-text= error_message(attachment)
 
-  - if first? && !persisted?
-    %p.fr-hint-text.fr-mb-1w
+  - if show_hint?
+    %p.fr-hint-text.fr-mb-1w{ id: describedby_hint_id }
       - if max_file_size.present?
         = t('.max_file_size', max_file_size: number_to_human_size(max_file_size))
       - if allowed_formats.present?
diff --git a/spec/components/attachment/edit_component_spec.rb b/spec/components/attachment/edit_component_spec.rb
index 12e0334ef00..ffbebc9b83a 100644
--- a/spec/components/attachment/edit_component_spec.rb
+++ b/spec/components/attachment/edit_component_spec.rb
@@ -35,6 +35,16 @@
     it 'renders allowed formats' do
       expect(subject).to have_content(/Formats supportés : jpeg, png/)
     end
+
+    it 'sets up its aria describedby' do
+      subject
+
+      hint_element = page.find('.fr-hint-text')
+      expect(hint_element['id']).to eq("#{champ.input_id}-pj-hint")
+
+      input_describedby = page.find('input')['aria-describedby'].split
+      expect(input_describedby).to eq([champ.describedby_id, "#{champ.input_id}-pj-hint"])
+    end
   end
 
   context 'when there is an attachment' do