Skip to content

Commit e0cb893

Browse files
DBowen33Buchimi
authored andcommitted
add autofocus to fix a11y issue with dialog (flutter#152637)
Add autofocus=true to first TextButton in dialog so that focus automatically goes to an interactive element when dialog is opened. Before: https://screencast.googleplex.com/cast/NTYxNTczMTk2MDk3MTI2NHxlMjAyOTMzZi1lNw After: https://screencast.googleplex.com/cast/NTk1NzMxNjYxNTYwMjE3NnxlYWNlM2Q1MC1jYw fixes b/338656477 NOTE: This would be a good candidate to update the documentation for Dialogs and TextButtons to encourage the user to add autofocus=true on at least one button so that focus automatically goes to an interactive element instead of the actual Dialog element.
1 parent 2493bec commit e0cb893

2 files changed

Lines changed: 16 additions & 0 deletions

File tree

dev/a11y_assessments/lib/use_cases/dialog.dart

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ class _MainWidget extends StatelessWidget {
4242
Row(
4343
children: <Widget>[
4444
TextButton(
45+
key: const Key('OK Button'),
46+
autofocus: true,
4547
onPressed: () {
4648
Navigator.pop(context);
4749
},

dev/a11y_assessments/test/dialog_test.dart

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
// found in the LICENSE file.
44

55
import 'package:a11y_assessments/use_cases/dialog.dart';
6+
import 'package:flutter/material.dart';
67
import 'package:flutter_test/flutter_test.dart';
78

89
import 'test_utils.dart';
@@ -29,6 +30,19 @@ void main() {
2930
expect(find.text('This is a typical dialog.'), findsNothing);
3031
});
3132

33+
testWidgets('ok button has autofocus when dialog opens', (WidgetTester tester) async {
34+
await pumpsUseCase(tester, DialogUseCase());
35+
36+
Future<void> invokeDialog() async {
37+
await tester.tap(find.text('Show Dialog'));
38+
await tester.pumpAndSettle();
39+
}
40+
41+
await invokeDialog();
42+
final Finder okButton = find.byKey(const Key('OK Button'));
43+
expect((okButton.evaluate().single.widget as TextButton).autofocus, true);
44+
});
45+
3246
testWidgets('dialog has one h1 tag', (WidgetTester tester) async {
3347
await pumpsUseCase(tester, DialogUseCase());
3448
final Finder findHeadingLevelOnes = find.bySemanticsLabel('Dialog Demo');

0 commit comments

Comments
 (0)