Skip to content

Commit

Permalink
a11y(auth): improve form accessibility labels and attributes
Browse files Browse the repository at this point in the history 
* Remove redundant aria-labels from password fields
* Add aria-invalid state for validation feedback
* Add aria-describedby to link error messages
* Keep explicit htmlFor labels for screen readers
  • Loading branch information
@jwinr
jwinr committed Nov 30, 2024
1 parent c6985fe commit 5f346c9
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 13 deletions.
14 changes: 10 additions & 4 deletions src/app/forgot-password/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ const ForgotPassword: React.FC = () => {
} else {
setErrorMessage(
CognitoErrorMessages[error.name as CognitoErrorName] ||
GENERIC_ERROR_MESSAGE
GENERIC_ERROR_MESSAGE
)
setShakeKey((prevKey) => prevKey + 1)
}
Expand Down Expand Up @@ -238,6 +238,8 @@ const ForgotPassword: React.FC = () => {
type="email"
placeholder=""
autoComplete="email"
aria-invalid={!emailValid}
aria-describedby="email-error"
style={getValidationStyle(emailValid, invalidStyle)}
value={formState.email}
/>
Expand All @@ -251,7 +253,7 @@ const ForgotPassword: React.FC = () => {
{!emailValid && (
<AuthStyles.ValidationMessage>
<TiWarningOutline />
Please enter a valid email address.
<span id="email-error">Please enter a valid email address.</span>
</AuthStyles.ValidationMessage>
)}
{errorMessage && (
Expand Down Expand Up @@ -308,6 +310,8 @@ const ForgotPassword: React.FC = () => {
name="code"
value={formState.code}
onChange={onChange}
aria-invalid={!codeValid}
aria-describedby="code-error"
style={getValidationStyle(!codeValid, invalidStyle)}
onBlur={onBlur}
/>
Expand All @@ -321,7 +325,7 @@ const ForgotPassword: React.FC = () => {
{!codeValid && (
<AuthStyles.ValidationMessage>
<TiWarningOutline />
Please enter a valid six-digit code.
<span id="code-error">Please enter a valid six-digit code.</span>
</AuthStyles.ValidationMessage>
)}
<AuthStyles.EntryWrapper>
Expand All @@ -330,6 +334,8 @@ const ForgotPassword: React.FC = () => {
placeholder=""
value={formState.newPassword}
name="new-password"
aria-invalid={!passwordValid}
aria-describedby="password-error"
onChange={onChange}
style={getValidationStyle(
!passwordValid,
Expand Down Expand Up @@ -375,7 +381,7 @@ const ForgotPassword: React.FC = () => {
{!passwordValid && (
<AuthStyles.ValidationMessage>
<TiWarningOutline />
Please enter a valid password.
<span id="password-error">Please enter a valid password.</span>
</AuthStyles.ValidationMessage>
)}
{errorMessage && (
Expand Down
10 changes: 6 additions & 4 deletions src/app/login/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,8 @@ const Login: React.FC = () => {
type="email"
placeholder=""
autoComplete="off"
aria-label="Email address"
aria-invalid={!emailValid}
aria-describedby="email-error"
style={getValidationStyle(emailValid, invalidStyle)}
value={formState.email}
$isLoading={isLoading}
Expand All @@ -233,7 +234,7 @@ const Login: React.FC = () => {
{!emailValid && (
<AuthStyles.ValidationMessage>
<TiWarningOutline />
Please enter a valid email address.
<span id="email-error">Please enter a valid email address.</span>
</AuthStyles.ValidationMessage>
)}
<AuthStyles.EntryWrapper>
Expand All @@ -245,7 +246,8 @@ const Login: React.FC = () => {
type={showPassword ? 'text' : 'password'}
placeholder=""
autoComplete="current-password"
aria-label="Password"
aria-invalid={!passwordValid}
aria-describedby="password-error"
data-form-type="password"
style={getValidationStyle(passwordValid, invalidStyle)}
value={formState.password}
Expand Down Expand Up @@ -285,7 +287,7 @@ const Login: React.FC = () => {
{!passwordValid && (
<AuthStyles.ValidationMessage>
<TiWarningOutline />
Please enter a valid password.
<span id="password-error">Please enter a valid password.</span>
</AuthStyles.ValidationMessage>
)}
{errorMessage && (
Expand Down
14 changes: 9 additions & 5 deletions src/app/signup/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,8 @@ const SignUp: React.FC = () => {
type="email"
placeholder=""
autoComplete="off"
aria-label="Email address"
aria-invalid={!emailValid}
aria-describedby="email-error"
style={getValidationStyle(emailValid, invalidStyle)}
value={formState.email}
/>
Expand All @@ -244,7 +245,7 @@ const SignUp: React.FC = () => {
{!emailValid && (
<AuthStyles.ValidationMessage>
<TiWarningOutline />
Please enter a valid email address.
<span id="email-valid">Please enter a valid email address.</span>
</AuthStyles.ValidationMessage>
)}
<AuthStyles.EntryWrapper>
Expand All @@ -258,6 +259,8 @@ const SignUp: React.FC = () => {
required
autoComplete="off"
aria-required="true"
aria-invalid={!fullNameValid}
aria-describedby="name-error"
value={formState.fullName}
data-form-type="name,full"
style={getValidationStyle(fullNameValid, invalidStyle)}
Expand All @@ -272,7 +275,7 @@ const SignUp: React.FC = () => {
{!fullNameValid && (
<AuthStyles.ValidationMessage>
<TiWarningOutline />
Please enter a valid full name.
<span id="name-error">Please enter a valid full name.</span>
</AuthStyles.ValidationMessage>
)}
<AuthStyles.EntryWrapper>
Expand All @@ -285,7 +288,8 @@ const SignUp: React.FC = () => {
placeholder=""
value={formState.password}
autoComplete="new-password"
aria-label="Password"
aria-invalid={!passwordValid}
aria-describedby="password-error"
data-form-type="password,new"
style={getValidationStyle(passwordValid, invalidStyle)}
/>
Expand Down Expand Up @@ -322,7 +326,7 @@ const SignUp: React.FC = () => {
{!passwordValid && (
<AuthStyles.ValidationMessage>
<TiWarningOutline />
Please enter a valid password.
<span id="password-error">Please enter a valid password.</span>
</AuthStyles.ValidationMessage>
)}
{errorMessage && (
Expand Down

0 comments on commit 5f346c9

Please sign in to comment.