diff --git a/app/views/govuk_publishing_components/components/_password_input.html.erb b/app/views/govuk_publishing_components/components/_password_input.html.erb index 4eed60acbb..997c38c022 100644 --- a/app/views/govuk_publishing_components/components/_password_input.html.erb +++ b/app/views/govuk_publishing_components/components/_password_input.html.erb @@ -6,9 +6,24 @@ error_text ||= nil error_text_prefix ||= t("components.password_input.error_text_prefix") + button_show_password_aria_label ||= t("components.password_input.button_aria_label") + button_hide_password_aria_label ||= t("components.password_input.button_aria_hide_label") + button_show_password_text ||= t("components.password_input.button") + button_hide_password_text ||= t("components.password_input.button_hide") + password_shown_announcement ||= t("components.password_input.password_shown_announcement") + password_hidden_announcement ||= t("components.password_input.password_hidden_announcement") + shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) - component_helper.add_data_attribute({ module: "govuk-password-input" }) + component_helper.add_data_attribute({ + module: "govuk-password-input", + "i18n.show-password": button_show_password_text, + "i18n.hide-password": button_hide_password_text, + "i18n.show-password-aria-label": button_show_password_aria_label, + "i18n.hide-password-aria-label": button_hide_password_aria_label, + "i18n.password-shown-announcement": password_shown_announcement, + "i18n.password-hidden-announcement": password_hidden_announcement, + }) component_helper.add_class('govuk-form-group') component_helper.add_class('govuk-form-group--error') if error_text component_helper.add_class('govuk-password-input') @@ -34,7 +49,6 @@ aria_controls << '-with-error-message' paragraph_id = uid + '-password-input-with-error-message-error' end - %> <%= tag.div(**component_helper.all_attributes) do %> @@ -70,9 +84,9 @@ hidden: true, aria: { controls: aria_controls, - label: t("components.password_input.button_aria_label") + label: button_show_password_aria_label }) do %> - <%= t("components.password_input.button") %> + <%= button_show_password_text %> <% end %> <% end %> diff --git a/app/views/govuk_publishing_components/components/docs/password_input.yml b/app/views/govuk_publishing_components/components/docs/password_input.yml index 9103fbb5b2..e4e7ee5df4 100644 --- a/app/views/govuk_publishing_components/components/docs/password_input.yml +++ b/app/views/govuk_publishing_components/components/docs/password_input.yml @@ -33,11 +33,26 @@ examples: data: error_text: Enter a password with_custom_label_and_error_text: - description: For translations or other purposes, the text presented to the user in this component can be changed. Note that the error text prefix is hidden visually and used by assistive tools when there is an error. By default, the prefix is "Error". + description: | + For translations or other purposes, the text presented to the user in this component can be changed. + + Note that the error text prefix and announcements are hidden visually and used by assistive tools when there is an error. + + By default, the error prefix is "Error". + + By default, the password shown announcement is "Your password is visible". + + By default, the password hidden announcement is "Your password is hidden". data: label_text: Secret number error_text_prefix: Incompatible error_text: 6 is scared of 7, so they can't be next to each other. + button_show_password_aria_label: View password + button_hide_password_aria_label: Obscure password + button_show_password_text: View + button_hide_password_text: Obscure + password_shown_announcement: Secret number is in view + password_hidden_announcement: Secret number is obscured with_margin_bottom: description: | The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of `30px`. diff --git a/config/locales/en.yml b/config/locales/en.yml index 3e7f9926c0..3664b609bc 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -253,10 +253,14 @@ en: organisation_schema: all_content_search_description: Find all content from %{organisation} password_input: - label: "Password" - button: "Show" - button_aria_label: "Show password" - error_text_prefix: "Error" + label: Password + button: Show + button_hide: Hide + button_aria_label: Show password + button_aria_hide_label: Hide password + password_shown_announcement: Your password is visible + password_hidden_announcement: Your password is hidden + error_text_prefix: Error previous_and_next_navigation: next: Next pagination: Pagination diff --git a/spec/components/password_input_spec.rb b/spec/components/password_input_spec.rb index 06e78cd7f4..4426e80e49 100644 --- a/spec/components/password_input_spec.rb +++ b/spec/components/password_input_spec.rb @@ -18,6 +18,16 @@ def component_name assert_select "p#1234-password-input-with-error-message-error", false assert_select "div.govuk-password-input input.govuk-input--error", false assert_select "div.govuk-form-group--error", false + + # As the following data attributes contain period symbols, we must use an alternative to assert_select. + html = Nokogiri::HTML(rendered) + password_input_component = html.at(".govuk-password-input") + expect(password_input_component.attr("data-i18n.show-password")).to eql("Show") + expect(password_input_component.attr("data-i18n.hide-password")).to eql("Hide") + expect(password_input_component.attr("data-i18n.show-password-aria-label")).to eql("Show password") + expect(password_input_component.attr("data-i18n.hide-password-aria-label")).to eql("Hide password") + expect(password_input_component.attr("data-i18n.password-shown-announcement")).to eql("Your password is visible") + expect(password_input_component.attr("data-i18n.password-hidden-announcement")).to eql("Your password is hidden") end it "renders a password input with extra classes and a paragraph when error_text is passed" do @@ -35,9 +45,26 @@ def component_name label_text: "Secret number", error_text_prefix: "Incompatible", error_text: "6 is scared of 7, so they can't be next to each other.", + button_show_password_aria_label: "View password", + button_hide_password_aria_label: "Obscure password", + button_show_password_text: "View", + button_hide_password_text: "Obscure", + password_shown_announcement: "Password is in view", + password_hidden_announcement: "Password is obscured", }) assert_select "div.govuk-password-input label", "Secret number" assert_select "p#1234-password-input-with-error-message-error", "Incompatible: 6 is scared of 7, so they can't be next to each other." + assert_select "div.govuk-password-input button", "View" + + # As the following data attributes contain period symbols, we must use an alternative to assert_select. + html = Nokogiri::HTML(rendered) + password_input_component = html.at(".govuk-password-input") + expect(password_input_component.attr("data-i18n.show-password")).to eql("View") + expect(password_input_component.attr("data-i18n.hide-password")).to eql("Obscure") + expect(password_input_component.attr("data-i18n.show-password-aria-label")).to eql("View password") + expect(password_input_component.attr("data-i18n.hide-password-aria-label")).to eql("Obscure password") + expect(password_input_component.attr("data-i18n.password-shown-announcement")).to eql("Password is in view") + expect(password_input_component.attr("data-i18n.password-hidden-announcement")).to eql("Password is obscured") end it "accepts margin_bottom values" do