概述

#

在無障礙焦點遍歷期間,Tooltip.message 會在 Tooltip.child 之後立即被訪問。

背景

#

Tooltip widget 通常包裝一個互動式 UI 元件(如按鈕),並在長按時顯示幫助訊息。當訊息可見時,輔助技術應在按鈕之後播報它。

最初,Tooltip widget 在長按時會將 Tooltip.message 放在 OverlayEntry 上。因此,在語義樹中,Tooltip.message 不會在 Tooltip.child 之後立即出現。

遷移指南

#

此更改移動了語義樹中的 tooltip 訊息。如果您的測試期望 tooltip 訊息在可見時出現在語義樹中的特定位置,您可能會看到無障礙測試失敗。請更新任何失敗的無障礙測試以適應新的 tooltip 語義順序。

例如,如果您在測試中構建了以下 widget 樹

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'),
            ],
          );
        },
      ),
    ],
  ),
);

當 tooltip 訊息可見時,此更改之前的相應語義樹應如下所示:

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

在此更改後,相同的 widget 樹會生成略有不同的語義樹,如下所示。節點 #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