Flutter Semantics gets stuck in nested lists

Viewed 86

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));
  }
0 Answers
Related