From 7595fd21a40bba6b79436d361a669a3fec364912 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 16 Jan 2019 17:27:43 +0000 Subject: [PATCH 1/4] Update text input component 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/input/input.yaml | 11 +++++++++++ src/components/input/template.njk | 1 + src/components/input/template.test.js | 12 ++++++++++++ 3 files changed, 24 insertions(+) diff --git a/src/components/input/input.yaml b/src/components/input/input.yaml index 9dc6157316..820083e8e1 100644 --- a/src/components/input/input.yaml +++ b/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 diff --git a/src/components/input/template.njk b/src/components/input/template.njk index 7a62792353..0b5884ea3f 100644 --- a/src/components/input/template.njk +++ b/src/components/input/template.njk @@ -39,5 +39,6 @@ diff --git a/src/components/input/template.test.js b/src/components/input/template.test.js index 1a1bee153f..50b66537ae 100644 --- a/src/components/input/template.test.js +++ b/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') + }) + }) }) From 8a286773f5714481264c72a5713b7def54e7d451 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 16 Jan 2019 17:29:29 +0000 Subject: [PATCH 2/4] Update date input component 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/date-input/date-input.yaml | 26 ++++++++++++++++++++++ src/components/date-input/template.njk | 1 + src/components/date-input/template.test.js | 21 +++++++++++++++++ 3 files changed, 48 insertions(+) diff --git a/src/components/date-input/date-input.yaml b/src/components/date-input/date-input.yaml index 33a2dc5853..4984e9276b 100644 --- a/src/components/date-input/date-input.yaml +++ b/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 diff --git a/src/components/date-input/template.njk b/src/components/date-input/template.njk index af874d4f37..959ca4a13b 100644 --- a/src/components/date-input/template.njk +++ b/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]*" } diff --git a/src/components/date-input/template.test.js b/src/components/date-input/template.test.js index dbbfef38fc..3e4c12cdb0 100644 --- a/src/components/date-input/template.test.js +++ b/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') + }) + }) }) From 0ba98958fb89a25f0d789798a76c08591c71a2df Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Wed, 16 Jan 2019 16:50:59 +0000 Subject: [PATCH 3/4] Update textarea 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/textarea/template.njk | 1 + src/components/textarea/template.test.js | 13 +++++++++++++ src/components/textarea/textarea.yaml | 12 ++++++++++++ 3 files changed, 26 insertions(+) diff --git a/src/components/textarea/template.njk b/src/components/textarea/template.njk index ab505dc7f5..481a91b30f 100644 --- a/src/components/textarea/template.njk +++ b/src/components/textarea/template.njk @@ -38,5 +38,6 @@ {% endif %} diff --git a/src/components/textarea/template.test.js b/src/components/textarea/template.test.js index a91ce592de..b00dcb4922 100644 --- a/src/components/textarea/template.test.js +++ b/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') + }) + }) }) diff --git a/src/components/textarea/textarea.yaml b/src/components/textarea/textarea.yaml index fce110f984..03f8abfbc0 100644 --- a/src/components/textarea/textarea.yaml +++ b/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 From 601f592f26be5df6d3f36b262cc0818a62de0086 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Thu, 17 Jan 2019 08:55:37 +0000 Subject: [PATCH 4/4] Update CHANGELOG --- CHANGELOG.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6d8dc665c4..510c24f216 100644 --- a/CHANGELOG.md +++ b/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: