diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.html b/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.html index cc1ef45c0d..fee861dccd 100644 --- a/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.html +++ b/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.html @@ -79,6 +79,10 @@ ? labelId : labelComponents?.get(0)?.labelContentId?.id) " + [attr.aria-invalid]="!!(ngControl?.errors ?? fileErrorValidation)" + [attr.aria-errormessage]=" + !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined + " [disabled]="disabled" (click)="onDropClicked()" > diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts b/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts index 856e2bcf2f..fcb81946b6 100644 --- a/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts +++ b/libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts @@ -1501,18 +1501,28 @@ describe('File attachment', () => { }); it('should render form errors when label text is set', () => { + const btn = getButtonEl(fixture.nativeElement); + expect(btn?.getAttribute('aria-invalid')).toEqual('false'); + expect(btn?.getAttribute('aria-errormessage')).toBeNull(); + fixture.componentInstance.required = true; fixture.componentInstance.labelText = 'file attachment'; fixture.componentInstance.attachment.markAsTouched(); fixture.detectChanges(); + expect(btn?.getAttribute('aria-invalid')).toEqual('true'); + expect(btn?.getAttribute('aria-errormessage')).toEqual('MOCK_ID_1'); expect( fixture.nativeElement.querySelector('sky-form-error')?.textContent.trim(), ).toBe('Error: file attachment is required.'); }); it('should render file errors when label text is set and no NgControl errors', () => { + const btn = getButtonEl(fixture.nativeElement); + expect(btn?.getAttribute('aria-invalid')).toEqual('false'); + expect(btn?.getAttribute('aria-errormessage')).toBeNull(); + fixture.componentInstance.labelText = 'file attachment'; fixture.componentInstance.required = false; fixture.componentInstance.maxFileSize = 50; @@ -1520,12 +1530,18 @@ describe('File attachment', () => { setupStandardFileChangeEvent(); + expect(btn?.getAttribute('aria-invalid')).toEqual('true'); + expect(btn?.getAttribute('aria-errormessage')).toEqual('MOCK_ID_1'); expect( fixture.nativeElement.querySelector('sky-form-error')?.textContent.trim(), ).toBe('Error: Upload a file under 50 bytes.'); }); it('should render file errors and NgControl errors when label text is set', async () => { + const btn = getButtonEl(fixture.nativeElement); + expect(btn?.getAttribute('aria-invalid')).toEqual('false'); + expect(btn?.getAttribute('aria-errormessage')).toBeNull(); + fixture.componentInstance.labelText = 'file attachment'; fixture.componentInstance.required = true; fixture.componentInstance.maxFileSize = 50; @@ -1545,6 +1561,8 @@ describe('File attachment', () => { fixture.componentInstance.attachment.markAsTouched(); fixture.detectChanges(); + expect(btn?.getAttribute('aria-invalid')).toEqual('true'); + expect(btn?.getAttribute('aria-errormessage')).toEqual('MOCK_ID_1'); expect( fixture.nativeElement .querySelectorAll('sky-form-error')[0]