Change date inputs to use text instead of number

This bug[0] highlights several usability problems with using
`type='number'` on the date segment inputs. This change addresses these
problems at the expense of removing some client-side validation.

[0] alphagov/govuk-frontend#1449

lib/govuk_design_system_formbuilder/builder.rb

@@ -405,7 +405,7 @@ def govuk_submit(text = 'Continue', warning: false, secondary: false, prevent_do
       Elements::Submit.new(self, text, warning: warning, secondary: secondary, prevent_double_click: prevent_double_click, &block).html
     end
 
-    # Generates three number inputs for the +day+, +month+ and +year+ components of a date
+    # Generates three inputs for the +day+, +month+ and +year+ components of a date
     #
     # @note When using this input be aware that Rails's multiparam time and date handling falls foul
     #   of {https://bugs.ruby-lang.org/issues/5988 this} bug, so incorrect dates like +2019-09-31+ will
@@ -421,6 +421,8 @@ def govuk_submit(text = 'Continue', warning: false, secondary: false, prevent_do
     #   will be added to the inputs
     # @return [ActiveSupport::SafeBuffer] HTML output
     #
+    # @see https://github.com/alphagov/govuk-frontend/issues/1449 GOV.UK date input element attributes, using text instead of number
+    #
     # @example A regular date input with a legend and hint
     #   = f.govuk_date_field :starts_on,
     #     legend: { 'When does your event start?' },

lib/govuk_design_system_formbuilder/elements/date.rb

@@ -25,10 +25,9 @@ def html
                 @builder.content_tag('div', class: 'govuk-date-input') do
                   @builder.safe_join(
                     [
-                      date_input_group(:day, min: 1, max: 31),
-                      date_input_group(:month, min: 1, max: 12),
-                      # FIXME there must be more sensible defaults than this!
-                      date_input_group(:year, min: 1900, max: 2100, width: 4)
+                      date_input_group(:day),
+                      date_input_group(:month),
+                      date_input_group(:year, width: 4)
                     ]
                   )
                 end
@@ -40,7 +39,7 @@ def html
 
     private
 
-      def date_input_group(segment, min:, max:, width: 2)
+      def date_input_group(segment, width: 2)
         value = @builder.object.try(@attribute_name).try(segment)
 
         @builder.content_tag('div', class: %w(govuk-date-input__item)) do
@@ -57,10 +56,9 @@ def date_input_group(segment, min:, max:, width: 2)
                   id: date_attribute_descriptor(segment),
                   class: date_input_classes(width),
                   name: date_attribute_identifier(segment),
-                  type: 'number',
-                  min: min,
-                  max: max,
-                  step: 1,
+                  type: 'text',
+                  pattern: '[0-9]*',
+                  inputmode: 'numeric',
                   value: value,
                   autocomplete: date_of_birth_autocomplete_value(segment)
                 )

spec/govuk_design_system_formbuilder/builder/date_spec.rb

@@ -24,7 +24,7 @@
       expect(subject).to have_tag('div', with: { class: 'govuk-form-group' }) do |fg|
         expect(fg).to have_tag('div', with: { class: 'govuk-fieldset'}) do |fs|
           expect(fs).to have_tag('div', with: { class: 'govuk-date-input' }) do |di|
-            expect(di).to have_tag('input', with: { type: 'number' }, count: 3)
+            expect(di).to have_tag('input', with: { type: 'text' }, count: 3)
             expect(di).to have_tag('label', count: 3)
           end
         end
@@ -46,17 +46,13 @@
         end
       end
 
-      context 'min and max' do
-        specify 'day should allow values of 1-31' do
-          expect(subject).to have_tag('input', with: { id: day_identifier, min: 1, max: 31 })
+      context 'attributes' do
+        specify 'inputs should have a pattern that restricts entries to numbers' do
+          expect(subject).to have_tag('input', with: { pattern: '[0-9]*' })
         end
 
-        specify 'month should allow values of 1-12' do
-          expect(subject).to have_tag('input', with: { id: month_identifier, min: 1, max: 12 })
-        end
-
-        specify 'year should allow values of 1900-2100' do
-          expect(subject).to have_tag('input', with: { id: year_identifier, min: 1900, max: 2100 })
+        specify 'inputs should have an inputmode of numeric' do
+          expect(subject).to have_tag('input', with: { inputmode: 'numeric' })
         end
       end
     end