Link description and error to form fields

app/components/dsfr/input_status_message_component.rb

@@ -2,10 +2,10 @@
 
 module Dsfr
   class InputStatusMessageComponent < ApplicationComponent
-    def initialize(errors_on_attribute:, error_full_messages:, describedby_id:, champ:)
+    def initialize(errors_on_attribute:, error_full_messages:, champ:)
       @errors_on_attribute = errors_on_attribute
       @error_full_messages = error_full_messages
-      @describedby_id = describedby_id
+      @error_id = champ.error_id
       @champ = champ
     end
   end

app/components/dsfr/input_status_message_component/input_status_message_component.html.haml

@@ -1,4 +1,4 @@
-.fr-messages-group{ id: @describedby_id }
+.fr-messages-group{ id: @error_id, aria: { live: :assertive } }
   - if @error_full_messages.size > 0
     %p{ class: class_names('fr-message' => true, "fr-message--#{@errors_on_attribute ? 'error' : 'valid'}" => true) }
       = "« #{@champ.libelle} » "

app/components/editable_champ/champ_label_component/champ_label_component.html.haml

@@ -4,17 +4,17 @@
   = @form.label @champ.main_value_name, id: @champ.labelledby_id, for: @champ.input_id, class: 'fr-label' do
     - render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
   - if @champ.description.present?
-    .fr-hint-text= render SimpleFormatComponent.new(@champ.description, allow_a: true)
+    .fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
 - elsif @champ.legend_label?
   %legend.fr-fieldset__legend.fr-text--regular{ id: @champ.labelledby_id }= render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
   - if @champ.description.present?
-    .fr-hint-text= render SimpleFormatComponent.new(@champ.description, allow_a: true)
+    .fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
 - elsif @champ.single_checkbox?
   - if @champ.description.present?
-    .fr-hint-text= render SimpleFormatComponent.new(@champ.description, allow_a: true)
+    .fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
 - else
   -# champ civilite (and other?)
   .fr-label.fr-mb-1w{ id: @champ.labelledby_id }
     = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
   - if @champ.description.present?
-    .fr-hint-text= render SimpleFormatComponent.new(@champ.description, allow_a: true)
+    .fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)

app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml

@@ -5,4 +5,4 @@
 
     = render champ_component
 
-    = render Dsfr::InputStatusMessageComponent.new(errors_on_attribute: champ_component.errors_on_attribute?, error_full_messages: champ_component.error_full_messages, describedby_id: @champ.describedby_id, champ: @champ)
+    = render Dsfr::InputStatusMessageComponent.new(errors_on_attribute: champ_component.errors_on_attribute?, error_full_messages: champ_component.error_full_messages, champ: @champ)

app/components/editable_champ/text_component/text_component.html.haml

@@ -1 +1 @@
-= @form.text_field(:value, input_opts(id: @champ.input_id, required: @champ.required?, aria: { describedby: @champ.describedby_id }))
+= @form.text_field(:value, input_opts(id: @champ.input_id, required: @champ.required?, aria: { describedby:"#{@champ.describedby_id} #{@champ.error_id}" }))

app/models/champ.rb

@@ -184,6 +184,10 @@ def describedby_id
     "#{html_id}-describedby_id"
   end
 
+  def error_id
+    "#{html_id}-error_id"
+  end
+
   def log_fetch_external_data_exception(exception)
     update_column(:fetch_external_data_exceptions, [exception.inspect])
   end