Use semantics label for backbutton and closebutton for Android (#110873)

chunhtai · web-flow · commit 22c8e79cc19d · 2022-09-02T23:21:22.000Z
diff --git a/packages/flutter/lib/src/material/back_button.dart b/packages/flutter/lib/src/material/back_button.dart
@@ -27,22 +27,31 @@ class BackButtonIcon extends StatelessWidget {
   /// the current platform (as obtained from the [Theme]).
   const BackButtonIcon({ super.key });
 
-  /// Returns the appropriate "back" icon for the given `platform`.
-  static IconData _getIconData(TargetPlatform platform) {
-    switch (platform) {
+  @override
+  Widget build(BuildContext context) {
+    final String? semanticsLabel;
+    final IconData data;
+    switch (Theme.of(context).platform) {
       case TargetPlatform.android:
+        // Android uses semantics label to annotate the back button.
+        semanticsLabel = MaterialLocalizations.of(context).backButtonTooltip;
+        data = Icons.arrow_back;
+        break;
       case TargetPlatform.fuchsia:
       case TargetPlatform.linux:
       case TargetPlatform.windows:
-        return Icons.arrow_back;
+        semanticsLabel = null;
+        data = Icons.arrow_back;
+        break;
       case TargetPlatform.iOS:
       case TargetPlatform.macOS:
-        return Icons.arrow_back_ios;
+        data = Icons.arrow_back_ios;
+        semanticsLabel = null;
+        break;
     }
-  }
 
-  @override
-  Widget build(BuildContext context) => Icon(_getIconData(Theme.of(context).platform));
+    return Icon(data, semanticLabel: semanticsLabel);
+  }
 }
 
 /// A Material Design back button.
@@ -149,8 +158,22 @@ class CloseButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     assert(debugCheckHasMaterialLocalizations(context));
+    final String? semanticsLabel;
+    switch (Theme.of(context).platform) {
+      case TargetPlatform.android:
+        // Android uses semantics label to annotate the close button.
+        semanticsLabel = MaterialLocalizations.of(context).closeButtonTooltip;
+        break;
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.linux:
+      case TargetPlatform.windows:
+      case TargetPlatform.iOS:
+      case TargetPlatform.macOS:
+        semanticsLabel = null;
+        break;
+    }
     return IconButton(
-      icon: const Icon(Icons.close),
+      icon: Icon(Icons.close, semanticLabel: semanticsLabel),
       color: color,
       tooltip: MaterialLocalizations.of(context).closeButtonTooltip,
       onPressed: () {
diff --git a/packages/flutter/test/material/back_button_test.dart b/packages/flutter/test/material/back_button_test.dart
@@ -2,6 +2,7 @@
 // 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_test/flutter_test.dart';
 
@@ -152,17 +153,73 @@ void main() {
     tester.state<NavigatorState>(find.byType(Navigator)).pushNamed('/next');
 
     await tester.pumpAndSettle();
-
+    final String? expectedLabel;
+    switch(defaultTargetPlatform) {
+      case TargetPlatform.android:
+        expectedLabel = 'Back';
+        break;
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.iOS:
+      case TargetPlatform.linux:
+      case TargetPlatform.macOS:
+      case TargetPlatform.windows:
+        expectedLabel = null;
+    }
     expect(tester.getSemantics(find.byType(BackButton)), matchesSemantics(
       tooltip: 'Back',
+      label: expectedLabel,
       isButton: true,
       hasEnabledState: true,
       isEnabled: true,
       hasTapAction: true,
       isFocusable: true,
     ));
     handle.dispose();
-  });
+  }, variant: TargetPlatformVariant.all());
+
+  testWidgets('CloseButton semantics', (WidgetTester tester) async {
+    final SemanticsHandle handle = tester.ensureSemantics();
+    await tester.pumpWidget(
+      MaterialApp(
+        home: const Material(child: Text('Home')),
+        routes: <String, WidgetBuilder>{
+          '/next': (BuildContext context) {
+            return const Material(
+              child: Center(
+                child: CloseButton(),
+              ),
+            );
+          },
+        },
+      ),
+    );
+
+    tester.state<NavigatorState>(find.byType(Navigator)).pushNamed('/next');
+
+    await tester.pumpAndSettle();
+    final String? expectedLabel;
+    switch(defaultTargetPlatform) {
+      case TargetPlatform.android:
+        expectedLabel = 'Close';
+        break;
+      case TargetPlatform.fuchsia:
+      case TargetPlatform.iOS:
+      case TargetPlatform.linux:
+      case TargetPlatform.macOS:
+      case TargetPlatform.windows:
+        expectedLabel = null;
+    }
+    expect(tester.getSemantics(find.byType(CloseButton)), matchesSemantics(
+      tooltip: 'Close',
+      label: expectedLabel,
+      isButton: true,
+      hasEnabledState: true,
+      isEnabled: true,
+      hasTapAction: true,
+      isFocusable: true,
+    ));
+    handle.dispose();
+  }, variant: TargetPlatformVariant.all());
 
   testWidgets('CloseButton color', (WidgetTester tester) async {
     await tester.pumpWidget(
