Skip to content

[A11y][Android] unexpected hittest order when using talkback #177024

@chunhtai

Description

@chunhtai

Steps to reproduce

  1. turn on talkback
  2. open the dialog by clicking the button
  3. tap anywhere inside the dialog except the two text field

Expected results

a11y focus should stay where they are

Actual results

a11y focus shifts to dismiss modal barrier. This is due to the the hittest continue to the next child even through the pointer should be absorb when hittest hit in bound

Code sample

Code sample
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Semantics Issue', home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _onPressed() {
    showDialog(
      context: context,
      barrierColor: Colors.grey.shade400,
      builder: (context) {
        return _dialogContent;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: <Widget>[
            Semantics(
              container: true,
              child: FilledButton(
                onPressed: _onPressed,
                child: const Text('Show Dialog'),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget get _dialogContent => Center(
    child: Container(
      margin: const EdgeInsets.all(50),
      child: const Material(
        child: SizedBox(
          height: 250,
          width: 250,
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              children: [
                TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Form field one',
                  ),
                ),
                SizedBox(height: 40),
                TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Form field two',
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[Paste your output here]

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listteam-androidOwned by Android platform teamtriaged-androidTriaged by Android platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions