diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index 752f05cb97c..65cf15d5166 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -63,6 +63,16 @@ describe('MatChipList', () => { it('should add the `mat-chip-list` class', () => { expect(chipListNativeElement.classList).toContain('mat-chip-list'); }); + + it('should not have the aria-selected attribute when is not selectable', () => { + testComponent.selectable = false; + fixture.detectChanges(); + + const chipsValid = chips.toArray().every(chip => + !chip.selectable && !chip._elementRef.nativeElement.hasAttribute('aria-selected')); + + expect(chipsValid).toBe(true); + }); }); describe('with selected chips', () => { @@ -1027,7 +1037,7 @@ describe('MatChipList', () => { @Component({ template: ` - +
diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index f7aa330b07a..1556a405797 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -274,12 +274,17 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo @Input('aria-orientation') ariaOrientation: 'horizontal' | 'vertical' = 'horizontal'; /** - * Whether or not this chip is selectable. When a chip is not selectable, - * its selected state is always ignored. + * Whether or not this chip list is selectable. When a chip list is not selectable, + * the selected states for all the chips inside the chip list are always ignored. */ @Input() get selectable(): boolean { return this._selectable; } - set selectable(value: boolean) { this._selectable = coerceBooleanProperty(value); } + set selectable(value: boolean) { + this._selectable = coerceBooleanProperty(value); + if (this.chips) { + this.chips.forEach(chip => chip.chipListSelectable = this._selectable); + } + } protected _selectable: boolean = true; @Input() diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index 6e6d58cf901..f72240ea957 100644 --- a/src/lib/chips/chip.ts +++ b/src/lib/chips/chip.ts @@ -134,6 +134,9 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes /** Whether the chip has focus. */ _hasFocus: boolean = false; + /** Whether the chip list is selectable */ + chipListSelectable: boolean = true; + /** The chip avatar */ @ContentChild(MatChipAvatar) avatar: MatChipAvatar; @@ -167,11 +170,13 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes protected _value: any; /** - * Whether or not the chips are selectable. When a chip is not selectable, - * changes to it's selected state are always ignored. + * Whether or not the chip is selectable. When a chip is not selectable, + * changes to it's selected state are always ignored. By default a chip is + * selectable, and it becomes non-selectable if it's parent chip list is + * not selectable. */ @Input() - get selectable(): boolean { return this._selectable; } + get selectable(): boolean { return this._selectable && this.chipListSelectable; } set selectable(value: boolean) { this._selectable = coerceBooleanProperty(value); }