Rename translation strings, implement data attribute config

alphagov · Dec 19, 2023 · 91c2b65 · 91c2b65
1 parent bbcc901
commit 91c2b65
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/password-input/password-input.mjs b/packages/govuk-frontend/src/govuk/components/password-input/password-input.mjs
@@ -65,7 +65,7 @@ export class PasswordInput extends GOVUKFrontendComponent {
 
     this.config = mergeConfigs(
       PasswordInput.defaults,
-      config || {},
+      config,
       normaliseDataset($module.dataset)
     )
 
@@ -91,7 +91,7 @@ export class PasswordInput extends GOVUKFrontendComponent {
     $showHideButton.setAttribute('type', 'button')
     $showHideButton.setAttribute(
       'aria-label',
-      this.i18n.t('showPasswordFullText')
+      this.i18n.t('showPasswordAriaLabel')
     )
     $showHideButton.innerHTML = this.i18n.t('showPassword')
     this.$showHideButton = $showHideButton
@@ -100,7 +100,7 @@ export class PasswordInput extends GOVUKFrontendComponent {
     // Create and append the status text for screen readers
     const $statusText = document.createElement('span')
     $statusText.className = 'govuk-visually-hidden'
-    $statusText.innerText = this.i18n.t('hiddenPasswordAnnouncement')
+    $statusText.innerText = this.i18n.t('passwordHiddenAnnouncement')
     $statusText.setAttribute('aria-live', 'polite')
     this.$statusText = $statusText
     this.$wrapper.insertBefore($statusText, this.$input.nextSibling)
@@ -135,12 +135,12 @@ export class PasswordInput extends GOVUKFrontendComponent {
     this.$showHideButton.setAttribute(
       'aria-label',
       passwordIsHidden
-        ? this.i18n.t('showPasswordFullText')
-        : this.i18n.t('hidePasswordFullText')
+        ? this.i18n.t('showPasswordAriaLabel')
+        : this.i18n.t('hidePasswordAriaLabel')
     )
     this.$statusText.innerText = passwordIsHidden
-      ? this.i18n.t('hiddenPasswordAnnouncement')
-      : this.i18n.t('shownPasswordAnnouncement')
+      ? this.i18n.t('passwordHiddenAnnouncement')
+      : this.i18n.t('passwordShownAnnouncement')
   }
 
   /**
@@ -150,10 +150,10 @@ export class PasswordInput extends GOVUKFrontendComponent {
   revertToPasswordOnFormSubmit() {
     this.$showHideButton.setAttribute(
       'aria-label',
-      this.i18n.t('showPasswordFullText')
+      this.i18n.t('showPasswordAriaLabel')
     )
     this.$showHideButton.innerHTML = this.i18n.t('showPassword')
-    this.$statusText.innerText = this.i18n.t('hiddenPasswordAnnouncement')
+    this.$statusText.innerText = this.i18n.t('passwordHiddenAnnouncement')
     this.$input.setAttribute('type', 'password')
   }
 
@@ -175,10 +175,10 @@ export class PasswordInput extends GOVUKFrontendComponent {
     i18n: {
       showPassword: 'Show',
       hidePassword: 'Hide',
-      showPasswordFullText: 'Show password',
-      hidePasswordFullText: 'Hide password',
-      shownPasswordAnnouncement: 'Your password is visible',
-      hiddenPasswordAnnouncement: 'Your password is hidden'
+      showPasswordAriaLabel: 'Show password',
+      hidePasswordAriaLabel: 'Hide password',
+      passwordShownAnnouncement: 'Your password is visible',
+      passwordHiddenAnnouncement: 'Your password is hidden'
     }
   })
 
@@ -212,14 +212,14 @@ export class PasswordInput extends GOVUKFrontendComponent {
  *   password is currently hidden. HTML is acceptable.
  * @property {string} [hidePassword] - Visible text of the button when the
  *   password is currently visible. HTML is acceptable.
- * @property {string} [showPasswordFullText] - aria-label of the button when
+ * @property {string} [showPasswordAriaLabel] - aria-label of the button when
  *   the password is currently hidden. Plain text only.
- * @property {string} [hidePasswordFullText] - aria-label of the button when
+ * @property {string} [hidePasswordAriaLabel] - aria-label of the button when
  *   the password is currently visible. Plain text only.
- * @property {string} [shownPasswordAnnouncement] - Screen reader
+ * @property {string} [passwordShownAnnouncement] - Screen reader
  *   announcement to make when the password has just become visible.
  *   Plain text only.
- * @property {string} [hiddenPasswordAnnouncement] - Screen reader
+ * @property {string} [passwordHiddenAnnouncement] - Screen reader
  *   announcement to make when the password has just been hidden.
  *   Plain text only.
  */

diff --git a/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml b/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml
@@ -45,3 +45,15 @@ examples:
       newPassword: true
       id: password-input-new-password
       name: password
+  - name: with translations
+    options:
+      label:
+        text: Cyfrinair
+      id: password-translated
+      name: password-translated
+      showPasswordText: Datguddia
+      hidePasswordText: Cuddio
+      showPasswordAriaLabelText: Datgelu cyfrinair
+      hidePasswordAriaLabelText: Cuddio cyfrinair
+      passwordShownAnnouncementText: Mae eich cyfrinair yn weladwy.
+      passwordHiddenAnnouncementText: Mae eich cyfrinair wedi'i guddio.
diff --git a/packages/govuk-frontend/src/govuk/components/password-input/template.njk b/packages/govuk-frontend/src/govuk/components/password-input/template.njk
@@ -1,3 +1,5 @@
+{% from "../../macros/i18n.njk" import govukI18nAttributes %}
+
 {% from "../error-message/macro.njk" import govukErrorMessage -%}
 {% from "../hint/macro.njk" import govukHint %}
 {% from "../label/macro.njk" import govukLabel %}
@@ -39,7 +41,14 @@
   }) | indent(2) | trim }}
 {% endif %}
 
-  <div class="govuk-password-input" data-module="govuk-password-input">
+  <div class="govuk-password-input" data-module="govuk-password-input"
+    {%- if params.disableFormSubmitCheck %} data-disable-form-submit-check="true"{% endif %}
+    {{- govukI18nAttributes({ key: 'show-password', message: params.showPasswordText }) -}}
+    {{- govukI18nAttributes({ key: 'hide-password', message: params.hidePasswordText }) -}}
+    {{- govukI18nAttributes({ key: 'show-password-aria-label', message: params.showPasswordAriaLabelText }) -}}
+    {{- govukI18nAttributes({ key: 'hide-password-aria-label', message: params.hidePasswordAriaLabelText }) -}}
+    {{- govukI18nAttributes({ key: 'password-shown-announcement', message: params.passwordShownAnnouncementText }) -}}
+    {{- govukI18nAttributes({ key: 'password-hidden-announcement', message: params.passwordHiddenAnnouncementText }) -}}>
 
     <input
       class="govuk-input govuk-password-input__input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}"