feat: add various semantics labels (#637)

flutter · May 18, 2021 · 2cd33ed · 2cd33ed
1 parent 119f5fb
commit 2cd33ed
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 85 deletions.
diff --git a/lib/l10n/arb/app_en.arb b/lib/l10n/arb/app_en.arb
@@ -303,5 +303,41 @@
     "shareRetakeConfirmationConfirmButtonText": "Yes, retake photo",
     "@shareRetakeConfirmationConfirmButtonText": {
         "description": "Confirm button text shown in the confirmation when user taps the retake button"
+    },
+    "shutterButtonLabelText": "Take photo",
+    "@shutterButtonLabelText": {
+        "description": "Semantic label for the shutter button used to take a photo"
+    },
+    "stickersNextButtonLabelText": "Create final photo",
+    "@stickersNextButtonLabelText": {
+        "description": "Semantic label for the next button used to proceed to the share page"
+    },
+    "dashButtonLabelText": "Add dash friend",
+    "@dashButtonLabelText": {
+        "description": "Semantic label for the dash character button"
+    },
+    "sparkyButtonLabelText": "Add sparky friend",
+    "@sparkyButtonLabelText": {
+        "description": "Semantic label for the sparky character button"
+    },
+    "dinoButtonLabelText": "Add dino friend",
+    "@dinoButtonLabelText": {
+        "description": "Semantic label for the dino character button"
+    },
+    "androidButtonLabelText": "Add android jetpack friend",
+    "@androidButtonLabelText": {
+        "description": "Semantic label for the android jetpack character button"
+    },
+    "addStickersButtonLabelText": "Add props",
+    "@addStickersButtonLabelText": {
+        "description": "Semantic label for the add props button"
+    },
+    "retakePhotoButtonLabelText": "Retake photo",
+    "@retakePhotoButtonLabelText": {
+        "description": "Semantic label for the retake photo button"
+    },
+    "clearAllStickersButtonLabelText": "Clear all props",
+    "@clearAllStickersButtonLabelText": {
+        "description": "Semantic label for the clear all stickers button"
     }
 }
diff --git a/lib/photobooth/widgets/characters_caption.dart b/lib/photobooth/widgets/characters_caption.dart
@@ -8,9 +8,12 @@ class CharactersCaption extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    return AppTooltip.custom(
-      visible: true,
-      message: l10n.charactersCaptionText,
+    return Semantics(
+      button: false,
+      child: AppTooltip.custom(
+        visible: true,
+        message: l10n.charactersCaptionText,
+      ),
     );
   }
 }
diff --git a/lib/photobooth/widgets/photobooth_preview.dart b/lib/photobooth/widgets/photobooth_preview.dart
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:io_photobooth/assets.g.dart';
 import 'package:io_photobooth/footer/footer.dart';
+import 'package:io_photobooth/l10n/l10n.dart';
 import 'package:io_photobooth/photobooth/photobooth.dart';
 import 'package:photobooth_ui/photobooth_ui.dart';
 
