Material Chip button semantics
Summary
#Flutter now applies the semantic label of button
to
all interactive Material Chips for accessibility purposes.
Context
#Interactive Material Chips (namely ActionChip
,
ChoiceChip
, FilterChip
, and InputChip
)
are now semantically marked as being buttons.
However, the non-interactive information Chip
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.
Description of change
#The outermost Semantics
widget that wraps all
Chip classes to describe their semantic properties
is modified.
The following changes apply to
ActionChip
, ChoiceChip
, FilterChip
,
and InputChip
:
- The
button
property is set totrue
. - The
enabled
property reflects whether the Chip is currently tappable (by having a callback set).
These property changes bring interactive Chips' semantic behavior in-line with that of other Material Buttons.
For the non-interactive information Chip
:
Migration guide
#You might not need to perform any migration.
This change only affects you if you worked around
the issue of Material Chips missing button
semantics by
wrapping the widget given to the label
field of a
Chip
with a Semantics
widget marked as
button: true
. In this case, the inner and outer button
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 that Semantics
widget and replacing
it with its child, or by removing the button: true
property if other semantic properties still
need to be applied to the label
widget of the Chip.
The following snippets use InputChip
as an example,
but the same process applies to ActionChip
,
ChoiceChip
, and FilterChip
as well.
Case 1: Remove the Semantics
widget.
Code before migration:
Widget myInputChip = InputChip(
onPressed: () {},
label: Semantics(
button: true,
child: Text('My Input Chip'),
),
);
Code after migration:
Widget myInputChip = InputChip(
onPressed: () {},
label: Text('My Input Chip'),
);
Case 2: Remove button:true
from the Semantics
widget.
Code before migration:
Widget myInputChip = InputChip(
onPressed: () {},
label: Semantics(
button: true,
hint: 'Example Hint',
child: Text('My Input Chip'),
),
);
Code after migration:
Widget myInputChip = InputChip(
onPressed: () {},
label: Semantics(
hint: 'Example Hint',
child: Text('My Input Chip'),
),
);
Timeline
#Landed in version: 1.23.0-7.0.pre
In stable release: 2.0.0
References
#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)
除非另有说明,本文档之所提及适用于 Flutter 的最新稳定版本,本页面最后更新时间: 2024-09-04。 查看文档源码 或者 为本页面内容提出建议。