Merge pull request #2742 from alphagov/kg-i18n-character-count

Add ability to customise character count fallback text

src/govuk/components/character-count/character-count.test.js

@@ -26,7 +26,7 @@ describe('Character count', () => {
       await page.setJavaScriptEnabled(true)
     })
 
-    it('shows the static message', async () => {
+    it('shows the fallback message', async () => {
       await goToExample()
       const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
 
@@ -320,4 +320,13 @@ describe('Character count', () => {
       })
     })
   })
+
+  describe('custom options', () => {
+    it('allows customisation of the fallback message', async () => {
+      await goToExample('with-custom-fallback-text')
+      const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
+
+      expect(message).toEqual('Gallwch ddefnyddio hyd at 10 nod')
+    })
+  })
 })

src/govuk/components/character-count/character-count.yaml

@@ -37,6 +37,10 @@ params:
   required: false
   description: Options for the hint component.
   isComponent: true
+- name: fallbackHintText
+  type: string
+  required: false
+  description: Text describing the maximum number of characters you can enter, which is announced to screen readers. The text is displayed as a fallback if the character count JavaScript does not run. Depending on how you configure this component and what parameters you add, instances of `%{count}` are replaced by the value of `maxwords`. If not configured, it uses `maxlength`. By default, fallback text is provided in English.
 - name: errorMessage
   type: object
   required: false
@@ -81,6 +85,14 @@ examples:
       maxlength: 10
       label:
         text: Can you provide more detail?
+
+  - name: with custom fallback text
+    description: with no-js fallback text translated into Welsh
+    data:
+      name: custom-fallback
+      id: custom-fallback
+      maxlength: 10
+      fallbackHintText: Gallwch ddefnyddio hyd at %{count} nod
 
   - name: with hint
     data:

src/govuk/components/character-count/template.njk

@@ -26,8 +26,10 @@
     errorMessage: params.errorMessage,
     attributes: params.attributes
   }) }}
+  {%- set fallbackHintLength = params.maxwords or params.maxlength %}
+  {%- set fallbackHintDefault = 'You can enter up to %{count} ' + ('words' if params.maxwords else 'characters') %}
   {{ govukHint({
-    text: 'You can enter up to ' + (params.maxlength or params.maxwords) + (' words' if params.maxwords else ' characters'),
+    text: (params.fallbackHintText or fallbackHintDefault) | replace('%{count}', fallbackHintLength),
     id: params.id + '-info',
     classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes)
   }) }}