I am trying to run the Xcode Accessibility Inspector over my Flutter app and have issues when I have a vertical list that has a nested horizontal list. The screen reader gets stuck on the horizontal list and either never progresses or drops focus. I expected the reader to read off each square but observed the reader getting stuck on horizontal list. I have tried to create an example app to demo the issue. Here is the build function of my stateless widget:
Widget _getVertList(double width) {
return ListView.builder(
shrinkWrap: true,
itemBuilder: (_, i) {
if (i != 0 && i % 3 == 0) {
return _getHorzList(width); // show horizontal list
}
return Semantics(
label: 'RED BOX $i',
child: Column(
children: [
Container(
color: Colors.red,
height: 100,
width: 100,
),
const SizedBox(
width: 10,
height: 10,
)
],
),
);
},
itemCount: 20,
);
}
Widget _getHorzList(double width) {
return SizedBox(
height: 101,
width: width,
child: Column(
children: [
Expanded(
child: ListView.builder(
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
scrollDirection: Axis.horizontal,
itemBuilder: (_, i) {
return Semantics(
label: 'Blue BOX $i',
child: Row(
children: [
Container(
color: Colors.blue,
height: 100,
width: 100,
),
const SizedBox(
width: 10,
height: 10,
)
],
),
);
},
itemCount: 10,
),
),
],
),
);
}
@override
Widget build(BuildContext context) {
final double width = MediaQuery.of(context).size.width;
return Scaffold(
body: _getVertList(width, height));
}