Skip to content

Commit

Permalink
fix(chips): set aria-required on chip input (#18098)
Browse files Browse the repository at this point in the history
Sets an `aria-required` on the input that's associated with a chip list. Matches something similar we did for the MDC-based chips in #18049 since the MDC chip listbox setup is similar to our current chips setup.

(cherry picked from commit 8d57d32)
  • Loading branch information
crisbeto authored and jelbourn committed Jan 22, 2020
1 parent fbbac37 commit 05d072a
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 2 deletions.
14 changes: 12 additions & 2 deletions src/material/chips/chip-input.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,15 @@ describe('MatChipInput', () => {
expect(listElement.getAttribute('tabindex')).toBe('0', 'Expected tabindex to remain 0');
}));

it('should be aria-required if the chip list is required', () => {
expect(inputNativeElement.hasAttribute('aria-required')).toBe(false);

fixture.componentInstance.required = true;
fixture.detectChanges();

expect(inputNativeElement.getAttribute('aria-required')).toBe('true');
});

});

describe('[addOnBlur]', () => {
Expand Down Expand Up @@ -245,7 +254,7 @@ describe('MatChipInput', () => {
@Component({
template: `
<mat-form-field>
<mat-chip-list #chipList>
<mat-chip-list #chipList [required]="required">
<mat-chip>Hello</mat-chip>
<input matInput [matChipInputFor]="chipList"
[matChipInputAddOnBlur]="addOnBlur"
Expand All @@ -257,7 +266,8 @@ describe('MatChipInput', () => {
})
class TestChipInput {
@ViewChild(MatChipList) chipListInstance: MatChipList;
addOnBlur: boolean = false;
addOnBlur = false;
required = false;
placeholder = '';

add(_: MatChipInputEvent) {
Expand Down
1 change: 1 addition & 0 deletions src/material/chips/chip-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ let nextUniqueId = 0;
'[attr.disabled]': 'disabled || null',
'[attr.placeholder]': 'placeholder || null',
'[attr.aria-invalid]': '_chipList && _chipList.ngControl ? _chipList.ngControl.invalid : null',
'[attr.aria-required]': '_chipList && _chipList.required || null',
}
})
export class MatChipInput implements MatChipTextControl, OnChanges {
Expand Down

0 comments on commit 05d072a

Please sign in to comment.