Merge pull request #552 from alphagov/allow-autofocus-on-inputs

Allow autofocus on inputs

CHANGELOG.md

@@ -12,7 +12,7 @@
 * You can now use `GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment` to get the current environment, for use in the admin layout components (PR #548)
 * Update GOV.UK Frontend from 1.2.0 to 2.1.0 and manage breaking changes (PR #545)
 * Add navigation and meta links to footer component (PR #550)
-
+* Allow autofocus on input component (PR #552)
 
 ## 11.0.0
 

app/views/govuk_publishing_components/components/_input.html.erb

@@ -8,6 +8,8 @@
   label ||= nil
   hint ||= nil
   error_message ||= nil
+  autofocus ||= nil
+  tabindex ||= nil
   hint_id = "hint-#{SecureRandom.hex(4)}" if hint
   error_message_id = "error-message-#{SecureRandom.hex(4)}" if error_message
 
@@ -48,16 +50,16 @@
     } %>
   <% end %>
 
-  <%= text_field_tag name,
-    value,
-    {
+  <%= tag.input name: name,
+      value: value,
       class: css_classes,
       id: id,
       type: type,
       data: data,
+      tabindex: tabindex,
+      autofocus: autofocus,
       aria: {
         describedby: aria_described_by
       }
-    }
   %>
 <% end %>

app/views/govuk_publishing_components/components/docs/input.yml

@@ -13,6 +13,8 @@ accessibility_criteria: |
   * be of the appropriate type for their use, e.g. password inputs should be of type 'password'
 
   Labels use the [label component](/component-guide/label).
+
+  Avoid using autofocus and tabindex unless you have user research to support this behaviour.
 govuk_frontend_components:
   - input
 examples:
@@ -56,3 +58,10 @@ examples:
         text: "Search for"
       name: "name"
       value: "moose"
+  autofocused:
+    data:
+      label:
+        text: "Username"
+      name: "username"
+      autofocus: true
+      tabindex: 0

spec/components/input_spec.rb

@@ -73,6 +73,17 @@ def component_name
     assert_select ".govuk-input[data-module='contextual-guidance']"
   end
 
+  it "renders autofocused input" do
+    render_component(
+      label: { text: "Username" },
+      name: "username",
+      autofocus: true,
+      tabindex: 0
+    )
+
+    assert_select ".govuk-input[autofocus][tabindex='0']"
+  end
+
   context "when a hint is provided" do
     before do
       render_component(