|
4 | 4 |
|
5 | 5 | ### :new: **New features** |
6 | 6 |
|
| 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 | + |
7 | 38 | #### Insert custom HTML into component form group wrappers |
8 | 39 |
|
9 | 40 | You can now insert custom HTML into form group wrappers for all components with form fields. |
|
0 commit comments