跳至主要內容
內容

工具提示的輔助功能遍歷順序已變更

內容

摘要

#

在輔助功能焦點遍歷期間，會先造訪 Tooltip.child，然後立即造訪 Tooltip.message。

背景

#

Tooltip 小工具通常會包裝一個互動式的 UI 元件，例如按鈕，並在長按時顯示說明訊息。當訊息可見時，輔助技術應在按鈕之後宣告該訊息。

Tooltip 小工具原本在長按時將 Tooltip.message 放置在 OverlayEntry 上。因此，Tooltip.message 並非緊接在語意樹中的 Tooltip.child 之後。

移轉指南

#

此變更將工具提示訊息移動到語意樹中。如果您的測試期望工具提示訊息在可見時出現在語意樹中的特定位置，您可能會看到輔助功能測試失敗。請更新任何失敗的輔助功能測試，以採用新的工具提示語意順序。

例如，如果您在測試中建構了以下小工具樹

dart
Directionality(
  textDirection: TextDirection.ltr,
  child: Overlay(
    initialEntries: <OverlayEntry>[
      OverlayEntry(
        builder: (BuildContext context) {
          return ListView(
            children: <Widget>[
              const Text('before'),
              Tooltip(
                key: tooltipKey,
                showDuration: const Duration(days: 365),
                message: 'message',
                child: const Text('child'),
              ),
              const Text('after'),
            ],
          );
        },
      ),
    ],
  ),
);

當工具提示訊息可見時，此變更之前的對應語意樹應如下所示

dart
SemanticsNode#0
 │
 ├─SemanticsNode#1
 │ │
 │ └─SemanticsNode#5
 │   │ flags: hasImplicitScrolling
 │   │ scrollChildren: 3
 │   │
 │   ├─SemanticsNode#2
 │   │   tags: RenderViewport.twoPane
 │   │   label: "before"
 │   │   textDirection: ltr
 │   │
 │   ├─SemanticsNode#3
 │   │   tags: RenderViewport.twoPane
 │   │   label: "child"
 │   │   tooltip: "message"
 │   │   textDirection: ltr
 │   │
 │   └─SemanticsNode#4
 │       tags: RenderViewport.twoPane
 │       label: "after"
 │       textDirection: ltr
 │
 └─SemanticsNode#6
     label: "message"
     textDirection: ltr

在此變更之後，相同的小工具樹會產生略微不同的語意樹，如下所示。節點 #6 成為節點 #3 的子節點，而不是節點 #0。

dart
SemanticsNode#0
 │
 └─SemanticsNode#1
   │
   └─SemanticsNode#5
     │ flags: hasImplicitScrolling
     │ scrollChildren: 3
     │
     ├─SemanticsNode#2
     │   tags: RenderViewport.twoPane
     │   label: "before"
     │   textDirection: ltr
     │
     ├─SemanticsNode#3
     │ │ tags: RenderViewport.twoPane
     │ │ label: "child"
     │ │ tooltip: "message"
     │ │ textDirection: ltr
     │ │
     │ └─SemanticsNode#6
     │     label: "message"
     │     textDirection: ltr
     │
     └─SemanticsNode#4
         tags: RenderViewport.twoPane
         label: "after"
         textDirection: ltr

時間軸

#

已納入版本：3.16.0-11.0.pre
穩定版本：3.19.0

參考

#

API 文件

相關的 PR

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