Skip to content

Commit 42ceec2

Browse files
committed
docs(material/chips): require communicating to AT how to edit a chip (#27336)
Update the accessibility section of chips component to adress editable chips. Require developer to communicate to AT how to edit a chip using a keyboard. Relates to issue #27106. (cherry picked from commit a320042)
1 parent 81e08d4 commit 42ceec2

File tree

1 file changed

+4
-2
lines changed

1 file changed

+4
-2
lines changed

src/material/chips/chips.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,8 +186,10 @@ For both MatChipGrid and MatChipListbox, always apply an accessible label to the
186186

187187
Always apply MatChipRemove to a `<button>` element, never a `<mat-icon>` element.
188188

189-
When using `MatChipRemove`, you should always communicate removals for assistive technology. One way to accomplish this is by sending a message with `LiveAnnouncer`. Otherwise, removing a chip may only be communicated visually.
190-
191189
When using MatChipListbox, never nest other interactive controls inside of the `<mat-chip-option>` element. Nesting controls degrades the experience for assistive technology users.
192190

193191
By default, `MatChipListbox` displays a checkmark to identify selected items. While you can hide the checkmark indicator for single-selection via `hideSingleSelectionIndicator`, this makes the component less accessible by making it harder or impossible for users to visually identify selected items.
192+
193+
When using `MatChipRemove`, you should always communicate removals for assistive technology. One way to accomplish this is by sending a message with `LiveAnnouncer`. Otherwise, removing a chip may only be communicated visually.
194+
195+
When a chip is editable, provide instructions to assistive technology how to edit the chip using a keyboard. One way to accomplish this is adding an `aria-description` attribute with instructions to press enter to edit the chip.

0 commit comments

Comments
 (0)