Flutter now applies the semantic label ofbutton to all interactiveMaterial Chips for accessibility purposes.

Interactive Material Chips (namelyActionChip,ChoiceChip,FilterChip, andInputChip) are now semantically marked as being buttons. However, the non-interactive informationChip is not.

Marking Chips as buttons helps accessibility tools, search engines, and other semantic analysis software understand the meaning of an app. For example, it allows screen readers (such as TalkBack on Android and VoiceOver on iOS) to announce a tappable Chip as a "button", which can assist users in navigating your app. Prior to this change, users of accessibility tools may have had a subpar experience, unless you implemented a workaround by manually adding the missing semantics to the Chip widgets in your app.

The outermostSemantics widget that wraps all Chip classes to describe their semantic properties is modified.

The following changes apply toActionChip,ChoiceChip,FilterChip, andInputChip:

• Thebutton property is set totrue.
• Theenabled property reflects whether the Chip iscurrently tappable (by having a callback set).

These property changes bring interactive Chips' semantic behavior in-line with that of otherMaterial Buttons.

For the non-interactive informationChip:

• Thebutton property is set tofalse.
• Theenabled property is set tonull.

You might not need to perform any migration. This change only affects you if you worked around the issue of Material Chips missingbutton semantics by wrapping the widget given to thelabel field of aChip with aSemantics widget marked asbutton: true.In this case, the inner and outerbutton semantics conflict, resulting in the tappable area of the button shrinking down to the size of the label after this change is introduced. Fix this issue either by deleting thatSemantics widget and replacing it with its child, or by removing thebutton: true property if other semantic properties still need to be applied to thelabel widget of the Chip.

The following snippets useInputChip as an example, but the same process applies toActionChip,ChoiceChip, andFilterChip as well.

Case 1: Remove theSemantics widget.

Code before migration:

WidgetmyInputChip=InputChip(onPressed:(){},label:Semantics(button:true,child:Text('My Input Chip'),),);

Code after migration:

WidgetmyInputChip=InputChip(onPressed:(){},label:Text('My Input Chip'),);

Case 2: Removebutton:true from theSemantics widget.

Code before migration:

WidgetmyInputChip=InputChip(onPressed:(){},label:Semantics(button:true,hint:'Example Hint',child:Text('My Input Chip'),),);

Code after migration:

WidgetmyInputChip=InputChip(onPressed:(){},label:Semantics(hint:'Example Hint',child:Text('My Input Chip'),),);

Landed in version: 1.23.0-7.0.pre
In stable release: 2.0.0

API documentation:

• ActionChip
• Chip
• ChoiceChip
• FilterChip
• InputChip
• Material Buttons
• Material Chips
• Semantics
• SemanticsProperties.button
• SemanticsProperties.enabled

Relevant issue:

• Issue 58010: InputChip doesn't announce any action for a11y on iOS

Relevant PRs:

• PR 60141: Tweaking Material Chip a11y semantics to match buttons
• PR 60645: Revert "Tweaking Material Chip a11y semantics to match buttons (#60141)
• PR 61048: Re-land "Tweaking Material Chip a11y semantics to match buttons (#60141)