-
Notifications
You must be signed in to change notification settings - Fork 29.2k
Closed
Labels
P2Important issues not at the top of the work listImportant issues not at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)Accessibility, e.g. VoiceOver or TalkBack. (aka a11y)a: text inputEntering text in a text field or keyboard related problemsEntering text in a text field or keyboard related problemscustomer: troyf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.found in release: 2.10Found to occur in 2.10Found to occur in 2.10found in release: 2.11Found to occur in 2.11Found to occur in 2.11frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer version
Description
If a form field fails validation, the error message is visually displayed but is not announced by VoiceOver.
Steps to Reproduce
- Turn on VoiceOver.
- Execute
flutter run -d chrome
on the code sample. - Tap "Submit" without entering a username.
Expected results:
The validation error message ("Please enter your username") is announced by VoiceOver.
Actual results:
The validation error message is displayed but is not read.
Workaround:
If the helperText
is set to a space, the validation error message will be announced. 🤷🏾
TextFormField(
decoration: const InputDecoration(
helperText: ' ', // Must be set to a space to announce validation errors.
labelText: 'Username',
),
validator: (String? value) {
if (value == null || value.isEmpty) {
return 'Please enter your username';
}
return null;
},
),
Code sample
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
// Auto-enable accessibility for our Blind and Low Vision customers (see
// https://docs.flutter.dev/development/accessibility-and-localization/accessibility#screen-readers).
RendererBinding.instance!.setSemanticsEnabled(true);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const appTitle = 'Form Validation Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({Key? key}) : super(key: key);
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
decoration: const InputDecoration(
labelText: 'Username',
),
validator: (String? value) {
if (value == null || value.isEmpty) {
return 'Please enter your username';
}
return null;
},
),
TextButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Submitting...')),
);
}
},
child: const Text('Submit'),
),
],
),
);
}
}
Logs
[✓] Flutter (Channel stable, 2.10.3, on macOS 11.6.2 20G314 darwin-x64, locale en-US)
• Flutter version 2.10.3 at /Users/vsomayaji/Dev/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 7e9793dee1 (5 days ago), 2022-03-02 11:23:12 -0600
• Engine revision bd539267b4
• Dart version 2.16.1
• DevTools version 2.9.2
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/vsomayaji/Library/Android/sdk
• Platform android-31, build-tools 30.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2020.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1.2)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] Connected device (1 available)
• Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.109
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
FormValidationDemo.mov
Metadata
Metadata
Assignees
Labels
P2Important issues not at the top of the work listImportant issues not at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)Accessibility, e.g. VoiceOver or TalkBack. (aka a11y)a: text inputEntering text in a text field or keyboard related problemsEntering text in a text field or keyboard related problemscustomer: troyf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.found in release: 2.10Found to occur in 2.10Found to occur in 2.10found in release: 2.11Found to occur in 2.11Found to occur in 2.11frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer version