feat(material-experimental/mdc-chips): add unit tests for custom aria…

…-describedby
angular · Jun 28, 2022 · 8eb6706 · 8eb6706
1 parent 755287a
commit 8eb6706
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/src/material-experimental/mdc-chips/chip-listbox.spec.ts b/src/material-experimental/mdc-chips/chip-listbox.spec.ts
@@ -638,6 +638,12 @@ describe('MDC-based MatChipListbox', () => {
 
           expect(chipArray[4].focus).not.toHaveBeenCalled();
         });
+
+        it('should support user binding to `aria-describedby`', fakeAsync(() => {
+          chipListboxInstance.userAriaDescribedBy = 'test';
+          fixture.detectChanges();
+          expect(chipListboxNativeElement.getAttribute('aria-describedby')).toBe('test');
+        }));
       });
 
       describe('multiple selection', () => {

diff --git a/src/material-experimental/mdc-chips/chip-listbox.ts b/src/material-experimental/mdc-chips/chip-listbox.ts
@@ -66,8 +66,6 @@ export const MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR: any = {
     'class': 'mdc-evolution-chip-set mat-mdc-chip-listbox',
     '[attr.role]': 'role',
     '[tabIndex]': 'empty ? -1 : tabIndex',
-    // TODO: replace this binding with use of AriaDescriber
-    '[attr.aria-describedby]': '_ariaDescribedby || null',
     '[attr.aria-required]': 'role ? required : null',
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.aria-multiselectable]': 'multiple',

diff --git a/src/material-experimental/mdc-chips/chip-set.spec.ts b/src/material-experimental/mdc-chips/chip-set.spec.ts
@@ -75,6 +75,12 @@ describe('MDC-based MatChipSet', () => {
         fixture.detectChanges();
         expect(chipSetNativeElement.getAttribute('role')).toBe('list');
       });
+
+      it('should support user binding to `aria-describedby`', fakeAsync(() => {
+        chipSetInstance.userAriaDescribedBy = 'test';
+        fixture.detectChanges();
+        expect(chipSetNativeElement.getAttribute('aria-describedby')).toBe('test');
+      }));
     });
   });
 

diff --git a/src/material-experimental/mdc-chips/chip-set.ts b/src/material-experimental/mdc-chips/chip-set.ts
@@ -55,6 +55,7 @@ const _MatChipSetMixinBase = mixinTabIndex(MatChipSetBase);
     'class': 'mat-mdc-chip-set mdc-evolution-chip-set',
     '(keydown)': '_handleKeydown($event)',
     '[attr.role]': 'role',
+    '[attr.aria-describedby]': 'userAriaDescribedBy || null',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -85,6 +86,17 @@ export class MatChipSet
     return this._getChipStream(chip => chip.destroyed);
   }
 
+  @Input('aria-describedby')
+  get userAriaDescribedBy(): string {
+    return this._userAriaDescribedBy;
+  }
+
+  set userAriaDescribedBy(userAriaDescribedBy: string) {
+    this._userAriaDescribedBy = userAriaDescribedBy;
+  }
+
+  private _userAriaDescribedBy: string;
+
   /** Whether the chip set is disabled. */
   @Input()
   get disabled(): boolean {