hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplifying the implementation of dynamic aria-describedby

Browse Source 
(cherry picked from commit fa6e85d6db)
This commit is contained in:
andreaNeki
2024-10-31 15:01:54 -03:00
committed by github-actions[bot]
parent 67cd8a989b
commit 45b6f251f3
3 changed files with 2 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/register-email-form/register-email-form.component.html
View File

@@ -16,7 +16,7 @@
<input [className]="(email.invalid) && (email.dirty || email.touched) ? 'form-control is-invalid' :'form-control'"
type="text" id="email" formControlName="email"
[attr.aria-label]="MESSAGE_PREFIX + '.aria.label' | translate"
[attr.aria-describedby]="ariaDescribedby"
[attr.aria-describedby]="(!email.errors) ? '' : (email.errors.required ? 'email-errors-required' : 'email-error-not-valid')"
[attr.aria-invalid]="email.invalid"/>
<div *ngIf="email.invalid && (email.dirty || email.touched)"
class="invalid-feedback show-feedback">

35
src/app/register-email-form/register-email-form.component.spec.ts
View File

@@ -210,39 +210,4 @@ describe('RegisterEmailFormComponent', () => {
expect(router.navigate).not.toHaveBeenCalled();
}));
});
describe('ariaDescribedby', () => {
it('should have required error message when email is empty', () => {
comp.form.patchValue({ email: '' });
comp.checkEmailValidity();
expect(comp.ariaDescribedby).toContain('email-errors-required');
});
it('should have invalid email error message when email is invalid', () => {
comp.form.patchValue({ email: 'invalid-email' });
comp.checkEmailValidity();
expect(comp.ariaDescribedby).toContain('email-error-not-valid');
});
it('should clear ariaDescribedby when email is valid', () => {
comp.form.patchValue({ email: 'valid@email.com' });
comp.checkEmailValidity();
expect(comp.ariaDescribedby).toBe('');
});
it('should update ariaDescribedby on value changes', () => {
spyOn(comp, 'checkEmailValidity').and.callThrough();
comp.form.patchValue({ email: '' });
expect(comp.ariaDescribedby).toContain('email-errors-required');
comp.form.patchValue({ email: 'invalid-email' });
expect(comp.ariaDescribedby).toContain('email-error-not-valid');
comp.form.patchValue({ email: 'valid@email.com' });
expect(comp.ariaDescribedby).toBe('');
});
});
});

28
src/app/register-email-form/register-email-form.component.ts
View File

@@ -109,11 +109,6 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
subscriptions: Subscription[] = [];
/**
* Stores error messages related to the email field
*/
ariaDescribedby = '';
captchaVersion(): Observable<string> {
return this.googleRecaptchaService.captchaVersion();
}
@@ -183,13 +178,6 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
this.disableUntilChecked = res;
this.changeDetectorRef.detectChanges();
}));
/**
* Subscription to email field value changes
*/
this.subscriptions.push(this.email.valueChanges.subscribe(() => {
this.checkEmailValidity();
}));
}
/**
@@ -302,19 +290,5 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
console.warn(`Unimplemented notification '${key}' from reCaptcha service`);
}
}
checkEmailValidity() {
const descriptions = [];
if (this.email.errors?.required) {
descriptions.push('email-errors-required');
}
if (this.email.errors?.pattern || this.email.errors?.email) {
descriptions.push('email-error-not-valid');
}
this.ariaDescribedby = descriptions.join(' ');
}
}