fix(flutter/a11y assessments): h1 missing a11y from each page on the web app (flutter#152198)

essjay05 · web-flow · commit 85b3d9767336 · 2024-08-13T22:22:28.000Z
Adds Semantic Widget to wrap the contents of each page's AppBar title attribute and adds header: true and headingLevel: 1 as Semantic attributes so the content of the title is compiled as an h1 tag to meet accessibility guidelines that each page must have a h1 tag present. Also updates the test cases for the home page and each use case page to check for its respective h1. [Before Screenshot - Accessibility Assessments Home Page](https://screenshot.googleplex.com/4i9LuiGwvLnEcZ8) [Before Screenshot - Checkbox List Title -- note: each use case page is missing an h1](https://screenshot.googleplex.com/3qQjfqvAMTehRsm) [After Screenshot - Accessibility Assessments Home Page](https://screenshot.googleplex.com/APSJJXBmwNBP35m) [After Screenshot - Checkbox List Title-- note: change is similar across each Accessibility use case page](https://screenshot.googleplex.com/6EGgZnTusEgeN5L) Fixes b/338035526
diff --git a/dev/a11y_assessments/lib/main.dart b/dev/a11y_assessments/lib/main.dart
@@ -77,7 +77,9 @@ class HomePageState extends State<HomePage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('Accessibility Assessments')),
+      appBar: AppBar(
+        title: Semantics(headingLevel: 1, child: const Text('Accessibility Assessments')),
+      ),
       body: Center(
         child: ListView(
           controller: scrollController,
diff --git a/dev/a11y_assessments/lib/use_cases/action_chip.dart b/dev/a11y_assessments/lib/use_cases/action_chip.dart
@@ -31,7 +31,7 @@ class MainWidgetState extends State<MainWidget> {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('ActionChip'),
+        title: Semantics(headingLevel:1, child: const Text('ActionChip')),
       ),
       body: Center(
         child: Column(
diff --git a/dev/a11y_assessments/lib/use_cases/auto_complete.dart b/dev/a11y_assessments/lib/use_cases/auto_complete.dart
@@ -50,7 +50,7 @@ class _MainWidgetState extends State<_MainWidget> {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('AutoComplete'),
+        title: Semantics(headingLevel: 1, child: const Text('AutoComplete Demo')),
       ),
       body: Center(
         child: Column(
diff --git a/dev/a11y_assessments/lib/use_cases/badge.dart b/dev/a11y_assessments/lib/use_cases/badge.dart
@@ -25,12 +25,13 @@ class MainWidget extends StatefulWidget {
 }
 
 class MainWidgetState extends State<MainWidget> {
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('Badge'),
+        title: Semantics(headingLevel: 1, child: const Text('Badge Demo')),
       ),
       body: const Center(
         child: Badge(
diff --git a/dev/a11y_assessments/lib/use_cases/card.dart b/dev/a11y_assessments/lib/use_cases/card.dart
@@ -31,7 +31,7 @@ class MainWidgetState extends State<MainWidget> {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('Card'),
+        title: Semantics(headingLevel: 1, child: const Text('Card')),
       ),
       body: const Center(
         child: Column(
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
@@ -28,7 +28,9 @@ class _MainWidgetState extends State<_MainWidget> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('CheckBoxListTile')),
+      appBar: AppBar(
+        title: Semantics(headingLevel: 1, child: const Text('CheckBoxListTile Demo')),
+      ),
       body: ListView(
         children: <Widget>[
           CheckboxListTile(
diff --git a/dev/a11y_assessments/lib/use_cases/date_picker.dart b/dev/a11y_assessments/lib/use_cases/date_picker.dart
@@ -30,7 +30,7 @@ class _MainWidgetState extends State<_MainWidget> {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('DatePicker'),
+        title: Semantics(headingLevel: 1, child: const Text('DatePicker Demo')),
       ),
       body: Center(
         child: TextButton(
diff --git a/dev/a11y_assessments/lib/use_cases/dialog.dart b/dev/a11y_assessments/lib/use_cases/dialog.dart
@@ -24,7 +24,7 @@ class _MainWidget extends StatelessWidget {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('Dialog'),
+        title: Semantics(headingLevel: 1, child: const Text('Dialog Demo')),
       ),
       body: Center(
         child: TextButton(
diff --git a/dev/a11y_assessments/lib/use_cases/drawer.dart b/dev/a11y_assessments/lib/use_cases/drawer.dart
@@ -31,8 +31,8 @@ class _DrawerExampleState extends State<DrawerExample> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: const Text('Drawer Example'),
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        title: Semantics(headingLevel: 1, child: const Text('Drawer Demo')),
       ),
       endDrawer: Drawer(
         child: ListView(
diff --git a/dev/a11y_assessments/lib/use_cases/expansion_tile.dart b/dev/a11y_assessments/lib/use_cases/expansion_tile.dart
@@ -32,7 +32,7 @@ class _ExpansionTileExampleState extends State<ExpansionTileExample> {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('ExpansionTile'),
+        title: Semantics(headingLevel: 1, child: const Text('ExpansionTile')),
       ),
       body: Column(
         children: <Widget>[
diff --git a/dev/a11y_assessments/lib/use_cases/material_banner.dart b/dev/a11y_assessments/lib/use_cases/material_banner.dart
@@ -60,7 +60,7 @@ class MainWidgetState extends State<MainWidget> {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('MaterialBanner'),
+        title: Semantics(headingLevel: 1, child: const Text('MaterialBanner Demo')),
       ),
       body: Center(
         child: ElevatedButton(
diff --git a/dev/a11y_assessments/lib/use_cases/navigation_bar.dart b/dev/a11y_assessments/lib/use_cases/navigation_bar.dart
@@ -32,7 +32,7 @@ class MainWidgetState extends State<MainWidget> {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('NavigationBar'),
+        title: Semantics(headingLevel: 1, child: const Text('NavigationBar Demo')),
       ),
       bottomNavigationBar: NavigationBar(
         onDestinationSelected: (int index) {
diff --git a/dev/a11y_assessments/lib/use_cases/navigation_drawer.dart b/dev/a11y_assessments/lib/use_cases/navigation_drawer.dart
@@ -62,8 +62,8 @@ class _NavigationDrawerExampleState extends State<NavigationDrawerExample> {
     return Scaffold(
       key: scaffoldKey,
       appBar: AppBar(
-        title: const Text('Navigation Drawer Example'),
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        title: Semantics(headingLevel: 1, child: const Text('Navigation Drawer Demo')),
       ),
       body: SafeArea(
         bottom: false,
diff --git a/dev/a11y_assessments/lib/use_cases/radio_list_tile.dart b/dev/a11y_assessments/lib/use_cases/radio_list_tile.dart
@@ -36,7 +36,9 @@ class _MainWidgetState extends State<_MainWidget> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('Radio button')),
+      appBar: AppBar(
+        title: Semantics(headingLevel: 1, child: const Text('Radio button demo'))
+      ),
       body: ListView(
         children: <Widget>[
           RadioListTile<SingingCharacter>(
diff --git a/dev/a11y_assessments/lib/use_cases/slider.dart b/dev/a11y_assessments/lib/use_cases/slider.dart
@@ -33,7 +33,7 @@ class MainWidgetState extends State<MainWidget> {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('Slider'),
+        title: Semantics(headingLevel: 1, child: const Text('Slider demo')),
       ),
       body: Center(
         child: Semantics(
diff --git a/dev/a11y_assessments/lib/use_cases/snack_bar.dart b/dev/a11y_assessments/lib/use_cases/snack_bar.dart
@@ -30,7 +30,7 @@ class MainWidgetState extends State<MainWidget> {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('SnackBar'),
+        title: Semantics(headingLevel: 1, child: const Text('SnackBar')),
       ),
       body: Center(
         child: Column(
diff --git a/dev/a11y_assessments/lib/use_cases/switch_list_tile.dart b/dev/a11y_assessments/lib/use_cases/switch_list_tile.dart
@@ -32,7 +32,7 @@ class _SwitchListTileExampleState extends State<SwitchListTileExample> {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('SwitchListTile'),
+        title: Semantics(headingLevel: 1, child: const Text('SwitchListTile')),
       ),
       body: Center(
         child: Column(
diff --git a/dev/a11y_assessments/lib/use_cases/text_button.dart b/dev/a11y_assessments/lib/use_cases/text_button.dart
@@ -32,7 +32,7 @@ class MainWidgetState extends State<MainWidget> {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('TextButton'),
+        title: Semantics(headingLevel: 1, child: const Text('TextButton Demo')),
       ),
       body: Center(
         child: Column(
diff --git a/dev/a11y_assessments/lib/use_cases/text_field.dart b/dev/a11y_assessments/lib/use_cases/text_field.dart
@@ -25,7 +25,7 @@ class _MainWidget extends StatelessWidget {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('TextField'),
+        title: Semantics(headingLevel: 1, child: const Text('TextField demo')),
       ),
       body: ListView(
         children: <Widget>[
diff --git a/dev/a11y_assessments/lib/use_cases/text_field_password.dart b/dev/a11y_assessments/lib/use_cases/text_field_password.dart
@@ -25,7 +25,7 @@ class _MainWidget extends StatelessWidget {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        title: const Text('TextField password'),
+        title: Semantics(headingLevel: 1, child: const Text('TextField password demo')),
       ),
       body: ListView(
         children: const <Widget>[
diff --git a/dev/a11y_assessments/test/auto_complete_test.dart b/dev/a11y_assessments/test/auto_complete_test.dart
@@ -16,4 +16,11 @@ void main() {
 
     expect(find.text('apple'), findsOneWidget);
   });
+
+  testWidgets('auto complete has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, AutoCompleteUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel(RegExp('AutoComplete Demo'));
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/badge_test.dart b/dev/a11y_assessments/test/badge_test.dart
@@ -13,4 +13,11 @@ void main() {
     expect(find.semantics.byLabel('5 new messages'), findsOne);
     expect(find.semantics.byLabel('Messages'), findsOne);
   });
+
+  testWidgets('badge has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, BadgeUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel(RegExp('Badge Demo'));
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/check_box_list_tile_test.dart b/dev/a11y_assessments/test/check_box_list_tile_test.dart
@@ -14,4 +14,11 @@ void main() {
     expect(find.text('a check box list title'), findsOneWidget);
     expect(find.text('a disabled check box list title'), findsOneWidget);
   });
+
+  testWidgets('check box list has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, CheckBoxListTile());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel(RegExp('CheckBoxListTile Demo'));
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/date_picker_test.dart b/dev/a11y_assessments/test/date_picker_test.dart
@@ -17,4 +17,11 @@ void main() {
     await tester.pumpAndSettle();
     expect(find.byType(DatePickerDialog), findsOneWidget);
   });
+
+  testWidgets('datepicker has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, DatePickerUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('DatePicker Demo');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/dialog_test.dart b/dev/a11y_assessments/test/dialog_test.dart
@@ -28,4 +28,11 @@ void main() {
     await tester.pumpAndSettle();
     expect(find.text('This is a typical dialog.'), findsNothing);
   });
+
+  testWidgets('dialog has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, DialogUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('Dialog Demo');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/drawer_test.dart b/dev/a11y_assessments/test/drawer_test.dart
@@ -20,4 +20,11 @@ void main() {
 
     expect(find.byType(Drawer), findsExactly(1));
   });
+
+  testWidgets('drawer has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, DrawerUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('Drawer Demo');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/home_page_test.dart b/dev/a11y_assessments/test/home_page_test.dart
@@ -140,4 +140,11 @@ void main() {
     expect(appScheme.inversePrimary.value,
         MaterialDynamicColors.inversePrimary.getArgb(highContrastScheme));
   });
+
+  testWidgets('a11y assessments home page has one h1 tag', (WidgetTester tester) async {
+    await tester.pumpWidget(const App());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('Accessibility Assessments');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/material_banner_test.dart b/dev/a11y_assessments/test/material_banner_test.dart
@@ -20,4 +20,11 @@ void main() {
     await tester.pumpAndSettle();
     expect(find.text('Hello, I am a Material Banner'), findsNothing);
   });
+
+  testWidgets('material banner has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, MaterialBannerUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('MaterialBanner Demo');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/navigation_bar_test.dart b/dev/a11y_assessments/test/navigation_bar_test.dart
@@ -20,4 +20,11 @@ void main() {
     await tester.pumpAndSettle();
     expect(find.text('Page 3'), findsOneWidget);
   });
+
+  testWidgets('navigation bar has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, NavigationBarUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('NavigationBar Demo');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/navigation_drawer_test.dart b/dev/a11y_assessments/test/navigation_drawer_test.dart
@@ -20,4 +20,11 @@ void main() {
 
     expect(find.byType(NavigationDrawer), findsExactly(1));
   });
+
+  testWidgets('navigation drawer has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, NavigationDrawerUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('Navigation Drawer Demo');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/radio_list_tile_test.dart b/dev/a11y_assessments/test/radio_list_tile_test.dart
@@ -14,4 +14,11 @@ void main() {
     expect(find.text('Lafayette'), findsOneWidget);
     expect(find.text('Jefferson'), findsOneWidget);
   });
+
+  testWidgets('radio button demo page has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, RadioListTileUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('Radio button demo');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/slider_test.dart b/dev/a11y_assessments/test/slider_test.dart
@@ -26,4 +26,11 @@ void main() {
         find.bySemanticsLabel('Accessibility Test Slider');
     expect(semanticsWidget, findsOneWidget);
   });
+
+  testWidgets('slider demo page has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, SliderUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('Slider demo');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/text_button_test.dart b/dev/a11y_assessments/test/text_button_test.dart
@@ -27,4 +27,11 @@ void main() {
     await tester.pumpAndSettle();
     expect(find.text('Clicked 2 time(s).'), findsOneWidget);
   });
+
+  testWidgets('text button demo page has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, TextButtonUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('TextButton Demo');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/text_field_password_test.dart b/dev/a11y_assessments/test/text_field_password_test.dart
@@ -50,4 +50,11 @@ void main() {
       expect(textField.decoration?.hintText, isNull);
     }
   });
+
+  testWidgets('text field password demo page has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, TextFieldPasswordUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('TextField password demo');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
diff --git a/dev/a11y_assessments/test/text_field_test.dart b/dev/a11y_assessments/test/text_field_test.dart
@@ -64,4 +64,11 @@ void main() {
         find.bySemanticsLabel(RegExp(textFieldLabel));
     expect(semanticsWidgets, findsExactly(2));
   });
+
+  testWidgets('text field demo page has one h1 tag', (WidgetTester tester) async {
+    await pumpsUseCase(tester, TextFieldUseCase());
+    final Finder findHeadingLevelOnes = find.bySemanticsLabel('TextField demo');
+    await tester.pumpAndSettle();
+    expect(findHeadingLevelOnes, findsOne);
+  });
 }
