[web][a11y][voiceover] Scrolling order goes off time to time for long list #73347
Description
For the tests I did, scrolling works with semantics. However when there is a really long list involved, when going backwards in the list sometimes the order goes off. Both for horizontal and vertical lists.
The dom tree looks like this when the order is off:
The element that confuses the order (Netherlands list item in this case) does not get assigned coordinates (left and top values or a matrix). The reason is observed to be information received from the framework (effective transform is identity) in the else branch: https://github.com/flutter/engine/blob/master/lib/web_ui/lib/src/engine/semantics/semantics.dart#L908
The code I used (list from this examples: https://pusher.com/tutorials/flutter-listviews):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'ListViews',
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: Scaffold(
appBar: AppBar(title: Text('ListViews')),
body: BodyLayout(),
),
);
}
}
class BodyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return _myListView(context);
}
}
Widget _myListView(BuildContext context) {
final europeanCountries = [
'Albania',
'Andorra',
'Armenia',
'Austria',
'Azerbaijan',
'Belarus',
'Belgium',
'Bosnia and Herzegovina',
'Bulgaria',
'Croatia',
'Cyprus',
'Czech Republic',
'Denmark',
'Estonia',
'Finland',
'France',
'Georgia',
'Germany',
'Greece',
'Hungary',
'Iceland',
'Ireland',
'Italy',
'Kazakhstan',
'Kosovo',
'Latvia',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macedonia',
'Malta',
'Moldova',
'Monaco',
'Montenegro',
'Netherlands',
'Norway',
'Poland',
'Portugal',
'Romania',
'Russia',
'San Marino',
'Serbia',
'Slovakia',
'Slovenia',
'Spain',
'Sweden',
'Switzerland',
'Turkey',
'Ukraine',
'United Kingdom',
'Vatican City'
];
return ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Container(
// Horizontal list.
margin: const EdgeInsets.symmetric(horizontal: 1.0),
color: Colors.tealAccent,
child: Text('${europeanCountries[index]}'),
);
},
);
}