[web][iOS Safari] Long Semantics label overflows its button and intercepts taps on a later sliver #192466

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

const String longLabel =
    'Upper control with a deliberately long accessible description. '
    'This entire description belongs only to the upper control. '
    'It must never intercept a tap on the separate lower control.';

SemanticsHandle? semanticsHandle;

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  final Map<String, String> parameters = Uri.base.queryParameters;
  final bool enableSemantics = parameters['semantics'] != 'off';
  final bool useLongLabel = parameters['label'] != 'short';
  if (kIsWeb && enableSemantics) {
    semanticsHandle = SemanticsBinding.instance.ensureSemantics();
  }
  runApp(
    ReproducerApp(
      enableSemantics: enableSemantics,
      useLongLabel: useLongLabel,
      layout: parameters['layout'] ?? 'slivers',
    ),
  );
}

class ReproducerApp extends StatelessWidget {
  const ReproducerApp({
    super.key,
    required this.enableSemantics,
    required this.useLongLabel,
    required this.layout,
  });

  final bool enableSemantics;
  final bool useLongLabel;
  final String layout;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ReproducerScreen(
        enableSemantics: enableSemantics,
        useLongLabel: useLongLabel,
        layout: layout,
      ),
    );
  }
}

class ReproducerScreen extends StatefulWidget {
  const ReproducerScreen({
    super.key,
    required this.enableSemantics,
    required this.useLongLabel,
    required this.layout,
  });

  final bool enableSemantics;
  final bool useLongLabel;
  final String layout;

  @override
  State<ReproducerScreen> createState() => _ReproducerScreenState();
}

class _ReproducerScreenState extends State<ReproducerScreen> {
  int upperCount = 0;
  int lowerCount = 0;
  String lastCallback = 'none';

  void recordTap(String control) {
    setState(() {
      lastCallback = control;
      if (control == 'UPPER') {
        upperCount++;
      } else {
        lowerCount++;
      }
    });
    debugPrint('CALLBACK $control upper=$upperCount lower=$lowerCount');
  }

  Widget buildControl(String name, String accessibleLabel, Color color) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(name),
        Semantics(
          container: true,
          button: true,
          label: accessibleLabel,
          child: Material(
            color: color,
            child: InkWell(
              key: ValueKey<String>(name),
              onTap: () => recordTap(name),
              child: SizedBox(
                width: 52,
                height: 52,
                child: ExcludeSemantics(
                  child: Center(
                    child: Text(
                      name.substring(0, 1),
                      style: const TextStyle(color: Colors.white, fontSize: 24),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: buildLayout(<Widget>[
            const Text(
              'Tap the blue LOWER button',
              style: TextStyle(fontSize: 20),
            ),
            const SizedBox(height: 12),
            Text(
              'Semantics: ${widget.enableSemantics ? 'on' : 'off'}; '
              'label: ${widget.useLongLabel ? 'long' : 'short'}\n'
              'Layout: ${widget.layout}',
            ),
            const SizedBox(height: 24),
            buildControl(
              'UPPER',
              widget.useLongLabel ? longLabel : 'Upper',
              Colors.teal,
            ),
            const SizedBox(height: 100),
            buildControl('LOWER', 'Lower', Colors.blue),
            const SizedBox(height: 32),
            Text(
              'UPPER callbacks: $upperCount\n'
              'LOWER callbacks: $lowerCount\n'
              'Last callback: $lastCallback',
              style: const TextStyle(fontSize: 20),
            ),
          ]),
        ),
      ),
    );
  }

  Widget buildLayout(List<Widget> children) {
    return switch (widget.layout) {
      'column' => Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: children,
      ),
      'list' => ListView(children: children),
      _ => CustomScrollView(
        slivers: children
            .map((Widget child) => SliverToBoxAdapter(child: child))
            .toList(),
      ),
    };
  }
}