Repository navigation
TextFields can't be interacted with when semantics are enabled #148285
Description
Steps to reproduce
- Go to https://fwa11y.web.app/#/text-field-password or any other app with a text field using an Android or iOS device
- Use a screen reader and enable semantics in the app
- 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.
Activity
darshankawar commentedon May 14, 2024
Thanks for the report. I ran the given code sample using latest stable (3.22.0) on Android as well as on iOS and below is my observation:
You mentioned that the behavior is same on Android and iOS. Can you provide short videos of both and sound enabled so that we can verify this further ?
yjbanov commentedon May 21, 2024
Starting to look into this one now.
yjbanov commentedon May 23, 2024
The culprit seems to be this change: flutter-team-archive/engine#43279. That change replaced
tapwithdidGainAccessibilityFocus. However,didGainAccessibilityFocusis not sufficient to start an editing session in the framework. The result is that the browser focuses on the<input>element, shows the virtual keyboard, and allows the user to change the value in the text field. All this happens while the framework is entirely unaware of any editing, as there's noTextInputConnectionestablished between the framework and the engine.However, simply adding
tapback to the "focus" handler will cause #128709 again. This situation ties back to #83809 wheredidLoseAccessibilityFocusdoes not result in the framework to remove the keyboard focus from the respective widget. As a result, the framework keeps sendinghasFocusset totrueon semantic nodes that should not have focus any more, which in return causes the browser to scroll to the semantic node that the user is not focusing on.[-]TextFields can't be interected with when semantics are enabled[/-][+]TextFields can't be interacted with when semantics are enabled[/+]yjbanov commentedon May 31, 2024
We're very close to landing
SemanticsAction.focus, so I'll attempt to fix this issue together with #83809 in flutter-team-archive/engine#53134.[web] switch from .didGain/LoseAccessibilityFocus to .focus (#53134)
github-actions commentedon Jun 26, 2024
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.[web] switch from .didGain/LoseAccessibilityFocus to .focus (#53360)
[web] switch to SemanticsAction.focus (attempt 3) (#53689)
[web] switch to SemanticsAction.focus (attempt 3) (flutter-team-archi…
[web] switch from .didGain/LoseAccessibilityFocus to .focus (flutter-…
[web] switch from .didGain/LoseAccessibilityFocus to .focus (flutter-…