a few web tweaks for a11y assessment app (#134479)

yjbanov · web-flow · commit d0664bcd7903 · 2023-09-21T19:38:20.000Z
Mostly tweaks for better focus management, namely:

* Use `autofocus` throughout so the a11y focus is transferred to a logical place when overlaid content pops up (screen transitions, dialogs).
* Consolidate "enabled" and "disabled" widgets into the same screen. Otherwise, when only a disabled widget is shown, there's nothing to focus on and the screen reader is lost.
diff --git a/dev/a11y_assessments/lib/main.dart b/dev/a11y_assessments/lib/main.dart
@@ -2,12 +2,23 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 
 import 'use_cases/use_cases.dart';
 
+// TODO(yjbanov): https://github.com/flutter/flutter/issues/83809
+//                Currently this app (as most Flutter Web apps) relies on the
+//                `autofocus` property to guide the a11y focus when navigating
+//                across routes (screen transitions, dialogs, etc). We may want
+//                to revisit this after we figure out a long-term story for a11y
+//                focus. See also https://github.com/flutter/flutter/issues/97747
 void main() {
   runApp(const App());
+  if (kIsWeb) {
+    SemanticsBinding.instance.ensureSemantics();
+  }
 }
 
 class App extends StatelessWidget {
@@ -36,12 +47,13 @@ class App extends StatelessWidget {
 class HomePage extends StatelessWidget {
   const HomePage({super.key});
 
-  Widget _buildUseCaseItem(UseCase useCase) {
+  Widget _buildUseCaseItem(int index, UseCase useCase) {
     return Padding(
       padding: const EdgeInsets.all(10),
       child: Builder(
           builder: (BuildContext context) {
             return TextButton(
+              autofocus: index == 0,
               key: Key(useCase.name),
               onPressed: () => Navigator.of(context).pushNamed(useCase.route),
               child: Text(useCase.name),
@@ -57,7 +69,10 @@ class HomePage extends StatelessWidget {
       appBar: AppBar(title: const Text('Accessibility Assessments')),
       body: Center(
         child: ListView(
-          children: useCases.map<Widget>(_buildUseCaseItem).toList(),
+          children: List<Widget>.generate(
+            useCases.length,
+            (int index) => _buildUseCaseItem(index, useCases[index]),
+          ),
         ),
       ),
     );
diff --git a/dev/a11y_assessments/lib/use_cases/check_box_list_tile.dart b/dev/a11y_assessments/lib/use_cases/check_box_list_tile.dart
@@ -30,16 +30,29 @@ class _MainWidgetState extends State<_MainWidget> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('CheckBoxListTile')),
-      body: Center(
-        child: CheckboxListTile(
-          value: _checked,
-          onChanged: (bool? value) {
-            setState(() {
-              _checked = value!;
-            });
-          },
-          title: const Text('a check box list title'),
-        ),
+      body: ListView(
+        children: <Widget>[
+          CheckboxListTile(
+            autofocus: true,
+            value: _checked,
+            onChanged: (bool? value) {
+              setState(() {
+                _checked = value!;
+              });
+            },
+            title: const Text('a check box list title'),
+          ),
+          CheckboxListTile(
+            value: _checked,
+            onChanged: (bool? value) {
+              setState(() {
+                _checked = value!;
+              });
+            },
+            title: const Text('a disabled check box list title'),
+            enabled: false,
+          ),
+        ],
       ),
     );
   }
diff --git a/dev/a11y_assessments/lib/use_cases/check_box_list_tile_disabled.dart b/dev/a11y_assessments/lib/use_cases/check_box_list_tile_disabled.dart
diff --git a/dev/a11y_assessments/lib/use_cases/date_picker.dart b/dev/a11y_assessments/lib/use_cases/date_picker.dart
@@ -36,6 +36,7 @@ class _MainWidgetState extends State<_MainWidget> {
       ),
       body: Center(
         child: TextButton(
+          autofocus: true,
           onPressed: () => showDatePicker(
             context: context,
             initialEntryMode: DatePickerEntryMode.calendarOnly,
diff --git a/dev/a11y_assessments/lib/use_cases/dialog.dart b/dev/a11y_assessments/lib/use_cases/dialog.dart
@@ -29,6 +29,7 @@ class _MainWidget extends StatelessWidget {
       ),
       body: Center(
         child: TextButton(
+          autofocus: true,
           onPressed: () => showDialog<String>(
             context: context,
             builder: (BuildContext context) => Dialog(
@@ -41,6 +42,7 @@ class _MainWidget extends StatelessWidget {
                     const Text('This is a typical dialog.'),
                     const SizedBox(height: 15),
                     TextButton(
+                      autofocus: true,
                       onPressed: () {
                         Navigator.pop(context);
                       },
diff --git a/dev/a11y_assessments/lib/use_cases/slider.dart b/dev/a11y_assessments/lib/use_cases/slider.dart
@@ -37,6 +37,7 @@ class MainWidgetState extends State<MainWidget> {
       ),
       body: Center(
         child: Slider(
+          autofocus: true,
           value: currentSliderValue,
           max: 100,
           divisions: 5,
diff --git a/dev/a11y_assessments/lib/use_cases/text_field.dart b/dev/a11y_assessments/lib/use_cases/text_field.dart
@@ -28,14 +28,28 @@ class _MainWidget extends StatelessWidget {
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
         title: const Text('TextField'),
       ),
-      body: const Center(
-        child: TextField(
-          decoration: InputDecoration(
-            labelText: 'Email',
-            suffixText: '@gmail.com',
-            hintText: 'Enter your email',
+      body: ListView(
+        children: <Widget>[
+          const TextField(
+            key: Key('enabled text field'),
+            autofocus: true,
+            decoration: InputDecoration(
+              labelText: 'Email',
+              suffixText: '@gmail.com',
+              hintText: 'Enter your email',
+            ),
           ),
-        )
+          TextField(
+            key: const Key('disabled text field'),
+            decoration: const InputDecoration(
+              labelText: 'Email',
+              suffixText: '@gmail.com',
+              hintText: 'Enter your email',
+            ),
+            enabled: false,
+            controller: TextEditingController(text: 'xyz'),
+          ),
+        ],
       ),
     );
   }
diff --git a/dev/a11y_assessments/lib/use_cases/text_field_disabled.dart b/dev/a11y_assessments/lib/use_cases/text_field_disabled.dart
diff --git a/dev/a11y_assessments/lib/use_cases/text_field_password.dart b/dev/a11y_assessments/lib/use_cases/text_field_password.dart
@@ -28,14 +28,27 @@ class _MainWidget extends StatelessWidget {
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
         title: const Text('TextField password'),
       ),
-      body: const Center(
-        child: TextField(
-          decoration: InputDecoration(
-            labelText: 'Password',
-            hintText: 'Enter your password',
+      body: ListView(
+        children: const <Widget>[
+          TextField(
+            key: Key('enabled password'),
+            autofocus: true,
+            decoration: InputDecoration(
+              labelText: 'Password',
+              hintText: 'Enter your password',
+            ),
+            obscureText: true,
           ),
-          obscureText: true,
-        )
+          TextField(
+            key: Key('disabled password'),
+            decoration: InputDecoration(
+              labelText: 'Password',
+              hintText: 'Enter your password',
+            ),
+            enabled: false,
+            obscureText: true,
+          ),
+        ],
       ),
     );
   }
diff --git a/dev/a11y_assessments/lib/use_cases/use_cases.dart b/dev/a11y_assessments/lib/use_cases/use_cases.dart
@@ -5,12 +5,10 @@
 import 'package:flutter/widgets.dart';
 
 import 'check_box_list_tile.dart';
-import 'check_box_list_tile_disabled.dart';
 import 'date_picker.dart';
 import 'dialog.dart';
 import 'slider.dart';
 import 'text_field.dart';
-import 'text_field_disabled.dart';
 import 'text_field_password.dart';
 
 abstract class UseCase {
@@ -21,11 +19,9 @@ abstract class UseCase {
 
 final List<UseCase> useCases = <UseCase>[
   CheckBoxListTile(),
-  CheckBoxListTileDisabled(),
   DialogUseCase(),
   SliderUseCase(),
   TextFieldUseCase(),
-  TextFieldDisabledUseCase(),
   TextFieldPasswordUseCase(),
   DatePickerUseCase(),
 ];
diff --git a/dev/a11y_assessments/pubspec.yaml b/dev/a11y_assessments/pubspec.yaml
@@ -1,5 +1,5 @@
 name: a11y_assessments
-description: "A new Flutter project."
+description: A new Flutter project
 
 environment:
   sdk: '>=3.2.0-22.0.dev <4.0.0'
diff --git a/dev/a11y_assessments/test/text_field_disabled_test.dart b/dev/a11y_assessments/test/text_field_disabled_test.dart
diff --git a/dev/a11y_assessments/test/text_field_password_test.dart b/dev/a11y_assessments/test/text_field_password_test.dart
@@ -11,12 +11,23 @@ import 'test_utils.dart';
 void main() {
   testWidgets('text field password can run', (WidgetTester tester) async {
     await pumpsUseCase(tester, TextFieldPasswordUseCase());
-    expect(find.byType(TextField), findsOneWidget);
+    expect(find.byType(TextField), findsExactly(2));
 
-    await tester.tap(find.byType(TextField));
-    await tester.pumpAndSettle();
-    await tester.enterText(find.byType(TextField), 'abc');
-    await tester.pumpAndSettle();
-    expect(find.text('abc'), findsOneWidget);
+    // Test the enabled password
+    {
+      final Finder finder = find.byKey(const Key('enabled password'));
+      await tester.tap(finder);
+      await tester.pumpAndSettle();
+      await tester.enterText(finder, 'abc');
+      await tester.pumpAndSettle();
+      expect(find.text('abc'), findsOneWidget);
+    }
+
+    // Test the disabled password
+    {
+      final Finder finder = find.byKey(const Key('disabled password'));
+      final TextField passwordField = tester.widget<TextField>(finder);
+      expect(passwordField.enabled, isFalse);
+    }
   });
 }
diff --git a/dev/a11y_assessments/test/text_field_test.dart b/dev/a11y_assessments/test/text_field_test.dart
diff --git a/dev/a11y_assessments/web/manifest.json b/dev/a11y_assessments/web/manifest.json
