flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
164.47k stars 27.13k forks source link

[Semantics / Accessibility] TextField is invisible to TalkBack when suffixIcon is a IconButton. #151980

Open Vladon79 opened 1 month ago

Vladon79 commented 1 month ago

Steps to reproduce

  1. TextField -> decoration: InputDecoration -> suffixIcon: IconButton.
  2. Enable TalkBack on your device.
  3. Click on the input.

Expected results

When pressed on the input, it should be announced: : "edit box"

Actual results

It is not possible to click on TextField.

Code sample

Code sample ``` import 'package:flutter/material.dart'; void main() { 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), useMaterial3: true, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { late final TextEditingController searchController = TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title), ), body: Center( child: TextField( decoration: InputDecoration( suffixIcon: IconButton( onPressed: () {}, icon: const Text('icon'), ), ), ), ), ); } } ```

Screenshots or Video

Screenshots / Video demonstration https://github.com/user-attachments/assets/b8de7cfb-e588-4b43-a7a4-212613e182d9

Logs

Logs ```console [Paste your logs here] ```

Flutter Doctor output

Doctor output ```console [✓] Flutter (Channel stable, 3.22.2, on macOS 13.5.1 22G90 darwin-x64, locale en-US) [!] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2022.3) [✓] VS Code (version 1.90.2) [✓] Connected device (3 available) [✓] Network resources ```
Vladon79 commented 1 month ago

It will work if you add Semantics.

 TextField(
          decoration: InputDecoration(
            suffixIcon: Semantics(
              textField: true,
              child: IconButton(
                onPressed: () {},
                icon: const Text('icon'),
              ),
            ),
          ),
        ),
huycozy commented 1 month ago

Thanks for the report. Reproduced this issue on Android with TalkBack. On iOS with VoiceOver, the TextField is focusable and read as desired. Similar issue at https://github.com/flutter/flutter/issues/39918 which was fixed a long time ago.

Verified on the latest Flutter stable 3.22.3 and master 3.24.0-1.0.pre.197.