Merge pull request #11003 from demarches-simplifiees/a11y-improve-hint-restitution

ETQ usager, utilisant un lecteur d'écran je veux être informé du nombre de caractères restants ou en trop dans un textarea
This commit is contained in:
Corinne Durrmeyer 2024-11-05 10:01:20 +00:00 committed by GitHub
commit d61078d01a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 13 additions and 12 deletions

View file

@ -20,5 +20,5 @@
- if @champ.description.present?
%span.fr-hint-text= render SimpleFormatComponent.new(@champ.description, allow_a: true)
- if @champ.textarea?
%span.sr-only= t('.recommended_size', size: @champ.character_limit_base)
- if @champ.textarea? && @champ.character_limit_base&.positive?
%span.fr-hint-text= t('.recommended_size', size: @champ.character_limit_base)

View file

@ -1,3 +1,3 @@
en:
remaining_characters: You have %{remaining_words} characters remaining.
excess_characters: You have %{excess_words} characters too many.
excess_characters: You have exceeded the recommended size of %{excess_words} characters. Please reduce the number of characters.

View file

@ -1,3 +1,3 @@
fr:
remaining_characters: Il vous reste %{remaining_words} caractères.
excess_characters: Vous avez dépassé la taille conseillée de %{excess_words} caractères. Réduire le nombre de caractères.
excess_characters: Vous avez dépassé la taille conseillée de %{excess_words} caractères. Veuillez réduire le nombre de caractères.

View file

@ -1,9 +1,10 @@
~ @form.text_area(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, rows: 6, required: @champ.required?, value: html_to_string(@champ.value), data: { controller: 'autoresize' }))
- if @champ.character_limit_info?
%p.fr-info-text
= t('.remaining_characters', remaining_words: @champ.remaining_characters)
%div{ role: 'status' }
- if @champ.character_limit_info?
%p.fr-info-text
= t('.remaining_characters', remaining_words: @champ.remaining_characters)
- if @champ.character_limit_warning?
%p.fr-icon--sm.fr-mt-4v.fr-mb-0.fr-hint-text.fr-icon-warning-fill.fr-text-default--warning.characters-count
= t('.excess_characters', excess_words: @champ.excess_characters)
- if @champ.character_limit_warning?
%p.fr-icon--sm.fr-mt-4v.fr-mb-0.fr-hint-text.fr-icon-warning-fill.fr-text-default--warning
= t('.excess_characters', excess_words: @champ.excess_characters)

View file

@ -3,4 +3,4 @@ en:
attributes:
champs/decimal_number_champ:
hints:
value: "You can enter up to 3 decimal places after the decimal point. Example: 3.141"
value_html: "You can enter up to 3 decimal places after the decimal point. Example: 3.141"

View file

@ -3,4 +3,4 @@ fr:
attributes:
champs/decimal_number_champ:
hints:
value: "Vous pouvez saisir jusquà 3 décimales après le point. Exemple: 3.141"
value_html: "Vous pouvez saisir jusquà 3 décimales après le point. Exemple: <span aria-hidden='true'>3.141</span><span class='sr-only'>3 point 141</span>"