PP-5366 - use inputmode and pattern attribute on numeric fields

The Design System team have done some accessibility testing on `input type="number"` and deemed them problematic. They have suggested using `input type="text" inputmode="numeric" pattern="[0-9]*"` instead as documented here alphagov/govuk-frontend#1449
alphagov · Jun 25, 2019 · e9917ba · e9917ba
1 parent f2de5e5
commit e9917ba
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 4 deletions.
diff --git a/app/views/dashboard/demo-payment/edit-amount.njk b/app/views/dashboard/demo-payment/edit-amount.njk
@@ -30,6 +30,8 @@
             autofocus
             data-non-numeric
             type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
             id="payment-amount"
             value="{{ paymentAmount | penceToPounds }}"
             data-validate="required currency belowMaxAmount"

diff --git a/app/views/login/otp-login.njk b/app/views/login/otp-login.njk
@@ -54,7 +54,9 @@
         type: "text",
         attributes: {
           "autofocus": "true",
-          "autocomplete": "off"
+          "autocomplete": "off",
+          "inputmode": "numeric",
+          "pattern": "[0-9]*"
         }
       })
     }}

diff --git a/app/views/payment-links/amount.njk b/app/views/payment-links/amount.njk
@@ -44,6 +44,8 @@
             autofocus
             data-non-numeric
             type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
             id="payment-amount"
             value="{{ paymentLinkAmount | penceToPounds if paymentLinkAmount else '' }}"
             data-trim

diff --git a/app/views/payment-links/edit-amount.njk b/app/views/payment-links/edit-amount.njk
@@ -43,6 +43,8 @@
             autofocus
             data-non-numeric
             type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
             id="payment-amount"
             value="{{ product.price | penceToPounds if product.price else '' }}"
             data-trim

diff --git a/app/views/stripe-setup/bank-details/index.njk b/app/views/stripe-setup/bank-details/index.njk
@@ -54,7 +54,9 @@
         errorMessage: accountNumberError,
         attributes: {
           "data-validate": "required accountNumber",
-          "autocomplete": "off"
+          "autocomplete": "off",
+          "inputmode": "numeric",
+          "pattern": "[0-9]*"
         }
       }) }}
 
@@ -77,7 +79,9 @@
         errorMessage: sortCodeError,
         attributes: {
           "data-validate": "required sortCode",
-          "autocomplete": "off"
+          "autocomplete": "off",
+          "inputmode": "numeric",
+          "pattern": "[0-9]*"
         }
       }) }}
 

diff --git a/app/views/transactions/filter.njk b/app/views/transactions/filter.njk
@@ -72,6 +72,11 @@
           hint: {
             text: 'Last 4 digits of associated card',
             classes: 'govuk-!-font-size-14'
+          },
+          attributes: {
+            "autocomplete": "off",
+            "inputmode": "numeric",
+            "pattern": "[0-9]*"
           }
         })
       }}

diff --git a/app/views/twoFactorAuth/configure.njk b/app/views/twoFactorAuth/configure.njk
@@ -76,7 +76,9 @@
         attributes: {
           "data-validate": "required",
           "autocomplete": "off",
-          "autofocus": true
+          "autofocus": true,
+          "inputmode": "numeric",
+          "pattern": "[0-9]*"
         }
       })
     }}