Skip to content

Commit 8f6afe3

Browse files
Add changelog entry
1 parent 4f93b4c commit 8f6afe3

1 file changed

Lines changed: 31 additions & 0 deletions

File tree

CHANGELOG.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,37 @@
44

55
### :new: **New features**
66

7+
#### Localise character count component
8+
9+
You can now translate the text used by the [character count](https://service-manual.nhs.uk/design-system/components/character-count) component to:
10+
11+
- show when the maximum number of characters or words is reached
12+
- show the number of characters or words over or under the allowed maximum
13+
- update the textarea description if JavaScript is not available
14+
- announce to screen readers when the textarea is focused
15+
16+
The Nunjucks macro accepts new options so you can customise each message. You can:
17+
18+
- Use `charactersAtLimitText` or `wordsAtLimitText` to provide the text that shows when users have reached the limit.
19+
- Use `charactersUnderLimitText` or `wordsUnderLimitText` to provide the text that shows when users are under the limit. The component will pluralise the message according to the configured locale and the number of characters or words remaining.
20+
- Use `charactersOverLimitText` or `wordsOverLimitText` to provide the text that shows when users are over the limit. The component will pluralise the message according to the configured locale and the number of characters or words remaining.
21+
- Use `textareaDescriptionText` to provide the textarea description for assistive technologies. It is visible on the page when JavaScript is unavailable.
22+
23+
The component will replace `%{count}` with the number of characters over or under the limit.
24+
25+
If you're not using Nunjucks macros, you can use data-\* attributes to provide these translations. Within the attribute value, any [quotation marks or other characters reserved by HTML](https://developer.mozilla.org/en-US/docs/Glossary/Character_reference) needs to be converted into their HTML entity equivalents.
26+
27+
You can:
28+
29+
- use `data-i18n.characters-at-limit` or `data-i18n.words-at-limit` for when users are at the limit
30+
- configure the text that informs the end user they are under the character or word limit, by using `data-i18n.characters-under-limit.{other,many,few,two,one,zero}` or `data-i18n.words-under-limit.{other,many,few,two,one,zero}`, with one suffix for each plural form required by your locale
31+
- configure the text that informs the end user they are over the character or word limit, by using `data-i18n.characters-over-limit.{other,many,few,two,one,zero}` or `data-i18n.words-over-limit.{other,many,few,two,one,zero}`, with one suffix for each plural form required by your locale
32+
- configure the description provided to assistive technologies when users focus the input, by using `data-i18n.textarea-description.{other,many,few,two,one,zero}` to provide the text to set as the description
33+
34+
You can also provide these messages using a JavaScript configuration object when creating an instance of the component or initialising all components. See [our guidance on localising NHS.UK frontend](/docs/configuration/localisation.md) for how to do this.
35+
36+
This was added in [pull request #1565: Add character count localisation](https://github.com/nhsuk/nhsuk-frontend/pull/1565).
37+
738
#### Insert custom HTML into component form group wrappers
839

940
You can now insert custom HTML into form group wrappers for all components with form fields.

0 commit comments

Comments
 (0)