Skip to content

TextFields can't be interacted with when semantics are enabled #148285

@tugorez

Description

@tugorez

Steps to reproduce

  1. Go to https://fwa11y.web.app/#/text-field-password or any other app with a text field using an Android or iOS device
  2. Use a screen reader and enable semantics in the app
  3. Try to type text and you'll see the erratic behavior.

Expected results

Users should be able to easily type text into TextFields.

Actual results

It seems very complicated to type text into textfields when a screen reader is enabled.

Code sample

Another sample app
import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(title: 'Flutter Focus'),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key, required this.title});

  final String title;

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              for (int i = 0; i < 6; i++)
                if (i % 2 != 0)
                  const TextField(
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Type Something',
                    ),
                  )
                else
                  TextButton(
                    onPressed: _incrementCounter,
                    child: const Text('Press me to increase count'),
                  ),
              Text('You have pushed the button this many times: $_counter'),
              const SizedBox(height: 100),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter Doctor output

I'm able to reproduce this since version 3.19.0 on both Android and iOS using talback and voiceover respectively.

Metadata

Metadata

Assignees

Labels

P0Critical issues such as a build break or regressiona: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)a: text inputEntering text in a text field or keyboard related problemsplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions