Achieve Color Contrast Accessibility for Menu Demo (#49099)

examples/flutter_gallery/lib/demo/material/menu_demo.dart

@@ -86,7 +86,11 @@ class MenuDemoState extends State<MenuDemo> {
           ),
         ],
       ),
-      body: ListView(
+      body: ListTileTheme(
+        iconColor: Theme.of(context).brightness == Brightness.light
+            ? Colors.grey[600]
+            : Colors.grey[500],
+        child: ListView(
           padding: kMaterialListPadding,
           children: <Widget>[
             // Pressing the PopupMenuButton on the right of this item shows
@@ -214,6 +218,7 @@ class MenuDemoState extends State<MenuDemo> {
             ),
           ],
         ),
+      ),
     );
   }
 }

examples/flutter_gallery/test/demo/material/menu_demo_test.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_gallery/demo/material/menu_demo.dart';
+import 'package:flutter_gallery/gallery/themes.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Menu icon satisfies accessibility contrast ratio guidelines, light mode', (WidgetTester tester) async {
+    await tester.pumpWidget(MaterialApp(
+      theme: kLightGalleryTheme,
+      home: const MenuDemo(),
+    ));
+
+    await expectLater(tester, meetsGuideline(textContrastGuideline));
+
+    await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: find.byWidgetPredicate((Widget widget) => widget is Icon))));
+  });
+
+  testWidgets('Menu icon satisfies accessibility contrast ratio guidelines, dark mode', (WidgetTester tester) async {
+    await tester.pumpWidget(MaterialApp(
+      theme: kDarkGalleryTheme,
+      home: const MenuDemo(),
+    ));
+
+    await expectLater(tester, meetsGuideline(textContrastGuideline));
+
+    await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: find.byWidgetPredicate((Widget widget) => widget is Icon))));
+  });
+}

packages/flutter_test/test/accessibility_test.dart

@@ -178,6 +178,160 @@ void main() {
     });
   });
 
+  group('custom minimum contrast guideline', () {
+    Widget _icon ({IconData icon = Icons.search, Color color, Color background}) {
+      return Container(
+        padding: const EdgeInsets.all(8.0),
+        color: background,
+        child: Icon(icon, color: color),
+      );
+    }
+
+    Widget _text ({String text = 'Text', Color color, Color background}) {
+      return Container(
+        padding: const EdgeInsets.all(8.0),
+        color: background,
+        child: Text(text, style: TextStyle(color: color)),
+      );
+    }
+
+    Widget _row (List<Widget> widgets) => _boilerplate(Row(children: widgets));
+
+    final Finder _findIcons = find.byWidgetPredicate((Widget widget) => widget is Icon);
+    final Finder _findTexts = find.byWidgetPredicate((Widget widget) => widget is Text);
+    final Finder _findIconsAndTexts = find.byWidgetPredicate((Widget widget) => widget is Icon || widget is Text);
+
+    testWidgets('Black icons on white background', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _icon (color: Colors.black, background: Colors.white),
+        _icon (color: Colors.black, background: Colors.white),
+      ]));
+
+      await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+    });
+
+    testWidgets('Black icons on black background', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _icon (color: Colors.black, background: Colors.black),
+        _icon (color: Colors.black, background: Colors.black),
+      ]));
+
+      await expectLater(tester, doesNotMeetGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+    });
+
+    testWidgets('White icons on black background ("dark mode")', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _icon (color: Colors.white, background: Colors.black),
+        _icon (color: Colors.white, background: Colors.black),
+      ]));
+
+      await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+    });
+
+    testWidgets('Using different icons', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _icon (color: Colors.black, background: Colors.white, icon: Icons.more_horiz),
+        _icon (color: Colors.black, background: Colors.white, icon: Icons.description),
+        _icon (color: Colors.black, background: Colors.white, icon: Icons.image),
+        _icon (color: Colors.black, background: Colors.white, icon: Icons.beach_access),
+      ]));
+
+      await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+    });
+
+    testWidgets('One invalid instance fails entire test', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _icon (color: Colors.black, background: Colors.white),
+        _icon (color: Colors.black, background: Colors.black),
+      ]));
+
+      await expectLater(tester, doesNotMeetGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+    });
+
+    testWidgets('White on different colors, passing', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _icon (color: Colors.white, background: Colors.red[800], icon: Icons.more_horiz),
+        _icon (color: Colors.white, background: Colors.green[800], icon: Icons.description),
+        _icon (color: Colors.white, background: Colors.blue[800], icon: Icons.image),
+        _icon (color: Colors.white, background: Colors.purple[800], icon: Icons.beach_access),
+      ]));
+
+      await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+    });
+
+    testWidgets('White on different colors, failing', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _icon (color: Colors.white, background: Colors.red[200], icon: Icons.more_horiz),
+        _icon (color: Colors.white, background: Colors.green[400], icon: Icons.description),
+        _icon (color: Colors.white, background: Colors.blue[600], icon: Icons.image),
+        _icon (color: Colors.white, background: Colors.purple[800], icon: Icons.beach_access),
+      ]));
+
+      await expectLater(tester, doesNotMeetGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+    });
+
+    testWidgets('Absence of icons, passing', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[]));
+
+      await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+    });
+
+    testWidgets('Absence of icons, passing - 2nd test', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _text (color: Colors.black, background: Colors.white),
+        _text (color: Colors.black, background: Colors.black),
+      ]));
+
+      await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+    });
+
+    testWidgets('Guideline ignores widgets of other types', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _icon (color: Colors.black, background: Colors.white),
+        _icon (color: Colors.black, background: Colors.white),
+        _text (color: Colors.black, background: Colors.white),
+        _text (color: Colors.black, background: Colors.black),
+      ]));
+
+      await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+      await expectLater(tester, doesNotMeetGuideline(CustomMinimumContrastGuideline(finder: _findTexts)));
+      await expectLater(tester, doesNotMeetGuideline(CustomMinimumContrastGuideline(finder: _findIconsAndTexts)));
+    });
+
+    testWidgets('Custom minimum ratio - Icons', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _icon (color: Colors.blue, background: Colors.white),
+        _icon (color: Colors.black, background: Colors.white),
+      ]));
+
+      await expectLater(tester, doesNotMeetGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+      await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: _findIcons, minimumRatio: 3.0)));
+    });
+
+    testWidgets('Custom minimum ratio - Texts', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _text (color: Colors.blue, background: Colors.white),
+        _text (color: Colors.black, background: Colors.white),
+      ]));
+
+      await expectLater(tester, doesNotMeetGuideline(CustomMinimumContrastGuideline(finder: _findTexts)));
+      await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: _findTexts, minimumRatio: 3.0)));
+    });
+
+    testWidgets('Custom minimum ratio - Different standards for icons and texts', (WidgetTester tester) async {
+      await tester.pumpWidget(_row(<Widget>[
+        _icon (color: Colors.blue, background: Colors.white),
+        _icon (color: Colors.black, background: Colors.white),
+        _text (color: Colors.blue, background: Colors.white),
+        _text (color: Colors.black, background: Colors.white),
+      ]));
+
+      await expectLater(tester, doesNotMeetGuideline(CustomMinimumContrastGuideline(finder: _findIcons)));
+      await expectLater(tester, meetsGuideline(CustomMinimumContrastGuideline(finder: _findTexts, minimumRatio: 3.0)));
+    });
+
+  });
+
   group('tap target size guideline', () {
     testWidgets('Tappable box at 48 by 48', (WidgetTester tester) async {
       final SemanticsHandle handle = tester.ensureSemantics();