Repository: flutter
Issue: Multiple tabs required in screen reader to navigate through HtmlElementViews in a carousel
Labels: engine,a: accessibility,platform-web,P2,customer: huggsy (g3),team-web,triaged-web

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.

<details>
<summary>Repro code</summary>

```
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),
      ),
    );
  }
}
```
</details>