Semantics is misaligned with actual component on web #171264

import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SemanticsBinding.instance.ensureSemantics();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: DataTableScreen(),
    );
  }
}

class DataTableScreen extends StatelessWidget {
  final List<Map<String, dynamic>> users = [
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
    {'name': 'Alice', 'age': 30, 'email': '[email protected]'},
    {'name': 'Bob', 'age': 25, 'email': '[email protected]'},
    {'name': 'Charlie', 'age': 35, 'email': '[email protected]'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Data Table')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        scrollDirection: Axis.vertical,
        child: DataTable(
          dataRowMaxHeight: double.infinity,
          dataRowMinHeight: 70,
          showCheckboxColumn: false,
          columns: const [
            DataColumn(label: Text('Name')),
            DataColumn(label: Text('Age')),
            DataColumn(label: Text('Email')),
          ],
          rows: users
              .map(
                (user) => DataRow(
                  cells: [
                    DataCell(
                      onTap: () => print(user['name']),
                      Text(user['name']),
                    ),
                    DataCell(Text(user['age'].toString())),
                    DataCell(Text(user['email'])),
                  ],
                ),
              )
              .toList(),
        ),
      ),
    );
  }
}