@@ -21,12 +22,13 @@ class PhotoboothPreview extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final l10n = context.l10n;
     final state = context.watch<PhotoboothBloc>().state;
     final children = <Widget>[
       CharacterIconButton(
         key: const Key('photoboothView_dash_characterIconButton'),
         icon: const AssetImage('assets/icons/dash_icon.png'),
-        label: 'Dash',
+        label: l10n.dashButtonLabelText,
         isSelected: state.isDashSelected,
         onPressed: () {
           trackEvent(
@@ -42,7 +44,7 @@ class PhotoboothPreview extends StatelessWidget {
       CharacterIconButton(
         key: const Key('photoboothView_sparky_characterIconButton'),
         icon: const AssetImage('assets/icons/sparky_icon.png'),
-        label: 'Sparky',
+        label: l10n.sparkyButtonLabelText,
         isSelected: state.isSparkySelected,
         onPressed: () {
           trackEvent(
@@ -58,7 +60,7 @@ class PhotoboothPreview extends StatelessWidget {
       CharacterIconButton(
         key: const Key('photoboothView_android_characterIconButton'),
         icon: const AssetImage('assets/icons/android_icon.png'),
-        label: 'Android Jetpack',
+        label: l10n.androidButtonLabelText,
         isSelected: state.isAndroidSelected,
         onPressed: () {
           trackEvent(
@@ -74,7 +76,7 @@ class PhotoboothPreview extends StatelessWidget {
       CharacterIconButton(
         key: const Key('photoboothView_dino_characterIconButton'),
         icon: const AssetImage('assets/icons/dino_icon.png'),
-        label: 'Dino',
+        label: l10n.dinoButtonLabelText,
         isSelected: state.isDinoSelected,
         onPressed: () {
           trackEvent(

diff --git a/lib/photobooth/widgets/shutter_button.dart b/lib/photobooth/widgets/shutter_button.dart
@@ -1,5 +1,6 @@
 import 'dart:math' as math;
 import 'package:flutter/material.dart';
+import 'package:io_photobooth/l10n/l10n.dart';
 import 'package:just_audio/just_audio.dart';
 import 'package:photobooth_ui/photobooth_ui.dart';
 import 'package:very_good_analysis/very_good_analysis.dart';
@@ -122,16 +123,22 @@ class CameraButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Material(
-      clipBehavior: Clip.hardEdge,
-      shape: const CircleBorder(),
-      color: PhotoboothColors.transparent,
-      child: InkWell(
-        onTap: onPressed,
-        child: Image.asset(
-          'assets/icons/camera_button_icon.png',
-          height: 100,
-          width: 100,
+    final l10n = context.l10n;
+    return Semantics(
+      focusable: true,
+      button: true,
+      label: l10n.shutterButtonLabelText,
+      child: Material(
+        clipBehavior: Clip.hardEdge,
+        shape: const CircleBorder(),
+        color: PhotoboothColors.transparent,
+        child: InkWell(
+          onTap: onPressed,
+          child: Image.asset(
+            'assets/icons/camera_button_icon.png',
+            height: 100,
+            width: 100,
+          ),
         ),
       ),
     );

diff --git a/lib/share/view/share_page.dart b/lib/share/view/share_page.dart
@@ -70,24 +70,32 @@ class _ShareRetakeButton extends StatelessWidget {
     return Positioned(
       left: 15,
       top: 15,
-      child: AppTooltipButton(
-        key: const Key('sharePage_retake_appTooltipButton'),
-        onPressed: () async {
-          final confirmed = await showAppModal(
-            context: context,
-            landscapeChild: const _ConfirmationDialogContent(),
-            portraitChild: const _ConfirmationBottomSheet(),
-          );
-          if (confirmed) {
-            context.read<PhotoboothBloc>().add(const PhotoClearAllTapped());
-            unawaited(
-              Navigator.of(context).pushReplacement(PhotoboothPage.route()),
+      child: Semantics(
+        focusable: true,
+        button: true,
+        label: l10n.retakePhotoButtonLabelText,
+        child: AppTooltipButton(
+          key: const Key('sharePage_retake_appTooltipButton'),
+          onPressed: () async {
+            final confirmed = await showAppModal(
+              context: context,
+              landscapeChild: const _ConfirmationDialogContent(),
+              portraitChild: const _ConfirmationBottomSheet(),
             );
-          }
-        },
-        verticalOffset: 50,
-        message: l10n.retakeButtonTooltip,
-        child: Image.asset('assets/icons/retake_button_icon.png', height: 100),
+            if (confirmed) {
+              context.read<PhotoboothBloc>().add(const PhotoClearAllTapped());
+              unawaited(
+                Navigator.of(context).pushReplacement(PhotoboothPage.route()),
+              );
+            }
+          },
+          verticalOffset: 50,
+          message: l10n.retakeButtonTooltip,
+          child: Image.asset(
+            'assets/icons/retake_button_icon.png',
+            height: 100,
+          ),
+        ),
       ),
     );
   }

diff --git a/lib/stickers/view/stickers_page.dart b/lib/stickers/view/stickers_page.dart
@@ -175,24 +175,29 @@ class _RetakeButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    return AppTooltipButton(
-      key: const Key('stickersPage_retake_appTooltipButton'),
-      onPressed: () async {
-        final confirmed = await showAppModal(
-          context: context,
-          landscapeChild: const _RetakeConfirmationDialogContent(),
-          portraitChild: const _RetakeConfirmationBottomSheet(),
-        );
-        if (confirmed) {
-          context.read<PhotoboothBloc>().add(const PhotoClearAllTapped());
-          unawaited(
-            Navigator.of(context).pushReplacement(PhotoboothPage.route()),
+    return Semantics(
+      focusable: true,
+      button: true,
+      label: l10n.retakePhotoButtonLabelText,
+      child: AppTooltipButton(
+        key: const Key('stickersPage_retake_appTooltipButton'),
+        onPressed: () async {
+          final confirmed = await showAppModal(
+            context: context,
+            landscapeChild: const _RetakeConfirmationDialogContent(),
+            portraitChild: const _RetakeConfirmationBottomSheet(),
           );
-        }
-      },
-      verticalOffset: 50,
-      message: l10n.retakeButtonTooltip,
-      child: Image.asset('assets/icons/retake_button_icon.png', height: 100),
+          if (confirmed) {
+            context.read<PhotoboothBloc>().add(const PhotoClearAllTapped());
+            unawaited(
+              Navigator.of(context).pushReplacement(PhotoboothPage.route()),
+            );
+          }
+        },
+        verticalOffset: 50,
+        message: l10n.retakeButtonTooltip,
+        child: Image.asset('assets/icons/retake_button_icon.png', height: 100),
+      ),
     );
   }
 }
@@ -202,25 +207,33 @@ class _NextButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Material(
-      clipBehavior: Clip.hardEdge,
-      shape: const CircleBorder(),
-      color: PhotoboothColors.transparent,
-      child: InkWell(
-        key: const Key('stickersPage_next_inkWell'),
-        onTap: () async {
-          final confirmed = await showAppModal(
-            context: context,
-            landscapeChild: const _NextConfirmationDialogContent(),
-            portraitChild: const _NextConfirmationBottomSheet(),
-          );
-          if (confirmed) {
-            unawaited(Navigator.of(context).pushReplacement(SharePage.route()));
-          }
-        },
-        child: Image.asset(
-          'assets/icons/go_next_button_icon.png',
-          height: 100,
+    final l10n = context.l10n;
+    return Semantics(
+      focusable: true,
+      button: true,
+      label: l10n.stickersNextButtonLabelText,
+      child: Material(
+        clipBehavior: Clip.hardEdge,
+        shape: const CircleBorder(),
+        color: PhotoboothColors.transparent,
+        child: InkWell(
+          key: const Key('stickersPage_next_inkWell'),
+          onTap: () async {
+            final confirmed = await showAppModal(
+              context: context,
+              landscapeChild: const _NextConfirmationDialogContent(),
+              portraitChild: const _NextConfirmationBottomSheet(),
+            );
+            if (confirmed) {
+              unawaited(
+                Navigator.of(context).pushReplacement(SharePage.route()),
+              );
+            }
+          },
+          child: Image.asset(
+            'assets/icons/go_next_button_icon.png',
+            height: 100,
+          ),
         ),
       ),
     );
@@ -434,16 +447,24 @@ class _OpenStickersButtonState extends State<OpenStickersButton> {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    final child = AppTooltipButton(
-      key: const Key('stickersView_openStickersButton_appTooltipButton'),
-      onPressed: () {
-        widget.onPressed();
-        if (_isAnimating) setState(() => _isAnimating = false);
-      },
-      message: l10n.openStickersTooltip,
-      verticalOffset: 50,
-      mode: TooltipMode.normal,
-      child: Image.asset('assets/icons/stickers_button_icon.png', height: 100),
+    final child = Semantics(
+      focusable: true,
+      button: true,
+      label: l10n.addStickersButtonLabelText,
+      child: AppTooltipButton(
+        key: const Key('stickersView_openStickersButton_appTooltipButton'),
+        onPressed: () {
+          widget.onPressed();
+          if (_isAnimating) setState(() => _isAnimating = false);
+        },
+        message: l10n.openStickersTooltip,
+        verticalOffset: 50,
+        mode: TooltipMode.normal,
+        child: Image.asset(
+          'assets/icons/stickers_button_icon.png',
+          height: 100,
+        ),
+      ),
     );
     return _isAnimating ? AnimatedPulse(child: child) : child;
   }

diff --git a/lib/stickers/widgets/clear_stickers/clear_stickers_button_layer.dart b/lib/stickers/widgets/clear_stickers/clear_stickers_button_layer.dart
@@ -39,11 +39,16 @@ class ClearStickersButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-    return AppTooltipButton(
-      onPressed: onPressed,
-      message: l10n.clearStickersButtonTooltip,
-      verticalOffset: 50,
-      child: Image.asset('assets/icons/delete_icon.png', height: 100),
+    return Semantics(
+      focusable: true,
+      button: true,
+      label: l10n.clearAllStickersButtonLabelText,
+      child: AppTooltipButton(
+        onPressed: onPressed,
+        message: l10n.clearStickersButtonTooltip,
+        verticalOffset: 50,
+        child: Image.asset('assets/icons/delete_icon.png', height: 100),
+      ),
     );
   }
 }