firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add autofocus to fix a11y issue with dialog (#152637)

Browse Source 
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.
This commit is contained in:
Denis Bowen 2024-08-20 16:25:01 -05:00 committed by GitHub
parent 448a116b82
commit 5a87890277
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dev/a11y_assessments/lib/use_cases/dialog.dart
View File

@ -42,6 +42,8 @@ class _MainWidget extends StatelessWidget {
Row( Row(
children: <Widget>[ children: <Widget>[
TextButton( TextButton(
key: const Key('OK Button'),
autofocus: true,
onPressed: () { onPressed: () {
Navigator.pop(context); Navigator.pop(context);
}, },

14
dev/a11y_assessments/test/dialog_test.dart
View File

@ -3,6 +3,7 @@
// found in the LICENSE file. // found in the LICENSE file.
import 'package:a11y_assessments/use_cases/dialog.dart'; import 'package:a11y_assessments/use_cases/dialog.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
import 'test_utils.dart'; import 'test_utils.dart';
@ -29,6 +30,19 @@ void main() {
expect(find.text('This is a typical dialog.'), findsNothing); expect(find.text('This is a typical dialog.'), findsNothing);
}); });
testWidgets('ok button has autofocus when dialog opens', (WidgetTester tester) async {
await pumpsUseCase(tester, DialogUseCase());
Future<void> invokeDialog() async {
await tester.tap(find.text('Show Dialog'));
await tester.pumpAndSettle();
}
await invokeDialog();
final Finder okButton = find.byKey(const Key('OK Button'));
expect((okButton.evaluate().single.widget as TextButton).autofocus, true);
});
testWidgets('dialog has one h1 tag', (WidgetTester tester) async { testWidgets('dialog has one h1 tag', (WidgetTester tester) async {
await pumpsUseCase(tester, DialogUseCase()); await pumpsUseCase(tester, DialogUseCase());
final Finder findHeadingLevelOnes = find.bySemanticsLabel('Dialog Demo'); final Finder findHeadingLevelOnes = find.bySemanticsLabel('Dialog Demo');