Skip to content

Commit

Permalink
Remove pattern attribute from date input component
Browse files Browse the repository at this point in the history
`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.
  • Loading branch information
querkmachine committed Apr 22, 2022
1 parent cea3233 commit eda623b
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 8 deletions.
2 changes: 1 addition & 1 deletion src/govuk/components/date-input/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
</div>
Expand Down
7 changes: 0 additions & 7 deletions src/govuk/components/date-input/template.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down

0 comments on commit eda623b

Please sign in to comment.