Skip to content

Commit c54a3ac

Browse files
vanessanschmittannieyw
authored andcommitted
feat(material-experimental/mdc-chips): Allow custom role for ChipSet (#20829)
The default mat-chip-set role is 'presentation' if chips are present, and null if there are no chips. Some users want to specify custom roles, in particular 'list' (they would use 'listitem' for the chips, which have no default role). Currently this isn't possible, because mat-chip-set overwrites their custom role with 'presentation'. Add an Input to allow a custom role. (cherry picked from commit 335fc0c)
1 parent 19ef64a commit c54a3ac

File tree

2 files changed

+20
-2
lines changed

2 files changed

+20
-2
lines changed

src/material-experimental/mdc-chips/chip-set.spec.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,15 @@ describe('MDC-based MatChipSet', () => {
6767
expect(chips.toArray().every(chip => chip.disabled)).toBe(true);
6868
}));
6969

70-
it('should have role presentation', () => {
70+
it('should have role presentation by default', () => {
7171
expect(chipSetNativeElement.getAttribute('role')).toBe('presentation');
7272
});
73+
74+
it('should allow a custom role to be specified', () => {
75+
chipSetInstance.role = 'list';
76+
fixture.detectChanges();
77+
expect(chipSetNativeElement.getAttribute('role')).toBe('list');
78+
});
7379
});
7480
});
7581

src/material-experimental/mdc-chips/chip-set.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,19 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit
132132
get empty(): boolean { return this._chips.length === 0; }
133133

134134
/** The ARIA role applied to the chip set. */
135-
get role(): string | null { return this.empty ? null : 'presentation'; }
135+
@Input()
136+
get role(): string | null {
137+
if (this._role) {
138+
return this._role;
139+
} else {
140+
return this.empty ? null : 'presentation';
141+
}
142+
}
143+
144+
set role(value: string | null) {
145+
this._role = value;
146+
}
147+
private _role: string|null = null;
136148

137149
/** Whether any of the chips inside of this chip-set has focus. */
138150
get focused(): boolean { return this._hasFocusedChip(); }

0 commit comments

Comments
 (0)