fix(components/forms): add missing ARIA attributes to file attachment…

… button (#2680)
blackbaud · Sep 5, 2024 · 85a8cb1 · 85a8cb1
1 parent 67c1496
commit 85a8cb1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/...ents/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.html b/...ents/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/...s/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts b/...s/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts
@@ -1501,31 +1501,47 @@ 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;
     fixture.detectChanges();
 
     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]