From cfabd7dcbe883e8a0950d5434c4dd45795433e37 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 20 Jan 2020 14:31:16 +0000 Subject: [PATCH 1/3] Update date input to type=text, inputmode=numeric MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Within the date input component the individual inputs look like this: ``` ``` We set the input to `type="number"` so that Android browsers display a numeric keypad keyboard when the input is focussed. iOS uses the full alphanumeric keyboard for `type="number"`, so we add `pattern="[0-9]*"` which triggers the numeric keypad there too [1]. This is technically invalid HTML, as the pattern attribute only applies to inputs of type `text`, `search`, `url`, `tel` and `email` [2], but is not known to cause any real-world issues. However, there are a number of known issues with inputs of `type="number"`: - they silently discard non-numeric input in Chrome [3] (except the letter 'e') - users can accidentally increment or decrement the number using the arrow keys without realising [4] - users can accidentally increment or decrement the number using the scroll wheel on the mouse or the scroll gesture on their trackpad [5] - they appear as unlabeled in NVDA's element list [6] - in NVDA's object navigation they are seen as a spin button which has an edit field and two buttons inside. Those buttons are unlabeled, but decrease/increase the value [7] - when tabbing to the field NVDA using pressing nvda+tab they are reported as unlabeled edit fields [7] - users of Dragon Naturally Speaking cannot dictate into them as expected [8] (Bugs have been filed where appropriate) In testing, using `` mitigates these issues, with some minor drawbacks: - Between iOS 12.2 and 13.0, the numeric keypad with punctuation is displayed instead of the numeric keypad. Versions prior to 12.2 do not support `inputmode`, thus fallback to the `pattern` attribute, and continue to show the full numeric keypad. iOS 13 updates inputmode="numeric" to use the numeric keypad without punctuation. - Firefox, UC Browser (and older versions of other browsers) on android support neither `inputmode` nor `pattern`, and so will use the full alphanumeric keypad until those browsers introduce support for `inputmode`. (Note: neither Firefox nor UC browser on Android are listed in our own browser support matrix [9] nor the service manual [10]) --- [1]: http://bradfrost.com/blog/post/better-numerical-inputs-for-mobile-forms/ [2]: https://html.spec.whatwg.org/multipage/input.html#input-type-attr-summary [3]: https://github.com/alphagov/govuk-frontend/issues/1449#issuecomment-503186819 [4]: https://github.com/alphagov/govuk-frontend/issues/1449#issuecomment-503186819 [5]: http://bradfrost.com/blog/post/you-probably-dont-need-input-typenumber/ [6]: https://github.com/alphagov/reported-bugs/issues/41 [7]: https://github.com/nvaccess/nvda/issues/9675#issuecomment-499977041 [8]: https://github.com/alphagov/reported-bugs/issues/34 [9]: https://github.com/alphagov/govuk-frontend#browser-and-assistive-technology-support [10]: https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in Co-authored-by: Colin Oakley --- src/govuk/components/date-input/template.njk | 3 ++- .../components/date-input/template.test.js | 17 +++++++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/govuk/components/date-input/template.njk b/src/govuk/components/date-input/template.njk index 29b9eadc1c..3cad2cdcbf 100644 --- a/src/govuk/components/date-input/template.njk +++ b/src/govuk/components/date-input/template.njk @@ -65,7 +65,8 @@ classes: "govuk-date-input__input " + (item.classes if item.classes), name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name, value: item.value, - type: "number", + type: "text", + inputmode: "numeric", autocomplete: item.autocomplete, pattern: item.pattern if item.pattern else "[0-9]*", attributes: item.attributes diff --git a/src/govuk/components/date-input/template.test.js b/src/govuk/components/date-input/template.test.js index e62094af50..aa36556917 100644 --- a/src/govuk/components/date-input/template.test.js +++ b/src/govuk/components/date-input/template.test.js @@ -140,7 +140,7 @@ describe('Date input', () => { expect($firstItems.text().trim()).toEqual('Day') }) - it('renders inputs with type="number"', () => { + it('renders inputs with type="text"', () => { const $ = render('date-input', { items: [ { @@ -150,7 +150,20 @@ describe('Date input', () => { }) const $firstInput = $('.govuk-date-input__item:first-child input') - expect($firstInput.attr('type')).toEqual('number') + expect($firstInput.attr('type')).toEqual('text') + }) + + it('renders inputs with inputmode="numric"', () => { + const $ = render('date-input', { + items: [ + { + name: 'day' + } + ] + }) + + const $firstInput = $('.govuk-date-input__item:first-child input') + expect($firstInput.attr('inputmode')).toEqual('numeric') }) it('renders inputs with pattern="[0-9]*" to trigger numeric keypad on iOS', () => { From bdf68ca766165a2281f08c10e56c643408f02c6f Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 20 Jan 2020 15:32:55 +0000 Subject: [PATCH 2/3] Fix typo Co-Authored-By: Nick Colley --- src/govuk/components/date-input/template.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/govuk/components/date-input/template.test.js b/src/govuk/components/date-input/template.test.js index aa36556917..eca870eaec 100644 --- a/src/govuk/components/date-input/template.test.js +++ b/src/govuk/components/date-input/template.test.js @@ -153,7 +153,7 @@ describe('Date input', () => { expect($firstInput.attr('type')).toEqual('text') }) - it('renders inputs with inputmode="numric"', () => { + it('renders inputs with inputmode="numeric"', () => { const $ = render('date-input', { items: [ { From c4897c47db6d230cd593c6c5776ac63f3abb23ee Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 20 Jan 2020 15:42:38 +0000 Subject: [PATCH 3/3] Document in changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c5d8b1b69..369c0610c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ If you're using Nunjucks, you can now add classes to the character count compone ### Fixes +- [Pull request #1704: Update the date input component to use `input type=text inputmode=numeric`](https://github.com/alphagov/govuk-frontend/pull/1704) - [Pull request #1690: Don't unneccesarily self-close tags](https://github.com/alphagov/govuk-frontend/pull/1690) - [Pull request #1678: Fix tabs component throwing JavaScript errors in Internet Explorer 8](https://github.com/alphagov/govuk-frontend/pull/1678). - [Pull request #1676: Fix skip link component focus style with global styles enabled](https://github.com/alphagov/govuk-frontend/pull/1676).