Merge pull request #1146 from alphagov/enable-autocomplete-on-components

Enable `autocomplete` attributes for input components

CHANGELOG.md

@@ -14,11 +14,15 @@
 
 🆕 New features:
 
-- Pull Request Title goes here
+- Enable `autocomplete` attributes for input components.
 
-  Description goes here (optional)
+  You can now set the `autocomplete` attribute on input, date input and textarea components using the component macros.
 
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+  This was already possible to do with the `attributes` option but this change highlights the new WCAG 2.1 success criteria [Identify Input Purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html) 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".
+
+  See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for the full list of attributes that can be used.
+
+  ([PR #1146](https://github.com/alphagov/govuk-frontend/pull/1146))
 
 🔧 Fixes:
 

src/components/date-input/date-input.yaml

@@ -28,6 +28,10 @@ params:
     type: string
     required: false
     description: If provided, it will be used as the initial value of the input.
+  - 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: classes
     type: string
     required: false
@@ -188,3 +192,25 @@ examples:
       text: For example, 31 3 1980
     formGroup:
       classes: extra-class
+- name: with autocomplete values
+  data:
+    id: dob-with-autocomplete-attribute
+    namePrefix: dob-with-autocomplete
+    fieldset:
+      legend:
+        text: What is your date of birth?
+    hint:
+      text: For example, 31 3 1980
+    items:
+      -
+        name: day
+        classes: govuk-input--width-2
+        autocomplete: bday-day
+      -
+        name: month
+        classes: govuk-input--width-2
+        autocomplete: bday-month
+      -
+        name: year
+        classes: govuk-input--width-2
+        autocomplete: bday-year

src/components/date-input/template.njk

@@ -65,6 +65,7 @@
         name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
         value: item.value,
         type: "number",
+        autocomplete: item.autocomplete,
         attributes: {
           pattern: "[0-9]*"
         }

src/components/date-input/template.test.js

@@ -459,4 +459,25 @@ describe('Date input', () => {
     expect($monthInput.hasClass('undefined')).toBeFalsy()
     expect($yearInput.hasClass('undefined')).toBeFalsy()
   })
+
+  describe('when it includes autocomplete attributes', () => {
+    it('renders the autocomplete attribute', () => {
+      const $ = render('date-input', {
+        items: [
+          {
+            'autocomplete': 'bday-day'
+          },
+          {
+            'autocomplete': 'bday-month'
+          },
+          {
+            'autocomplete': 'bday-year'
+          }
+        ]
+      })
+
+      const $firstItems = $('.govuk-date-input__item:first-child input')
+      expect($firstItems.attr('autocomplete')).toEqual('bday-day')
+    })
+  })
 })

src/components/input/input.yaml

@@ -43,6 +43,10 @@ params:
   type: string
   required: false
   description: Classes to add to the anchor tag.
+- 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
@@ -151,3 +155,10 @@ examples:
       name: test-name
       formGroup:
         classes: extra-class
+  - name: with autocomplete attribute
+    data:
+      label:
+        text: Postcode
+      id: input-with-autocomplete-attribute
+      name: postcode
+      autocomplete: postal-code

src/components/input/template.njk

@@ -39,5 +39,6 @@
   <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
 </div>

src/components/input/template.test.js

@@ -246,4 +246,16 @@ describe('Input', () => {
       expect($label.attr('for')).toEqual('my-input')
     })
   })
+
+  describe('when it includes an autocomplete attribute', () => {
+    it('renders the autocomplete attribute', () => {
+      const $ = render('input', {
+        id: 'input-with-autocomplete',
+        autocomplete: 'postal-code'
+      })
+
+      const $component = $('.govuk-input')
+      expect($component.attr('autocomplete')).toEqual('postal-code')
+    })
+  })
 })

src/components/textarea/template.njk

@@ -38,5 +38,6 @@
 {% endif %}
   <textarea class="govuk-textarea {{- ' govuk-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>
 </div>

src/components/textarea/template.test.js

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

src/components/textarea/textarea.yaml

@@ -47,6 +47,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
@@ -107,3 +111,11 @@ examples:
         text: Full address
       formGroup:
         classes: extra-class
+
+  - name: with autocomplete attribute
+    data:
+      id: textarea-with-autocomplete-attribute
+      name: address
+      label:
+        text: Full address
+      autocomplete: street-address