Text Area Character Count Component

[JamesR-CA]

Text Area Character Count Component

Please provide a summary of the changes you would like to make to the existing component, along with any reasoning and supporting information.

To add a Character Count numbering to the TextArea (https://citizensadvice.github.io/design-system/?path=/story/forms-textarea--basic) to support:

• integration with other platforms (such as Casebook) when data transfer and receiving fields require limits added to map correctly across systems
• encourage users to provide sufficient information (on the principle that we would want to transmit the minimum amount of information)
• provide users understanding how many characters are allowed to be added to certain form fields using the TextArea component
• this would be a variant to the existing Text Area - so not all TextAreas would require a character count

Follow-up questions:
• what is the accessibility requirement for non-js and best practice guidance?
• Do we follow the GDS model (https://design-system.service.gov.uk/components/character-count/)?

Depending on the above follow-up questions:
• designs will need to be generated to support development

[mrdaniellewis]

We have one in Casebook, designed by Shakira. It follows the gov.uk design principles, but the difference is the count is at the top rather than the bottom. That might be because our error message is at the bottom.

We also have an older one in Casebook where the count was on the top right, but I think that used maxlength.

[davidrapson]

The key thing to take from the GDS example would be making sure that the component is within an appropriate aria-live region and that is clearly describes the units (is it a character count or a word count). If there's an existing production example in Casebook that's great!

[mrdaniellewis]

It doesn't have the aria-live attribute. It does have the aria-describedby.

Hmmm, easy to add but I'd want to test that carefully. Some screen-readers queue all the aria-live messages which would create a message for every change of character count instead of just the last change. Also some screen-readers will read out a change in aria-describedby like it is a live region leading to duplicated messages, which the page does note is a problem in JAWS.

[davidrapson]

Yeah definitely one we'd want to test carefully! When I've had to implement this in the past I've also seen aria-live=polite + aria-atomic=true work reasonably well but very dependent on the context and how different tools interpret things. Definitely not ideal for it to just announce "500!" really aggressively at folks.

[mrdaniellewis]

Yes 🤣