Skip to content

Commit

Permalink
docs(material/chips): require communicating to AT how to edit a chip
Browse files Browse the repository at this point in the history
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 angular#27106.
  • Loading branch information
zarend committed Jun 20, 2023
1 parent 6d0d47e commit 5c5f2ef
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions src/material/chips/chips.md
Original file line number Diff line number Diff line change
Expand Up @@ -186,8 +186,10 @@ For both MatChipGrid and MatChipListbox, always apply an accessible label to the

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

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.

When using MatChipListbox, never nest other interactive controls inside of the `<mat-chip-option>` element. Nesting controls degrades the experience for assistive technology users.

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.

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.

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 comments on commit 5c5f2ef

Please sign in to comment.