diff --git a/src/material-experimental/mdc-chips/chip-listbox.spec.ts b/src/material-experimental/mdc-chips/chip-listbox.spec.ts index 2161a0d43cb3..e8a9bbfd1f59 100644 --- 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 index 2f2effcee1f4..779dc8ef8260 100644 --- 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 index 358a59a60f55..6fb657457911 100644 --- 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 index ede85c8e3ed2..0202cd7b6d32 100644 --- 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 {