Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds aria-invalid to fields.

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

VAN-387
This commit is contained in:
Adeel Khan
2021-03-17 18:20:42 +05:00
parent 0a9478e3a6
commit b2bd2295b8
9 changed files with 52 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/common-components/AuthnValidationFormGroup.jsx
View File

@@ -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,

1
src/forgot-password/ForgotPasswordPage.jsx
View File

@@ -110,6 +110,7 @@ const ForgotPasswordPage = (props) => {
name="email"
type="email"
invalid={validationError !== ''}
ariaInvalid={validationError !== ''}
invalidMessage={validationError}
value={values.email}
onBlur={() => getValidationMessage(values.email)}

3
src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
View File

@@ -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"

2
src/login/LoginPage.jsx
View File

@@ -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 })}

10
src/login/tests/__snapshots__/LoginPage.test.jsx.snap
View File

@@ -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"

5
src/register/RegistrationPage.jsx
View File

@@ -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}

18
src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
View File

@@ -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"

2
src/reset-password/ResetPasswordPage.jsx
View File

@@ -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)}

8
src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
View File

@@ -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"