Skip to content

Commit

Permalink
PP-5366 - use inputmode and pattern attribute on numeric fields
Browse files Browse the repository at this point in the history
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
  • Loading branch information
jonheslop committed Jun 25, 2019
1 parent b62f3d4 commit 615d6bf
Showing 1 changed file with 12 additions and 6 deletions.
18 changes: 12 additions & 6 deletions app/views/charge.njk
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,9 @@
{% endif %}
</label>
<input id="card-no"
type="tel"
type="text"
inputmode="numeric"
pattern="[0-9]*"
name="cardNo"
maxlength="26"
class="govuk-input govuk-!-width-three-quarters"
Expand Down Expand Up @@ -178,12 +180,12 @@
<label class="govuk-label govuk-date-input__label" for="expiry-month">{{ __p("cardDetails.expiryMonth") }}</label>
<input
id="expiry-month"
type="number"
type="text"
inputmode="numeric"
pattern="[0-9]*"
name="expiryMonth"
value="{{expiryMonth}}"
class="govuk-input govuk-date-input__input govuk-input--width-3"
min="1"
max="12"
minlength="1"
maxlength="2"
autocomplete="cc-exp-month"/>
Expand All @@ -192,7 +194,9 @@
<label for="expiry-year" class="govuk-label govuk-date-input__label">{{ __p("cardDetails.expiryYear") }}</label>
<input
id="expiry-year"
type="number"
type="text"
inputmode="numeric"
pattern="[0-9]*"
name="expiryYear"
value="{{expiryYear}}"
minlength="2"
Expand Down Expand Up @@ -254,7 +258,9 @@
{% endif %}
</label>
<input id="cvc"
type="number"
type="text"
inputmode="numeric"
pattern="[0-9]*"
value="{{cvc}}"
name="cvc"
class="govuk-input govuk-input--width-3 cvc"
Expand Down

0 comments on commit 615d6bf

Please sign in to comment.