From b2bd2295b8b65af19142ca97e5c65d94a0d38e1d Mon Sep 17 00:00:00 2001
From: Adeel Khan <muhammad.adeel@arbisoft.com>
Date: Wed, 17 Mar 2021 18:20:42 +0500
Subject: [PATCH] Adds aria-invalid to fields.

This would enable screen readers to readout
fields errors to users.

VAN-387
---
 .../AuthnValidationFormGroup.jsx               |  3 +++
 src/forgot-password/ForgotPasswordPage.jsx     |  1 +
 .../ForgotPasswordPage.test.jsx.snap           |  3 +++
 src/login/LoginPage.jsx                        |  2 ++
 .../__snapshots__/LoginPage.test.jsx.snap      | 10 ++++++++++
 src/register/RegistrationPage.jsx              |  5 +++++
 .../RegistrationPage.test.jsx.snap             | 18 ++++++++++++++++++
 src/reset-password/ResetPasswordPage.jsx       |  2 ++
 .../ResetPasswordPage.test.jsx.snap            |  8 ++++++++
 9 files changed, 52 insertions(+)

diff --git a/src/common-components/AuthnValidationFormGroup.jsx b/src/common-components/AuthnValidationFormGroup.jsx
index 9a6bebc5..97f9c4ae 100644
--- a/src/common-components/AuthnValidationFormGroup.jsx
+++ b/src/common-components/AuthnValidationFormGroup.jsx
@@ -62,6 +62,7 @@ const AuthnCustomValidationFormGroup = (props) => {
     type: props.type,
     value: props.value,
     className: props.inputFieldStyle,
+    'aria-invalid': props.ariaInvalid,
   };
   inputProps.onChange = (e) => onChangeHandler(e, onChange);
   inputProps.onClick = (e) => onClickHandler(e, onClick);
@@ -112,6 +113,7 @@ AuthnCustomValidationFormGroup.defaultProps = {
   type: '',
   value: '',
   invalid: false,
+  ariaInvalid: false,
   invalidMessage: '',
   inputFieldStyle: '',
   helpText: '',
@@ -134,6 +136,7 @@ AuthnCustomValidationFormGroup.propTypes = {
     PropTypes.bool,
   ]),
   invalid: PropTypes.bool,
+  ariaInvalid: PropTypes.bool,
   invalidMessage: PropTypes.string,
   helpText: PropTypes.string,
   className: PropTypes.string,
diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx
index 4a1f5ff1..6e13b100 100644
--- a/src/forgot-password/ForgotPasswordPage.jsx
+++ b/src/forgot-password/ForgotPasswordPage.jsx
@@ -110,6 +110,7 @@ const ForgotPasswordPage = (props) => {
                   name="email"
                   type="email"
                   invalid={validationError !== ''}
+                  ariaInvalid={validationError !== ''}
                   invalidMessage={validationError}
                   value={values.email}
                   onBlur={() => getValidationMessage(values.email)}
diff --git a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
index d711d3c3..05844318 100644
--- a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
+++ b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
@@ -31,6 +31,7 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
         </label>
         <input
           aria-describedby=""
+          aria-invalid={false}
           className="form-control border-gray-600"
           id="forgot-password-input"
           name="email"
@@ -152,6 +153,7 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
         </label>
         <input
           aria-describedby=""
+          aria-invalid={false}
           className="form-control border-gray-600"
           id="forgot-password-input"
           name="email"
@@ -258,6 +260,7 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
         </label>
         <input
           aria-describedby=""
+          aria-invalid={false}
           className="form-control border-gray-600"
           id="forgot-password-input"
           name="email"
diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx
index 9e31fd93..fbc44f0f 100644
--- a/src/login/LoginPage.jsx
+++ b/src/login/LoginPage.jsx
@@ -218,6 +218,7 @@ class LoginPage extends React.Component {
                   name="email"
                   type="email"
                   invalid={errors.email !== ''}
+                  ariaInvalid={errors.email !== ''}
                   invalidMessage={errors.email}
                   value={email}
                   helpText={intl.formatMessage(messages['email.help.message'])}
@@ -230,6 +231,7 @@ class LoginPage extends React.Component {
                   name="password"
                   type="password"
                   invalid={errors.password !== ''}
+                  ariaInvalid={errors.password !== ''}
                   invalidMessage={errors.password}
                   value={password}
                   onChange={(e) => this.setState({ password: e.target.value, isSubmitted: false })}
diff --git a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
index 65766837..599b2124 100644
--- a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
+++ b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
@@ -44,6 +44,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="email"
             name="email"
@@ -68,6 +69,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="password"
             name="password"
@@ -232,6 +234,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="email"
             name="email"
@@ -256,6 +259,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="password"
             name="password"
@@ -424,6 +428,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="email"
             name="email"
@@ -448,6 +453,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="password"
             name="password"
@@ -576,6 +582,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="email"
             name="email"
@@ -600,6 +607,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="password"
             name="password"
@@ -765,6 +773,7 @@ exports[`LoginPage should show error message 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="email"
             name="email"
@@ -789,6 +798,7 @@ exports[`LoginPage should show error message 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="password"
             name="password"
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index c2790ab7..3c06bd79 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -473,6 +473,7 @@ class RegistrationPage extends React.Component {
                   name="name"
                   type="text"
                   invalid={this.state.errors.name !== ''}
+                  ariaInvalid={this.state.errors.name !== ''}
                   invalidMessage={this.state.errors.name}
                   value={this.state.name}
                   onBlur={(e) => this.handleOnBlur(e)}
@@ -487,6 +488,7 @@ class RegistrationPage extends React.Component {
                   type="text"
                   className="data-hj-suppress"
                   invalid={this.state.errors.username !== ''}
+                  ariaInvalid={this.state.errors.username !== ''}
                   invalidMessage={this.state.errors.username}
                   value={this.state.username}
                   onBlur={(e) => this.handleOnBlur(e)}
@@ -501,6 +503,7 @@ class RegistrationPage extends React.Component {
                   type="text"
                   className="data-hj-suppress"
                   invalid={this.state.errors.email !== ''}
+                  ariaInvalid={this.state.errors.email !== ''}
                   invalidMessage={this.state.errors.email}
                   value={this.state.email}
                   onBlur={(e) => this.handleOnBlur(e)}
@@ -515,6 +518,7 @@ class RegistrationPage extends React.Component {
                     name="password"
                     type="password"
                     invalid={this.state.errors.password !== ''}
+                    ariaInvalid={this.state.errors.password !== ''}
                     invalidMessage={this.state.errors.password}
                     value={this.state.password}
                     onBlur={(e) => this.handleOnBlur(e)}
@@ -530,6 +534,7 @@ class RegistrationPage extends React.Component {
                   type="select"
                   key="country"
                   invalid={this.state.errors.country !== ''}
+                  ariaInvalid={this.state.errors.country !== ''}
                   invalidMessage={intl.formatMessage(messages['country.validation.message'])}
                   className="mb-0 data-hj-suppress"
                   value={this.state.country}
diff --git a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
index 6c2eeb81..94825074 100644
--- a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
+++ b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
@@ -43,6 +43,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="name"
             name="name"
@@ -67,6 +68,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="username"
             name="username"
@@ -91,6 +93,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="email"
             name="email"
@@ -115,6 +118,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="password"
             name="password"
@@ -139,6 +143,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           </label>
           <select
             aria-describedby=""
+            aria-invalid={false}
             className="form-control text-muted border-gray-600"
             id="country"
             name="country"
@@ -1468,6 +1473,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             checked={false}
             className="form-check-input"
             id="optional"
@@ -1594,6 +1600,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="name"
             name="name"
@@ -1618,6 +1625,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="username"
             name="username"
@@ -1642,6 +1650,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="email"
             name="email"
@@ -1666,6 +1675,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="password"
             name="password"
@@ -1690,6 +1700,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           </label>
           <select
             aria-describedby=""
+            aria-invalid={false}
             className="form-control text-muted border-gray-600"
             id="country"
             name="country"
@@ -3019,6 +3030,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             checked={false}
             className="form-check-input"
             id="optional"
@@ -3106,6 +3118,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="name"
             name="name"
@@ -3130,6 +3143,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="username"
             name="username"
@@ -3154,6 +3168,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="email"
             name="email"
@@ -3178,6 +3193,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             className="form-control border-gray-600"
             id="password"
             name="password"
@@ -3202,6 +3218,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           </label>
           <select
             aria-describedby=""
+            aria-invalid={false}
             className="form-control text-muted border-gray-600"
             id="country"
             name="country"
@@ -4531,6 +4548,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
           </label>
           <input
             aria-describedby=""
+            aria-invalid={false}
             checked={false}
             className="form-check-input"
             id="optional"
diff --git a/src/reset-password/ResetPasswordPage.jsx b/src/reset-password/ResetPasswordPage.jsx
index 8c2eef3e..774eb27a 100644
--- a/src/reset-password/ResetPasswordPage.jsx
+++ b/src/reset-password/ResetPasswordPage.jsx
@@ -153,6 +153,7 @@ const ResetPasswordPage = (props) => {
                 name="new-password1"
                 type="password"
                 invalid={!passwordValid}
+                ariaInvalid={!passwordValid}
                 invalidMessage={validationMessage}
                 value={newPasswordInput}
                 onChange={e => handleNewPasswordChange(e)}
@@ -166,6 +167,7 @@ const ResetPasswordPage = (props) => {
                 name="new-password2"
                 type="password"
                 invalid={!passwordMatch}
+                ariaInvalid={!passwordMatch}
                 invalidMessage={intl.formatMessage(messages['reset.password.page.invalid.match.message'])}
                 value={confirmPasswordInput}
                 onChange={e => handleConfirmPasswordChange(e)}
diff --git a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
index 8fdbd559..7f675b3a 100644
--- a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
+++ b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
@@ -32,6 +32,7 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
         </label>
         <input
           aria-describedby=""
+          aria-invalid={false}
           className="form-control border-gray-600"
           id="reset-password-input"
           name="new-password1"
@@ -56,6 +57,7 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
         </label>
         <input
           aria-describedby=""
+          aria-invalid={false}
           className="form-control border-gray-600"
           id="confirm-password-input"
           name="new-password2"
@@ -129,6 +131,7 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
         </label>
         <input
           aria-describedby=""
+          aria-invalid={false}
           className="form-control border-gray-600"
           id="reset-password-input"
           name="new-password1"
@@ -153,6 +156,7 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
         </label>
         <input
           aria-describedby=""
+          aria-invalid={false}
           className="form-control border-gray-600"
           id="confirm-password-input"
           name="new-password2"
@@ -247,6 +251,7 @@ exports[`ResetPasswordPage should match reset password default section snapshot
         </label>
         <input
           aria-describedby=""
+          aria-invalid={false}
           className="form-control border-gray-600"
           id="reset-password-input"
           name="new-password1"
@@ -271,6 +276,7 @@ exports[`ResetPasswordPage should match reset password default section snapshot
         </label>
         <input
           aria-describedby=""
+          aria-invalid={false}
           className="form-control border-gray-600"
           id="confirm-password-input"
           name="new-password2"
@@ -382,6 +388,7 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
         </label>
         <input
           aria-describedby=""
+          aria-invalid={false}
           className="form-control border-gray-600"
           id="reset-password-input"
           name="new-password1"
@@ -406,6 +413,7 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
         </label>
         <input
           aria-describedby=""
+          aria-invalid={false}
           className="form-control border-gray-600"
           id="confirm-password-input"
           name="new-password2"