From 1c99a7c18758d0d2a31d3a55e7f03a375f9899d5 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Wed, 30 Oct 2024 17:28:34 +0100 Subject: [PATCH 1/3] fix(character_limit_base) Displays the number of characters recommended for everyone --- .../champ_label_content_component.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml b/app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml index 297b84b64..5a65163b7 100644 --- a/app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml +++ b/app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml @@ -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) From d7c97f5775bb1972775a95a0aeb10486947b9607 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Wed, 30 Oct 2024 17:39:20 +0100 Subject: [PATCH 2/3] fix(fr-hint-text) Ensures that screen readers can read the point in the decimal number --- config/locales/models/champs/decimal_number_champ/en.yml | 2 +- config/locales/models/champs/decimal_number_champ/fr.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config/locales/models/champs/decimal_number_champ/en.yml b/config/locales/models/champs/decimal_number_champ/en.yml index 3866bd120..a69dda4a8 100644 --- a/config/locales/models/champs/decimal_number_champ/en.yml +++ b/config/locales/models/champs/decimal_number_champ/en.yml @@ -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" diff --git a/config/locales/models/champs/decimal_number_champ/fr.yml b/config/locales/models/champs/decimal_number_champ/fr.yml index 88b3d422e..248ee2930 100644 --- a/config/locales/models/champs/decimal_number_champ/fr.yml +++ b/config/locales/models/champs/decimal_number_champ/fr.yml @@ -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: 3 point 141" From f457c174ee0b2cc0569f46aa178602201b5257a5 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Wed, 30 Oct 2024 17:57:36 +0100 Subject: [PATCH 3/3] fix(character_limit) Return number of remaining or excess characters to screen reader --- .../textarea_component/textarea_component.en.yml | 2 +- .../textarea_component/textarea_component.fr.yml | 2 +- .../textarea_component/textarea_component.html.haml | 13 +++++++------ 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/app/components/editable_champ/textarea_component/textarea_component.en.yml b/app/components/editable_champ/textarea_component/textarea_component.en.yml index 8e9b49901..760b46d14 100644 --- a/app/components/editable_champ/textarea_component/textarea_component.en.yml +++ b/app/components/editable_champ/textarea_component/textarea_component.en.yml @@ -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. diff --git a/app/components/editable_champ/textarea_component/textarea_component.fr.yml b/app/components/editable_champ/textarea_component/textarea_component.fr.yml index fa8fafdc1..c2f36291b 100644 --- a/app/components/editable_champ/textarea_component/textarea_component.fr.yml +++ b/app/components/editable_champ/textarea_component/textarea_component.fr.yml @@ -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. diff --git a/app/components/editable_champ/textarea_component/textarea_component.html.haml b/app/components/editable_champ/textarea_component/textarea_component.html.haml index e6c7f20cd..cc76ab438 100644 --- a/app/components/editable_champ/textarea_component/textarea_component.html.haml +++ b/app/components/editable_champ/textarea_component/textarea_component.html.haml @@ -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)