diff --git a/CHANGELOG.md b/CHANGELOG.md index c7849df8bd..bf41ee2ab8 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/app/views/govuk_publishing_components/components/_input.html.erb b/app/views/govuk_publishing_components/components/_input.html.erb index 80dffab9fb..f52a82852b 100644 --- a/app/views/govuk_publishing_components/components/_input.html.erb +++ b/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 %> diff --git a/app/views/govuk_publishing_components/components/docs/input.yml b/app/views/govuk_publishing_components/components/docs/input.yml index 8084b9c1e7..c6eae2e2bf 100644 --- a/app/views/govuk_publishing_components/components/docs/input.yml +++ b/app/views/govuk_publishing_components/components/docs/input.yml @@ -56,3 +56,10 @@ examples: text: "Search for" name: "name" value: "moose" + autofocused: + data: + label: + text: "Username" + name: "username" + autofocus: true + tabindex: 0 diff --git a/spec/components/input_spec.rb b/spec/components/input_spec.rb index 0b1988d3f1..d6446da66f 100644 --- a/spec/components/input_spec.rb +++ b/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(