diff --git a/src/material/chips/chip-list.ts b/src/material/chips/chip-list.ts index 11b8741ee05b..de9f023be1fa 100644 --- a/src/material/chips/chip-list.ts +++ b/src/material/chips/chip-list.ts @@ -78,7 +78,6 @@ export class MatChipListChange { exportAs: 'matChipList', host: { '[attr.tabindex]': 'disabled ? null : _tabIndex', - '[attr.aria-describedby]': '_ariaDescribedby || null', '[attr.aria-required]': 'role ? required : null', '[attr.aria-disabled]': 'disabled.toString()', '[attr.aria-invalid]': 'errorState', @@ -144,9 +143,6 @@ export class MatChipList /** Uid of the chip list */ _uid: string = `mat-chip-list-${nextUniqueId++}`; - /** The aria-describedby attribute on the chip list for improved a11y. */ - _ariaDescribedby: string; - /** Tab index for the chip list. */ _tabIndex = 0; @@ -177,6 +173,12 @@ export class MatChipList return this.empty ? null : 'listbox'; } + /** + * Implemented as part of MatFormFieldControl. + * @docs-private + */ + @Input('aria-describedby') userAriaDescribedBy: string; + /** An object used to control when error messages are shown. */ @Input() override errorStateMatcher: ErrorStateMatcher; @@ -455,7 +457,11 @@ export class MatChipList * @docs-private */ setDescribedByIds(ids: string[]) { - this._ariaDescribedby = ids.join(' '); + if (ids.length) { + this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' ')); + } else { + this._elementRef.nativeElement.removeAttribute('aria-describedby'); + } } // Implemented as part of ControlValueAccessor. diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md index fe760c55894c..a8f8bada3b3c 100644 --- a/tools/public_api_guard/material/chips.md +++ b/tools/public_api_guard/material/chips.md @@ -181,7 +181,6 @@ export interface MatChipInputEvent { export class MatChipList extends _MatChipListBase implements MatFormFieldControl, ControlValueAccessor, AfterContentInit, DoCheck, OnInit, OnDestroy, CanUpdateErrorState { constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _defaultErrorStateMatcher: ErrorStateMatcher, ngControl: NgControl); _allowFocusEscape(): void; - _ariaDescribedby: string; ariaOrientation: 'horizontal' | 'vertical'; _blur(): void; readonly change: EventEmitter; @@ -255,6 +254,7 @@ export class MatChipList extends _MatChipListBase implements MatFormFieldControl _uid: string; protected _updateFocusForDestroyedChips(): void; protected _updateTabIndex(): void; + userAriaDescribedBy: string; _userTabIndex: number | null; get value(): any; set value(value: any); @@ -264,7 +264,7 @@ export class MatChipList extends _MatChipListBase implements MatFormFieldControl // (undocumented) writeValue(value: any): void; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; }