Merge pull request #1947 from alphagov/show-password-fixes

Show password fixes

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## 24.3.1
 
+* Show password fixes ([PR #1947](https://github.com/alphagov/govuk_publishing_components/pull/1947))
 * Switch from `trackClick` to `gemTrackClick` script ([PR #1944](https://github.com/alphagov/govuk_publishing_components/pull/1944))
 * Add spacing to cookie banner confirmation message ([PR #1936](https://github.com/alphagov/govuk_publishing_components/pull/1936))
 * Fix Sass warning for extending a compound selector ([PR #1933](https://github.com/alphagov/govuk_publishing_components/pull/1933))

app/assets/javascripts/govuk_publishing_components/components/show-password.js

@@ -11,8 +11,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.revertToPasswordOnFormSubmit = this.revertToPasswordOnFormSubmit.bind(this)
     this.input.classList.add('gem-c-input--with-password')
 
-    this.showPasswordText = this.$module.getAttribute('data-show')
-    this.hidePasswordText = this.$module.getAttribute('data-hide')
+    this.showPasswordText = this.$module.getAttribute('data-show-text')
+    this.hidePasswordText = this.$module.getAttribute('data-hide-text')
+    this.showPasswordFullText = this.$module.getAttribute('data-show-full-text')
+    this.hidePasswordFullText = this.$module.getAttribute('data-hide-full-text')
     this.shownPassword = this.$module.getAttribute('data-announce-show')
     this.hiddenPassword = this.$module.getAttribute('data-announce-hide')
 
@@ -27,6 +29,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.showHide.className = 'gem-c-show-password__toggle'
     this.showHide.setAttribute('aria-controls', this.input.getAttribute('id'))
     this.showHide.setAttribute('type', 'button')
+    this.showHide.setAttribute('aria-label', this.showPasswordFullText)
     this.showHide.innerHTML = this.showPasswordText
     this.wrapper.insertBefore(this.showHide, this.input.nextSibling)
 
@@ -50,12 +53,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   ShowPassword.prototype.togglePassword = function (event) {
     event.preventDefault()
     this.showHide.innerHTML = this.showHide.innerHTML === this.showPasswordText ? this.hidePasswordText : this.showPasswordText
+    this.showHide.setAttribute('aria-label', this.showHide.getAttribute('aria-label') === this.showPasswordFullText ? this.hidePasswordFullText : this.showPasswordFullText)
     this.statusText.innerHTML = this.statusText.innerHTML === this.shownPassword ? this.hiddenPassword : this.shownPassword
     this.input.setAttribute('type', this.input.getAttribute('type') === 'text' ? 'password' : 'text')
   }
 
   ShowPassword.prototype.revertToPasswordOnFormSubmit = function (event) {
     this.showHide.innerHTML = this.showPasswordText
+    this.showHide.setAttribute('aria-label', this.showPasswordFullText)
     this.statusText.innerHTML = this.hiddenPassword
     this.input.setAttribute('type', 'password')
   }

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

@@ -19,10 +19,12 @@
     data: {
       module: "show-password",
       disable_form_submit_check: disable_form_submit_check,
-      show: t('components.input.show'),
-      hide: t('components.input.hide'),
-      announce_show: t('components.input.announce_show'),
-      announce_hide: t('components.input.announce_hide')
+      show_text: t('components.show_password.show'),
+      hide_text: t('components.show_password.hide'),
+      show_full_text: t('components.show_password.show_password'),
+      hide_full_text: t('components.show_password.hide_password'),
+      announce_show: t('components.show_password.announce_show'),
+      announce_hide: t('components.show_password.announce_hide')
     } do %>
       <%= render "govuk_publishing_components/components/input", {
         label: label,

config/locales/en.yml

@@ -54,11 +54,6 @@ en:
       what_wrong: "What went wrong?"
       send_me_survey: "Send me the survey"
       send: "Send"
-    input:
-      show: Show
-      hide: Hide
-      announce_show: Your password is shown
-      announce_hide: Your password is hidden
     organisation_schema:
       all_content_search_description: "Find all content from %{organisation}"
     radio:
@@ -90,6 +85,13 @@ en:
       policies: "Policies"
       statistical_data_sets: "Statistical data sets"
       topical_events: "Topical events"
+    show_password:
+      show: Show
+      hide: Hide
+      show_password: Show password
+      hide_password: Hide password
+      announce_show: Your password is shown
+      announce_hide: Your password is hidden
     print_link:
       text: "Print this page"
     skip_link:

spec/components/show_password_spec.rb

@@ -19,8 +19,10 @@ def component_name
     )
 
     assert_select(".gem-c-show-password[data-module='show-password']")
-    assert_select(".gem-c-show-password[data-show='Show']")
-    assert_select(".gem-c-show-password[data-hide='Hide']")
+    assert_select(".gem-c-show-password[data-show-text='Show']")
+    assert_select(".gem-c-show-password[data-hide-text='Hide']")
+    assert_select(".gem-c-show-password[data-show-full-text='Show password']")
+    assert_select(".gem-c-show-password[data-hide-full-text='Hide password']")
     assert_select(".gem-c-show-password[data-announce-show='Your password is shown']")
     assert_select(".gem-c-show-password[data-announce-hide='Your password is hidden']")
     assert_select(".gem-c-input[autocomplete='off']")

spec/javascripts/components/show-password-spec.js

@@ -7,7 +7,7 @@ describe('A show password component', function () {
   describe('in password reveal mode', function () {
     beforeEach(function () {
       element = $(
-        '<div class="gem-c-show-password" data-module="show-password" data-disable-form-submit-check="false" data-show="Show" data-hide="Hide" data-announce-show="Your password is shown" data-announce-hide="Your password is hidden">' +
+        '<div class="gem-c-show-password" data-module="show-password" data-disable-form-submit-check="false" data-show-text="Show" data-hide-text="Hide" data-show-full-text="Show password" data-hide-full-text="Hide password" data-announce-show="Your password is shown" data-announce-hide="Your password is hidden">' +
           '<div class="govuk-form-group">' +
             '<label for="input" class="gem-c-label govuk-label">Please enter your password</label>' +
             '<input name="password" value="this is my password" class="gem-c-input govuk-input" id="input" type="password" autocomplete="off">' +
@@ -26,6 +26,7 @@ describe('A show password component', function () {
       expect(element.find('.gem-c-input.gem-c-input--with-password').length).toBe(1)
       expect(element.find('.gem-c-show-password__toggle').length).toBe(1)
       expect(element.find('.gem-c-show-password__toggle').text()).toBe('Show')
+      expect(element.find('.gem-c-show-password__toggle').attr('aria-label')).toBe('Show password')
       expect(element.find('.gem-c-show-password__toggle').attr('aria-controls')).toBe('input')
       expect(element.find('.gem-c-show-password__toggle').attr('type')).toBe('button')
       expect(element.find('.govuk-visually-hidden').length).toBe(1)
@@ -36,6 +37,7 @@ describe('A show password component', function () {
       element.find('.gem-c-show-password__toggle').trigger('click')
 
       expect(element.find('.gem-c-show-password__toggle').text()).toBe('Hide')
+      expect(element.find('.gem-c-show-password__toggle').attr('aria-label')).toBe('Hide password')
       expect(element.find('input[name="password"]').attr('type')).toBe('text')
       expect(element.find('.govuk-visually-hidden').text()).toBe('Your password is shown')
     })
@@ -45,6 +47,7 @@ describe('A show password component', function () {
       element.find('.gem-c-show-password__toggle').trigger('click')
 
       expect(element.find('.gem-c-show-password__toggle').text()).toBe('Show')
+      expect(element.find('.gem-c-show-password__toggle').attr('aria-label')).toBe('Show password')
       expect(element.find('input[name="password"]').attr('type')).toBe('password')
       expect(element.find('.govuk-visually-hidden').text()).toBe('Your password is hidden')
     })
@@ -54,7 +57,7 @@ describe('A show password component', function () {
     beforeEach(function () {
       element = $(
         '<form>' +
-          '<div class="gem-c-show-password" data-module="show-password" data-show="Show" data-hide="Hide" data-announce-show="Your password is shown" data-announce-hide="Your password is hidden">' +
+          '<div class="gem-c-show-password" data-module="show-password" data-show-text="Show" data-hide-text="Hide" data-show-full-text="Show password" data-hide-full-text="Hide password" data-announce-show="Your password is shown" data-announce-hide="Your password is hidden">' +
             '<div class="govuk-form-group">' +
               '<label for="input" class="gem-c-label govuk-label">Please enter your password</label>' +
               '<input name="password" value="this is my password" class="gem-c-input govuk-input" id="input" type="password" autocomplete="off">' +
@@ -81,6 +84,7 @@ describe('A show password component', function () {
 
       element.find('button[type="submit"]').click()
       expect(element.find('.gem-c-show-password__toggle').text()).toBe('Show')
+      expect(element.find('.gem-c-show-password__toggle').attr('aria-label')).toBe('Show password')
       expect(element.find('input[name="password"]').attr('type')).toBe('password')
       expect(element.find('.govuk-visually-hidden').text()).toBe('Your password is hidden')
     })
@@ -90,7 +94,7 @@ describe('A show password component', function () {
     beforeEach(function () {
       element = $(
         '<form>' +
-          '<div class="gem-c-show-password" data-module="show-password" data-disable-form-submit-check="true" data-show="Show" data-hide="Hide" data-announce-show="Your password is shown" data-announce-hide="Your password is hidden">' +
+          '<div class="gem-c-show-password" data-module="show-password" data-disable-form-submit-check="true" data-show-text="Show" data-hide-text="Hide" data-show-full-text="Show password" data-hide-full-text="Hide password" data-announce-show="Your password is shown" data-announce-hide="Your password is hidden">' +
             '<div class="govuk-form-group">' +
               '<label for="input" class="gem-c-label govuk-label">Please enter your password</label>' +
               '<input name="password" value="this is my password" class="gem-c-input govuk-input" id="input" type="password" autocomplete="off">' +
@@ -117,6 +121,7 @@ describe('A show password component', function () {
 
       element.find('button[type="submit"]').click()
       expect(element.find('.gem-c-show-password__toggle').text()).toBe('Hide')
+      expect(element.find('.gem-c-show-password__toggle').attr('aria-label')).toBe('Hide password')
       expect(element.find('input[name="password"]').attr('type')).toBe('text')
       expect(element.find('.govuk-visually-hidden').text()).toBe('Your password is shown')
     })