diff --git a/src/material-experimental/mdc-chips/chip-grid.ts b/src/material-experimental/mdc-chips/chip-grid.ts index b1370f6bcc69..33d5eaa6aeac 100644 --- a/src/material-experimental/mdc-chips/chip-grid.ts +++ b/src/material-experimental/mdc-chips/chip-grid.ts @@ -108,8 +108,6 @@ const _MatChipGridMixinBase = mixinErrorState(MatChipGridBase); 'class': 'mat-mdc-chip-set mat-mdc-chip-grid mdc-evolution-chip-set', '[attr.role]': 'role', '[tabIndex]': '_chips && _chips.length === 0 ? -1 : tabIndex', - // TODO: replace this binding with use of AriaDescriber - '[attr.aria-describedby]': '_ariaDescribedby || null', '[attr.aria-disabled]': 'disabled.toString()', '[attr.aria-invalid]': 'errorState', '[class.mat-mdc-chip-list-disabled]': 'disabled', @@ -337,6 +335,10 @@ export class MatChipGrid /** Associates an HTML input element with this chip grid. */ registerInput(inputElement: MatChipTextControl): void { this._chipInput = inputElement; + + if (this._ariaDescribedby) { + this._chipInput.setDescribedByIds(this._ariaDescribedby.split(' ')); + } } /** @@ -379,6 +381,10 @@ export class MatChipGrid */ setDescribedByIds(ids: string[]) { this._ariaDescribedby = ids.join(' '); + + if (this._chipInput) { + this._chipInput.setDescribedByIds(ids); + } } /** diff --git a/src/material-experimental/mdc-chips/chip-input.spec.ts b/src/material-experimental/mdc-chips/chip-input.spec.ts index e83af9f8d9f6..9bfa47b33e88 100644 --- a/src/material-experimental/mdc-chips/chip-input.spec.ts +++ b/src/material-experimental/mdc-chips/chip-input.spec.ts @@ -230,6 +230,24 @@ describe('MDC-based MatChipInput', () => { dispatchKeyboardEvent(inputNativeElement, 'keydown', ENTER, undefined, {shift: true}); expect(testChipInput.add).not.toHaveBeenCalled(); }); + + it('should set aria-describedby correctly when a non-empty list of ids is passed to setDescribedByIds', () => { + const ids = ['a', 'b', 'c']; + + testChipInput.chipGridInstance.setDescribedByIds(ids); + fixture.detectChanges(); + + expect(inputNativeElement.getAttribute('aria-describedby')).toEqual('a b c'); + }); + + it('should set aria-describedby correctly when an empty list of ids is passed to setDescribedByIds', () => { + const ids: string[] = []; + + testChipInput.chipGridInstance.setDescribedByIds(ids); + fixture.detectChanges(); + + expect(inputNativeElement.getAttribute('aria-describedby')).toBeNull(); + }); }); }); diff --git a/src/material-experimental/mdc-chips/chip-input.ts b/src/material-experimental/mdc-chips/chip-input.ts index 1362f612cf7d..deb2a519fc16 100644 --- a/src/material-experimental/mdc-chips/chip-input.ts +++ b/src/material-experimental/mdc-chips/chip-input.ts @@ -65,6 +65,7 @@ let nextUniqueId = 0; '[attr.disabled]': 'disabled || null', '[attr.placeholder]': 'placeholder || null', '[attr.aria-invalid]': '_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null', + '[attr.aria-describedby]': '_ariaDescribedby || null', '[attr.aria-required]': '_chipGrid && _chipGrid.required || null', '[attr.required]': '_chipGrid && _chipGrid.required || null', }, @@ -73,6 +74,9 @@ export class MatChipInput implements MatChipTextControl, AfterContentInit, OnCha /** Used to prevent focus moving to chips while user is holding backspace */ private _focusLastChipOnBackspace: boolean; + /** Value for ariaDescribedby property */ + _ariaDescribedby?: string; + /** Whether the control is focused. */ focused: boolean = false; _chipGrid: MatChipGrid; @@ -240,6 +244,10 @@ export class MatChipInput implements MatChipTextControl, AfterContentInit, OnCha this._focusLastChipOnBackspace = true; } + setDescribedByIds(ids: string[]): void { + this._ariaDescribedby = ids.join(' '); + } + /** Checks whether a keycode is one of the configured separators. */ private _isSeparatorKey(event: KeyboardEvent) { return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode); diff --git a/src/material-experimental/mdc-chips/chip-text-control.ts b/src/material-experimental/mdc-chips/chip-text-control.ts index bcb515d85a54..422328517e23 100644 --- a/src/material-experimental/mdc-chips/chip-text-control.ts +++ b/src/material-experimental/mdc-chips/chip-text-control.ts @@ -22,4 +22,7 @@ export interface MatChipTextControl { /** Focuses the text control. */ focus(): void; + + /** Sets the list of ids the input is described by. */ + setDescribedByIds(ids: string[]): void; }