From bda053c011f69c8c483227c73355b518ad61746c Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Fri, 22 Apr 2022 09:33:23 +0100 Subject: [PATCH] Remove pattern attribute from date input component `pattern="[0-9]*"` was added to these inputs to prompt iOS to display the numeric keypad, which was advised by the Safari team at the time. This has been unnecessary since Safari 12.2, when support for the standardised `inputmode` attribute was added to Safari. As of March 2022, the proportion of GOV.UK visitors using versions of iOS 12.x and below has fallen below 0.1% of total traffic, so it seems like a reasonable time to consider removing the default `pattern` attribute. --- CHANGELOG.md | 8 ++++++++ src/govuk/components/date-input/template.njk | 2 +- src/govuk/components/date-input/template.test.js | 7 ------- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fa33f6d099..60e780c488 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,14 @@ If you're not using the Nunjucks macros, remove the `aria-live` attribute from t This change was introduced in [pull request #2577: Refactor character count to inject new element](https://github.com/alphagov/govuk-frontend/pull/2577) +#### Remove `pattern` from the date input component + +If you're not using the Nunjucks macros, remove `pattern="[0-9]*"` from each of the date input component's elements. + +This attribute was originally added to enforce numeric keyboard functionality in Safari on iOS. The `inputmode` attribute provides this functionality for newer Safari versions, so we no longer need to use the `pattern` attribute. + +This change was introduced in [pull request #2599: Remove pattern attribute from date input component](https://github.com/alphagov/govuk-frontend/pull/2599). + ### Fixes We've made the following fixes in [pull request #2577: Refactor character count to inject new element](https://github.com/alphagov/govuk-frontend/pull/2577): diff --git a/src/govuk/components/date-input/template.njk b/src/govuk/components/date-input/template.njk index c2896756c7..2bca8bf079 100644 --- a/src/govuk/components/date-input/template.njk +++ b/src/govuk/components/date-input/template.njk @@ -68,7 +68,7 @@ type: "text", inputmode: item.inputmode if item.inputmode else "numeric", autocomplete: item.autocomplete, - pattern: item.pattern if item.pattern else "[0-9]*", + pattern: item.pattern, attributes: item.attributes }) | indent(6) | trim }} diff --git a/src/govuk/components/date-input/template.test.js b/src/govuk/components/date-input/template.test.js index 3d14c6cbab..c53fc7bf6a 100644 --- a/src/govuk/components/date-input/template.test.js +++ b/src/govuk/components/date-input/template.test.js @@ -56,13 +56,6 @@ describe('Date input', () => { expect($firstInput.attr('inputmode')).toEqual('numeric') }) - it('renders inputs with pattern="[0-9]*" to trigger numeric keypad on iOS', () => { - const $ = render('date-input', examples.default) - - const $firstInput = $('.govuk-date-input__item:first-child input') - expect($firstInput.attr('pattern')).toEqual('[0-9]*') - }) - it('renders item with implicit class for label', () => { const $ = render('date-input', examples.default)