Use inputmode="numeric" and pattern for relevant fields

We've done some investigation to show that now in certain
scenarios this is the best way of collecting numeric data from users. We have a
bunch of changes to make to roll this out in GOV.UK Frontend:
alphagov/govuk-frontend#1449 (comment)
After that, we can set this in the input component itself instead of using the
`attributes` object.

Following our above investigation, GOV.UK Pay introduced this change for
collecting credit card details:
alphagov/pay-frontend#921 They haven't seen
any issues so we are sufficiently confident to make the same change
in the Design System.

This is only applied to sort code and account number as the other data collected
is alphanumeric.

Tested on iOS 12 and 13, Android 9 and 8.

src/patterns/bank-details/default/index.njk

@@ -30,7 +30,9 @@ layout: layout-example.njk
   id: "sort-code",
   name: "sort-code",
   attributes: {
-    spellcheck: "false"
+    spellcheck: "false",
+    inputmode: "numeric",
+    pattern: "[0-9]*"
   }
 }) }}
 
@@ -45,7 +47,9 @@ layout: layout-example.njk
   id: "account-number",
   name: "account-number",
   attributes: {
-    spellcheck: "false"
+    spellcheck: "false",
+    inputmode: "numeric",
+    pattern: "[0-9]*"
   }
 }) }}
 

src/patterns/bank-details/error/index.njk

@@ -17,7 +17,9 @@ layout: layout-example.njk
   id: "sort-code",
   name: "sort-code",
   attributes: {
-    spellcheck: "false"
+    spellcheck: "false",
+    inputmode: "numeric",
+    pattern: "[0-9]*"
   },
   errorMessage: {
     text: "Enter a valid sort code like 309430"