Update date input to type=text, inputmode=numeric

Within the date input component the individual inputs look like this:

```
<input […] type="number" pattern="[0-9]*">
```

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 `<input […] type="text" inputmode="numeric" pattern="[0-9]*">` 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]: #1449 (comment)
[4]: #1449 (comment)
[5]: http://bradfrost.com/blog/post/you-probably-dont-need-input-typenumber/
[6]: alphagov/reported-bugs#41
[7]: nvaccess/nvda#9675 (comment)
[8]: alphagov/reported-bugs#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 <colin@htmlandbacon.com>

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

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', () => {