feat(champ.errors): add aria-labelledby error on champs wrapped withi…

…n a fieldset, make error messages always present and aria-live: assertive on validation error

Co-authored-by: Corinne Durrmeyer <corinne@inseo.fr>
Co-authored-by: Colin Darie <colin@darie.eu>

app/components/dsfr/input_errorable.rb

@@ -34,6 +34,14 @@ def error_full_messages
         errors.full_messages_for(attribute_or_rich_body)
       end
 
+      def fieldset_error_opts
+        if dsfr_champ_container == :fieldset && errors_on_attribute?
+          { aria: { labelledby: "#{describedby_id} #{object.labelledby_id}" } }
+        else
+          {}
+        end
+      end
+
       private
 
       # lookup for edge case from `form.rich_text_area`
@@ -73,7 +81,6 @@ def input_opts(other_opts = {})
                                              'fr-input': true,
                                              'fr-mb-0': true
                                       }.merge(input_error_class_names)))
-
         if errors_on_attribute?
           @opts.deep_merge!(aria: {
             describedby: describedby_id

app/components/dsfr/input_status_message_component.rb

@@ -1,14 +1,10 @@
 module Dsfr
   class InputStatusMessageComponent < ApplicationComponent
-    def initialize(errors_on_attribute:, error_full_messages:, described_by:, champ:)
+    def initialize(errors_on_attribute:, error_full_messages:, describedby_id:, champ:)
       @errors_on_attribute = errors_on_attribute
       @error_full_messages = error_full_messages
-      @described_by = described_by
+      @describedby_id = describedby_id
       @champ = champ
     end
-
-    def render?
-      @errors_on_attribute
-    end
   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: @describedby_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/editable_champ_component.rb

@@ -34,7 +34,7 @@ def html_options
         }.merge(champ_component.input_group_error_class_names)
       ),
       data: { controller: stimulus_controller, **data_dependent_conditions, **stimulus_values }
-    }
+    }.deep_merge(champ_component.fieldset_error_opts)
   end
 
   def fieldset_element_attributes

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

@@ -5,6 +5,6 @@
 
     = render champ_component
 
-    = render Dsfr::InputStatusMessageComponent.new(errors_on_attribute: champ_component.errors_on_attribute?, error_full_messages: champ_component.error_full_messages, described_by: @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, describedby_id: @champ.describedby_id, champ: @champ)
 
     = @form.hidden_field :id, value: @champ.id

app/models/champ.rb

@@ -188,7 +188,7 @@ def labelledby_id
   end
 
   def describedby_id
-    "#{html_id}-description" if description.present?
+    "#{html_id}-describedby_id"
   end
 
   def log_fetch_external_data_exception(exception)