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 @@

Unstyled

Basic Chip Row 1 Basic Chip Row 2 Basic Chip Row 3 - +

With avatar, icons, and color

@@ -185,11 +185,17 @@

Input is last child of chip grid

} + [matChipInputFor]="chipGrid1" + [matChipInputSeparatorKeyCodes]="separatorKeysCodes" + [matChipInputAddOnBlur]="addOnBlur" + (matChipInputTokenEnd)="add($event)" + aria-label="New contributor input..." /> +

Input is next sibling child of chip grid

@@ -209,7 +215,7 @@

Input is next sibling child of chip grid

+ (matChipInputTokenEnd)="add($event)"/>

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 `` and `` : 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 } - + ```