工具提示的可访问性遍历顺序已更改
概述
#在可访问性焦点遍历期间,Tooltip.message
会紧接着 Tooltip.child
之后被访问。
背景
#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