Material Chip 按鈕語義

出於可訪問性目的，Flutter 現在為所有可互動的 Material Chips 應用了 button 的語義標籤。

可互動的 Material Chips（即 ActionChip、ChoiceChip、FilterChip 和 InputChip）現在在語義上被標記為按鈕。但是，不可互動的資訊 Chip 則不是。

將 Chips 標記為按鈕有助於可訪問性工具、搜尋引擎和其他語義分析軟體理解應用的含義。例如，這允許螢幕閱讀器（如 Android 上的 TalkBack 和 iOS 上的 VoiceOver）將可點選的 Chip 播報為“按鈕”，這有助於使用者導航您的應用。在此更改之前，可訪問性工具的使用者體驗可能不盡如人意，除非您透過手動為應用中的 Chip 小部件新增缺失的語義來實施變通方法。

用於描述其語義屬性的、包裝所有 Chip 類別的最外層 Semantics 小部件已得到修改。

以下更改適用於 ActionChip、ChoiceChip、FilterChip 和 InputChip。

• button 屬性設定為 true。
• enabled 屬性反映了 Chip 是否當前可點選（透過設定回撥）。

這些屬性的更改使可互動 Chips 的語義行為與其他 Material Buttons 的語義行為保持一致。

對於不可互動的資訊 Chip：

• button 屬性設定為 false。
• enabled 屬性設定為 null。

您可能不需要執行任何遷移。此更改僅在您透過使用標記為 button: true 的 Semantics 小部件包裝 Chip 的 label 欄位中提供的小部件來解決 Material Chips 缺失 button 語義的問題時才會影響您。在這種情況下，內部和外部的 button 語義會發生衝突，導致在此更改引入後，按鈕的可點選區域縮小到標籤的大小。透過刪除該 Semantics 小部件並用其子項替換，或者如果仍需要將其他語義屬性應用於 Chip 的 label 小部件，則刪除 button: true 屬性來解決此問題。

以下程式碼片段使用 InputChip 作為示例，但相同的過程也適用於 ActionChip、ChoiceChip 和 FilterChip。

情況 1：刪除 Semantics 小部件。

遷移前的程式碼

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

遷移後的程式碼

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

情況 2：從 Semantics 小部件中刪除 button:true。

遷移前的程式碼

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

遷移後的程式碼

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

已釋出版本：1.23.0-7.0.pre
穩定版本：2.0.0

API 文件

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

相關議題

• Issue 58010：InputChip 在 iOS 上未宣佈任何無障礙操作

相關 PR

• PR 60141：調整 Material Chip 無障礙語義以匹配按鈕
• PR 60645：撤銷“調整 Material Chip 無障礙語義以匹配按鈕 (#60141)”
• PR 61048：重新提交“調整 Material Chip 無障礙語義以匹配按鈕 (#60141)”