Make countdown message screen reader compatible

Patch Update

Summary:

This patch addresses the issue of making the countdown message screen reader compatible. The primary changes involve associating the countdown message with its corresponding field using the aria-describedby attribute and announcing important character count milestones using Drupal.announce().

Details:

1. Associated the countdown message with its input field using the aria-describedby attribute, improving accessibility for screen reader users.
2. Introduced logic to announce when there are only 10 characters left, when there are no characters left, and when the character limit is exceeded. These announcements are wrapped in Drupal.t() to ensure they're translatable, enhancing compatibility for multilingual sites.
3. The changes were tested using the Screen Reader extension for Chrome.

Looking forward for reviews and feedback.

Tests are failing and we need to test the existence of the aria-described by field.

+++ b/js/maxlength.js
@@ -78,6 +81,15 @@
+    if (available === 10) {
+      Drupal.announce(Drupal.t("Only 10 characters left"));
+    } else if (available === 0) {
+      Drupal.announce(Drupal.t("You have 0 characters left"));
+    } else if (available < 0) {
+      Drupal.announce(Drupal.t("You have exceeded the limit by @available characters", {'@available': Math.abs(available)}));
+    }

This should be a switch instead of else ifs.

Thank you for taking the time to review this patch!

Patch Updates:

- Use switch instead of else if.
- Testing aria-describedby Attribute: testAriaDescribedbyAttribute(), is introduced to ascertain the correct setting of the aria-describedby attribute by the maxlength.js script.

Test Failures Noted:

We've observed the following test failures in the CI.
Unfortunately, I have been unable to run the tests locally, which has limited my ability to further diagnose and resolve the test failures.

Potential Causes:
Given the nature of the updates in the patch, it's plausible that the changes to the character count announcements and their respective behaviors might be influencing the test outcomes. Specifically, the additional announcements or altered text/behaviors might not align with the current test expectations.

Next Steps & Request for Assistance:

- If the test failures are related to the updated announcement behaviors, the tests might require updates to reflect the new expectations.
- Any advice, suggestions, or contributions to further diagnose or fix the test failures would be invaluable.

Hi @tguerineau,
I reviewed your latest patch in local & found its working as expected. I hope you can mark this issue to Needs Review state.

Thank @SandeepSingh199 for taking the time to review the patch and providing valuable feedback!

I have updated the issue state to "Needs Review" as per your suggestion.

Basically just rerolled the patch into MR and added few tests. Tested also manually, so setting the status to RTBC.

Announcement works, but I would recommend following the UK gov style of adding more information to the plain "0/250" description part. A screen reader user can access the text but without context. Fe. Voiceover tells the user there is additional information available and accessing that outputs "0/250" - it woulg be helpful I think even just to add the word "characters" to give context.

Great job! I will make a review.

@simohell where do you see this "0/250" description exactly?

Oh. Sorry, that "0/250" case was using a custom setting. So it's not something with the module / patch. This looks great. (the text is editable in the UI and is announced, so if not using the default, the responsibility is with the site builder)

Thanks, I thought it was something with the patch.