Improve the password input component custom text feature

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 %>
   </div>
 <% end %>

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`.

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

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