diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html index 92ae8310130e..c1dd192f7534 100644 --- a/src/dev-app/chips/chips-demo.html +++ b/src/dev-app/chips/chips-demo.html @@ -29,8 +29,8 @@ <h4>Unstyled</h4> <mat-basic-chip-row>Basic Chip Row 1</mat-basic-chip-row> <mat-basic-chip-row>Basic Chip Row 2</mat-basic-chip-row> <mat-basic-chip-row>Basic Chip Row 3</mat-basic-chip-row> - <input [matChipInputFor]="basicGrid" readonly> </mat-chip-grid> + <input [matChipInputFor]="basicGrid" readonly> <h4>With avatar, icons, and color</h4> @@ -185,11 +185,17 @@ <h4>Input is last child of chip grid</h4> </mat-chip-row> } <input [disabled]="disableInputs" - [matChipInputFor]="chipGrid1" - [matChipInputSeparatorKeyCodes]="separatorKeysCodes" - [matChipInputAddOnBlur]="addOnBlur" - (matChipInputTokenEnd)="add($event)" /> + [matChipInputFor]="chipGrid1" + [matChipInputSeparatorKeyCodes]="separatorKeysCodes" + [matChipInputAddOnBlur]="addOnBlur" + (matChipInputTokenEnd)="add($event)" + aria-label="New contributor input..." /> </mat-chip-grid> + <input [disabled]="disableInputs" + [matChipInputFor]="chipGrid1" + [matChipInputSeparatorKeyCodes]="separatorKeysCodes" + [matChipInputAddOnBlur]="addOnBlur" + (matChipInputTokenEnd)="add($event)" /> </mat-form-field> <h4>Input is next sibling child of chip grid</h4> @@ -209,7 +215,7 @@ <h4>Input is next sibling child of chip grid</h4> <input [matChipInputFor]="chipGrid2" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" - (matChipInputTokenEnd)="add($event)" /> + (matChipInputTokenEnd)="add($event)"/> </mat-form-field> <p> diff --git a/src/material/chips/chips.md b/src/material/chips/chips.md index 373672b0ca31..af5e6cb88a3c 100644 --- a/src/material/chips/chips.md +++ b/src/material/chips/chips.md @@ -141,6 +141,8 @@ The chips components support 3 user interaction patterns, each with its own cont `<mat-chip-grid>` and `<mat-chip-row>` : These elements implement a grid accessibility pattern. Use them as part of a free form input that allows users to enter text to add chips. +Note : be sure to have the input element be a sibling of mat-chip-grid to ensure accessibility of the input element by accessibility devices such as Voice Control. It is also recommended to apply an appropriate `aria-label` to the input to optimize accessibility of the input. + ```html <mat-form-field> <mat-chip-grid #myChipGrid [(ngModel)]="mySelection" @@ -153,10 +155,11 @@ The chips components support 3 user interaction patterns, each with its own cont </button> </mat-chip-row> } - <input [matChipInputFor]="myChipGrid" - [matChipInputSeparatorKeyCodes]="separatorKeysCodes" - (matChipInputTokenEnd)="add($event)" /> </mat-chip-grid> + <input [matChipInputFor]="myChipGrid" + [matChipInputSeparatorKeyCodes]="separatorKeysCodes" + (matChipInputTokenEnd)="add($event)" + aria-label="Add sandwich fillings..." /> </mat-form-field> ```