Skip to content

Commit

Permalink
Merge pull request #10317 from mfo/US/aria-labelled-by-error-message
Browse files Browse the repository at this point in the history
ETQ Usager, je souhaite que mon screen reader verbalise les erreurs sur les champs unique contenu dans un `fieldset`
  • Loading branch information
mfo authored Apr 18, 2024
2 parents 1a0a603 + 8453e12 commit 4041bfa
Show file tree
Hide file tree
Showing 6 changed files with 14 additions and 11 deletions.
9 changes: 8 additions & 1 deletion app/components/dsfr/input_errorable.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -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 })
elsif hintable?
Expand Down
8 changes: 2 additions & 6 deletions app/components/dsfr/input_status_message_component.rb
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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} » "
Expand Down
2 changes: 1 addition & 1 deletion app/components/editable_champ/editable_champ_component.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 1 addition & 1 deletion app/models/champ.rb
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,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)
Expand Down

0 comments on commit 4041bfa

Please sign in to comment.