Multiple tabs required in screen reader to navigate through HtmlElementViews in a carousel #124765
Description
Copied from Google internal issue b/277797342 and b/266976425:
I am seeing a strange issue using screen reader navigation in Flutter Web when using HtmlElementView in a carousel:
- For single ui element it take 2 tabs to move to the next element.
- For carousel it takes 2*(no of elements in the carousel)
- This issue exists only in the widgets that use HtmlElementView for the figure element. The widgets that use an ImageElement work as expected.
This linear scaling of the number of tabs required to navigate to the next elements seems like a bug! Do check the internal bugs linked above for more context.
Repro code
import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
void main() {
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory('hello-html', (int viewId) {
final iframe = ImageElement()
..src =
'https://fonts.gstatic.com/s/i/productlogos/kidsspace/v5/web-48dp/logo_kidsspace_color_1x_web_48dp.png';
return iframe;
});
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title, style: TextStyle(fontFamily: 'ProductSans')),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Button tapped $_counter time${_counter == 1 ? '' : 's'}.',
key: Key('CountText'),
),
SizedBox(
height: 400,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: 60,
height: 60,
child: SizedBox(
width: 60,
height: 60,
child: HtmlElementView(
viewType: 'hello-html',
),
),
),
SizedBox(height: 8),
SizedBox(
width: 60,
height: 60,
child: SizedBox(
width: 60,
height: 60,
child: HtmlElementView(
viewType: 'hello-html',
),
),
),
],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {},
child: Text('Button 1'),
),
],
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}