Make password errors more accessible

bitzesty · Jul 18, 2023 · d8ed7cb · d8ed7cb
1 parent faec258
commit d8ed7cb
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 71 deletions.
diff --git a/app/assets/javascripts/frontend/password-strength-indicator.js b/app/assets/javascripts/frontend/password-strength-indicator.js
@@ -138,6 +138,7 @@ $(function() {
 
         if (someProblem) {
           $('#password-guidance').removeClass("govuk-!-display-none");
+          $('#password-result-span').addClass("visuallyhidden")
         } else {
           $('#password-guidance').addClass("govuk-!-display-none");
         }
@@ -147,8 +148,10 @@ $(function() {
 
         if ($passwordField.val().length == 0) {
           $passwordField.attr('aria-invalid', "true");
+          $('#password-result-span').addClass("visuallyhidden")
         } else if ($.inArray('good-password', guidance) >= 0) {
           $passwordField.attr('aria-invalid', "false");
+          $('#password-result-span').removeClass("visuallyhidden")
         } else {
           $passwordField.attr('aria-invalid', "true");
         }
@@ -160,13 +163,16 @@ $(function() {
 
         if ($passwordConfirmationField.val().length == 0) {
           $passwordConfirmationField.attr('aria-invalid', "true");
+          $('#password-confirmation-result-span').addClass("visuallyhidden")
         } else if ($.inArray('confirmation-not-matching', guidance) >= 0) {
           $passwordConfirmationField.attr('aria-invalid', "true");
           indicator.parent().removeClass('confirmation-matching');
+          $('#password-confirmation-result-span').addClass("visuallyhidden")
         } else if ($.inArray('confirmation-matching', guidance) >= 0) {
           $passwordConfirmationField.attr('aria-invalid', "false");
           if($.inArray('good-password', guidance) >= 0) {
             indicator.parent().addClass('confirmation-matching');
+            $('#password-confirmation-result-span').removeClass("visuallyhidden")
           }
         }
       }

diff --git a/app/assets/stylesheets/admin/_variables.scss b/app/assets/stylesheets/admin/_variables.scss
@@ -31,3 +31,4 @@ $header-hover: #444;
 $blue-link-colour: #3264A3;
 $govuk-light-blue: #5694ca;
 $govuk-highlight-yellow: #fd0;
+$govuk-warning-red: #d4351c;
diff --git a/app/views/admin/admins/_form.html.slim b/app/views/admin/admins/_form.html.slim
@@ -26,47 +26,41 @@
   .question-group#password-change-panel
     #password-control-group
       h3 = f.label :password, class: "form-label"
+      .guidance-panel.if-no-js-hide
+        .govuk-form-group--error#password-guidance
+          p.govuk-error-message.text-underline Please improve your password
+          p.govuk-error-message#password-too-short
+            ' It must be at least 10 characters.
+          p.govuk-error-message#parts-of-email It shouldn't include part or all of your email address.
+          p.govuk-error-message#password-entropy
+            ' It must be more complex. Consider using whole sentences (with spaces), lyrics or phrases to make it more memorable.
       .row
         .col-md-4.col-sm-6
           .input-group
             = f.input :password,
                       wrapper_html: { class: 'form-group' },
                       input_html: { class: 'form-control', "data-min-password-length" => "10" },
                       label: false
-            span#password-result-span.input-group-addon
+            span#password-result-span.input-group-addon.visuallyhidden
               i#password-result.glyphicon.glyphicon-ok
       .clear
 
-    .guidance-panel.if-no-js-hide
-      #password-guidance
-        br
-        .alert.alert-warning
-          p.text-underline Please improve your password
-          p#password-too-short
-            ' It must be at least 10 characters.
-          p#parts-of-email It shouldn't include part or all of your email address.
-          p#password-entropy
-            ' It must be more complex. Consider using whole sentences (with spaces), lyrics or phrases to make it more memorable.
-
     #password-confirmation-control-group
       h3 = f.label :password_confirmation, label: "Retype password", class: "form-label"
+      .if-no-js-hide
+        .govuk-form-group--error#password-confirmation-guidance
+          p.govuk-error-message#password-confirmation-match The confirmation must match the password
       .row
         .col-md-4.col-sm-6
           .input-group
             = f.input :password_confirmation,
                       wrapper_html: { class: 'form-group' },
                       input_html: { class: 'form-control' },
                       label: false
-            span#password-confirmation-result-span.input-group-addon
+            span#password-confirmation-result-span.input-group-addon.visuallyhidden
               i#password-confirmation-result.glyphicon.glyphicon-ok
       .clear
 
-    .if-no-js-hide
-      #password-confirmation-guidance
-        br
-        .alert.alert-warning
-          p#password-confirmation-match The confirmation must match the password
-
   br
   .row
     .col-md-4.col-sm-6

diff --git a/app/views/admin/assessors/_form.html.slim b/app/views/admin/assessors/_form.html.slim
@@ -42,46 +42,41 @@
   .question-group#password-change-panel
     #password-control-group
       h2 = f.label :password, class: "form-label"
+      .guidance-panel.if-no-js-hide
+        .govuk-form-group--error#password-guidance
+          p.govuk-error-message.text-underline Please improve your password
+          p.govuk-error-message#password-too-short
+            ' It must be at least 10 characters.
+          p.govuk-error-message#parts-of-email It shouldn't include part or all of your email address.
+          p.govuk-error-message#password-entropy
+            ' It must be more complex. Consider using whole sentences (with spaces), lyrics or phrases to make it more memorable.
       .row
         .col-md-4.col-sm-6
           .input-group
             = f.input :password,
                       wrapper_html: { class: 'form-group' },
                       input_html: { class: 'form-control' },
                       label: false
-            span#password-result-span.input-group-addon
+            span#password-result-span.input-group-addon.visuallyhidden
               i#password-result.glyphicon.glyphicon-ok
       .clear
-    .guidance-panel.if-no-js-hide
-      #password-guidance
-        br
-        .alert.alert-warning
-          p.text-underline Please improve your password
-          p#password-too-short
-            ' It must be at least 10 characters.
-          p#parts-of-email It shouldn't include part or all of your email address.
-          p#password-entropy
-            ' It must be more complex. Consider using whole sentences (with spaces), lyrics or phrases to make it more memorable.
 
     #password-confirmation-control-group
       h2 = f.label :password_confirmation, label: "Retype password", class: "form-label"
+      .if-no-js-hide
+        .govuk-form-group--error#password-confirmation-guidance
+          p.govuk-error-message#password-confirmation-match The confirmation must match the password
       .row
         .col-md-4.col-sm-6
           .input-group
             = f.input :password_confirmation,
                       wrapper_html: { class: 'form-group' },
                       input_html: { class: 'form-control' },
                       label: false
-            span#password-confirmation-result-span.input-group-addon
+            span#password-confirmation-result-span.input-group-addon.visuallyhidden
               i#password-confirmation-result.glyphicon.glyphicon-ok
       .clear
 
-    .if-no-js-hide
-      #password-confirmation-guidance
-        br
-        .alert.alert-warning
-          p#password-confirmation-match The confirmation must match the password
-
   br
 
   .row

diff --git a/app/views/admin/judges/_form.html.slim b/app/views/admin/judges/_form.html.slim
@@ -26,26 +26,25 @@
   .question-group#password-change-panel
     #password-control-group
       h3 = f.label :password, class: "form-label"
+      .guidance-panel.if-no-js-hide
+        .govuk-form-group--error#password-guidance
+          p.govuk-error-message.text-underline Please improve your password
+          p.govuk-error-message#password-too-short
+            ' It must be at least 10 characters.
+          p.govuk-error-message#parts-of-email It shouldn't include part or all of your email address.
+          p.govuk-error-message#password-entropy
+            ' It must be more complex. Consider using whole sentences (with spaces), lyrics or phrases to make it more memorable.
+
       .row
         .col-md-4.col-sm-6
           .input-group
             = f.input :password,
                       wrapper_html: { class: 'form-group' },
                       input_html: { class: 'form-control' },
                       label: false
-            span#password-result-span.input-group-addon
+            span#password-result-span.input-group-addon.visuallyhidden
               i#password-result.glyphicon.glyphicon-ok
       .clear
-    .guidance-panel.if-no-js-hide
-      #password-guidance
-        br
-        .alert.alert-warning
-          p.text-underline Please improve your password
-          p#password-too-short
-            ' It must be at least 10 characters.
-          p#parts-of-email It shouldn't include part or all of your email address.
-          p#password-entropy
-            ' It must be more complex. Consider using whole sentences (with spaces), lyrics or phrases to make it more memorable.
 
     #password-confirmation-control-group
       h3 = f.label :password_confirmation, label: "Retype password", class: "form-label"
@@ -56,15 +55,13 @@
                       wrapper_html: { class: 'form-group' },
                       input_html: { class: 'form-control' },
                       label: false
-            span#password-confirmation-result-span.input-group-addon
+            span#password-confirmation-result-span.input-group-addon.visuallyhidden
               i#password-confirmation-result.glyphicon.glyphicon-ok
       .clear
 
     .if-no-js-hide
-      #password-confirmation-guidance
-        br
-        .alert.alert-warning
-          p#password-confirmation-match The confirmation must match the password
+      .govuk-form-group--error#password-confirmation-guidance
+        p.govuk-error-message#password-confirmation-match The confirmation must match the password
 
   br
 

diff --git a/app/views/admin/users/_fields_password.html.slim b/app/views/admin/users/_fields_password.html.slim
@@ -18,41 +18,36 @@
       - else
         = f.label :password, label: "Password"
         - password_hint = ""
+    .guidance-panel.if-no-js-hide
+      .govuk-form-group--error#password-guidance
+        p.govuk-error-message.text-underline Please improve your password
+        p.govuk-error-message#password-too-short
+          ' It must be at least 10 characters.
+        p.govuk-error-message#parts-of-email It shouldn't include part or all of your email address.
+        p.govuk-error-message#password-entropy
+          ' It must be more complex. Consider using whole sentences (with spaces), lyrics or phrases to make it more memorable.
     .row
       .col-md-4.col-sm-6
         .input-group
           = f.input :password,
                     wrapper_html: { class: "form-group" },
                     input_html: { class: "form-control password-strength-meter" },
                     label_html: { class: "visuallyhidden" }
-          span#password-result-span.input-group-addon
+          span#password-result-span.input-group-addon.visuallyhidden
             i#password-result.glyphicon.glyphicon-ok
         span.hint = password_hint
 
-  .guidance-panel.if-no-js-hide
-    #password-guidance
-      .alert.alert-warning
-        p.text-underline Please improve your password
-        p#password-too-short
-          ' It must be at least 10 characters.
-        p#parts-of-email It shouldn't include part or all of your email address.
-        p#password-entropy
-          ' It must be more complex. Consider using whole sentences (with spaces), lyrics or phrases to make it more memorable.
-
   .question-group#password-confirmation-control-group
     h3 = f.label :password_confirmation, label: "Retype password"
+    .if-no-js-hide
+      .govuk-form-group--error#password-confirmation-guidance
+        p.govuk-error-message#password-confirmation-match The confirmation must match the password
     .row
       .col-md-4.col-sm-6
         .input-group
           = f.input :password_confirmation,
                     wrapper_html: { class: "form-group" },
                     input_html: { class: "form-control" },
                     label_html: { class: "visuallyhidden" }
-          span#password-confirmation-result-span.input-group-addon
+          span#password-confirmation-result-span.input-group-addon.visuallyhidden
             i#password-confirmation-result.glyphicon.glyphicon-ok
-
-  .if-no-js-hide
-    #password-confirmation-guidance
-      br
-      .alert.alert-warning
-        p#password-confirmation-match The confirmation must match the password