Update character-count to render autocomplete

WCAG 2.1 introduces a new success criteria "1.3.5 Identify Input Purpose" which
"is to ensure that the purpose of a form input collecting information about the
user can be programmatically determined, so that user agents can extract and present
this purpose to users using different modalities".

Broadly speaking, we can help service teams meet this criteria by making it easier
to pass autocomplete attributes to components.

At the minute this can be done by using the attributes option, but making it part of the
component API promotes the idea that this should be used when it makes sense to do so.

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

@@ -50,6 +50,10 @@ params:
   type: string
   required: false
   description: Classes to add to the textarea.
+- name: autocomplete
+  type: string
+  required: false
+  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
 - name: attributes
   type: object
   required: false
@@ -135,3 +139,11 @@ examples:
       threshold: 75
       label:
         text: Full address
+
+  - name: with autocomplete attribute
+    data:
+      id: character-count-with-autocomplete-attribute
+      name: address
+      label:
+        text: Full address
+      autocomplete: street-address

src/components/character-count/template.njk

@@ -21,6 +21,7 @@
     },
     hint: params.hint,
     errorMessage: params.errorMessage,
+    autocomplete: params.autocomplete,
     attributes: params.attributes
   }) }}
   <span id="{{ params.id }}-info" class="govuk-hint govuk-character-count__message" aria-live="polite">

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

@@ -195,4 +195,17 @@ describe('Character count', () => {
       expect($label.attr('for')).toEqual('my-character-count')
     })
   })
+
+  describe('when it includes an autocomplete attribute', () => {
+    it('renders the autocomplete attribute', () => {
+      const $ = render('character-count', {
+        attributes: {
+          'autocomplete': 'street-address'
+        }
+      })
+
+      const $component = $('.js-character-count')
+      expect($component.attr('autocomplete')).toEqual('street-address')
+    })
+  })
 })