内容

工具提示的可访问性遍历顺序已更改

内容

摘要
背景
迁移指南
时间线
参考

在可访问性焦点遍历期间，Tooltip.message 会在 Tooltip.child 之后立即访问。

Tooltip 小部件通常包装一个交互式 UI 组件（例如按钮），并在长按时显示帮助消息。当消息可见时，辅助技术应在按钮之后宣布它。

Tooltip 小部件最初将 Tooltip.message 放置在长按时的 OverlayEntry 上。因此，Tooltip.message 在语义树中并非紧随 Tooltip.child 之后。

此更改移动了语义树中的工具提示消息。如果您的测试期望工具提示消息在语义树中的特定位置出现（当它可见时），您可能会看到可访问性测试失败。更新任何失败的可访问性测试以采用新的工具提示语义顺序。

例如，如果您在测试中构建了以下小部件树

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

当工具提示消息可见时，此更改之前的相应语义树应如下所示

dartSemanticsNode#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 的子节点。

dartSemanticsNode#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 文档

Tooltip

摘要

背景

迁移指南

时间线

参考