From f457c174ee0b2cc0569f46aa178602201b5257a5 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Wed, 30 Oct 2024 17:57:36 +0100 Subject: [PATCH] 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)