Material Chip 按鈕語義

為了無障礙目的，Flutter 現在會將 button 的語義標籤應用於所有可互動的 Material Chips。

可互動的 Material Chips (即 ActionChip、ChoiceChip、FilterChip 和 InputChip) 現在在語義上被標記為按鈕。然而，不可互動的資訊 Chip 則沒有。

將 Chips 標記為按鈕有助於輔助工具、搜尋引擎和其他語義分析軟體理解應用程式的含義。例如，它可以讓螢幕閱讀器 (如 Android 上的 TalkBack 和 iOS 上的 VoiceOver) 將可點擊的 Chip 公告為「按鈕」，這可以協助使用者瀏覽您的應用程式。在此變更之前，輔助工具的使用者可能會有較差的體驗，除非您透過手動將遺失的語義新增至應用程式中的 Chip 小工具來解決這個問題。

修改了最外層的 Semantics 小工具，該小工具會包裝所有 Chip 類別以描述其語義屬性。

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

• button 屬性設定為 true。
• enabled 屬性反映 Chip 是否目前可點擊 (透過設定回呼)。

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

對於不可互動的資訊 Chip

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

您可能不需要執行任何遷移。 只有當您透過將小工具包裝在標記為 button: true 的 Semantics 小工具中，來解決 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

相關問題

• 問題 58010：InputChip 在 iOS 上沒有為 a11y 公告任何動作

相關 PR

• PR 60141：調整 Material Chip a11y 語義以符合按鈕
• PR 60645：還原「調整 Material Chip a11y 語義以符合按鈕 (#60141)」
• PR 61048：重新實作「調整 Material Chip a11y 語義以符合按鈕 (#60141)」

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-04-04。 檢視原始碼 或 回報問題。