Improve a11n by forcing a label on Nutri-Score and Eco-score buttons

openfoodfacts · Jul 22, 2023 · 9403d8d · 9403d8d
1 parent 580b822
commit 9403d8d
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 29 deletions.
diff --git a/packages/smooth_app/lib/cards/category_cards/svg_cache.dart b/packages/smooth_app/lib/cards/category_cards/svg_cache.dart
@@ -1,6 +1,7 @@
 import 'dart:ui' as ui;
 
 import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:smooth_app/cards/category_cards/abstract_cache.dart';
 import 'package:smooth_app/cards/category_cards/asset_cache_helper.dart';
@@ -62,6 +63,7 @@ class SvgCache extends AbstractCache {
       width: width,
       height: height,
       fit: BoxFit.contain,
+      semanticsLabel: getSemanticsLabel(context, iconUrl!),
       placeholderBuilder: (BuildContext context) => displayAssetWhileWaiting
           ? SvgAsyncAsset(
               AssetCacheHelper(
@@ -75,4 +77,22 @@ class SvgCache extends AbstractCache {
           : getCircularProgressIndicator(),
     );
   }
+
+  static String? getSemanticsLabel(BuildContext context, String iconUrl) {
+    final AppLocalizations localizations = AppLocalizations.of(context);
+
+    return switch (Uri.parse(iconUrl).pathSegments.last) {
+      'nutriscore-a.svg' => localizations.nutriscore_a,
+      'nutriscore-b.svg' => localizations.nutriscore_b,
+      'nutriscore-c.svg' => localizations.nutriscore_c,
+      'nutriscore-d.svg' => localizations.nutriscore_d,
+      'nutriscore-e.svg' => localizations.nutriscore_e,
+      'ecoscore-a.svg' => localizations.ecoscore_e,
+      'ecoscore-b.svg' => localizations.ecoscore_e,
+      'ecoscore-c.svg' => localizations.ecoscore_e,
+      'ecoscore-d.svg' => localizations.ecoscore_e,
+      'ecoscore-e.svg' => localizations.ecoscore_e,
+      _ => null,
+    };
+  }
 }
diff --git a/packages/smooth_app/lib/cards/data_cards/score_card.dart b/packages/smooth_app/lib/cards/data_cards/score_card.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
+import 'package:smooth_app/cards/category_cards/svg_cache.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/generic_lib/svg_icon_chip.dart';
 import 'package:smooth_app/helpers/score_card_helper.dart';
@@ -89,37 +90,42 @@ class ScoreCard extends StatelessWidget {
     final SvgIconChip? iconChip =
         iconUrl == null ? null : SvgIconChip(iconUrl!, height: iconHeight);
 
-    return Padding(
-      padding: margin ?? const EdgeInsets.symmetric(vertical: SMALL_SPACE),
-      child: Ink(
-        padding: const EdgeInsets.all(SMALL_SPACE),
-        decoration: BoxDecoration(
-          color: backgroundColor,
-          borderRadius: ANGULAR_BORDER_RADIUS,
-        ),
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: <Widget>[
-            if (iconChip != null)
-              Expanded(
-                flex: 1,
-                child: Padding(
-                  padding: const EdgeInsetsDirectional.only(end: SMALL_SPACE),
-                  child: iconChip,
+    return Semantics(
+      value: '${SvgCache.getSemanticsLabel(context, iconUrl!)} $description',
+      excludeSemantics: true,
+      button: true,
+      child: Padding(
+        padding: margin ?? const EdgeInsets.symmetric(vertical: SMALL_SPACE),
+        child: Ink(
+          padding: const EdgeInsets.all(SMALL_SPACE),
+          decoration: BoxDecoration(
+            color: backgroundColor,
+            borderRadius: ANGULAR_BORDER_RADIUS,
+          ),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: <Widget>[
+              if (iconChip != null)
+                Expanded(
+                  flex: 1,
+                  child: Padding(
+                    padding: const EdgeInsetsDirectional.only(end: SMALL_SPACE),
+                    child: iconChip,
+                  ),
                 ),
-              ),
-            Expanded(
-              flex: 3,
-              child: Center(
-                child: Text(
-                  description,
-                  style: themeData.textTheme.headlineMedium!
-                      .apply(color: textColor),
+              Expanded(
+                flex: 3,
+                child: Center(
+                  child: Text(
+                    description,
+                    style: themeData.textTheme.headlineMedium!
+                        .apply(color: textColor),
+                  ),
                 ),
               ),
-            ),
-            if (isClickable) Icon(ConstantIcons.instance.getForwardIcon()),
-          ],
+              if (isClickable) Icon(ConstantIcons.instance.getForwardIcon()),
+            ],
+          ),
         ),
       ),
     );

diff --git a/packages/smooth_app/lib/l10n/app_en.arb b/packages/smooth_app/lib/l10n/app_en.arb
@@ -2320,5 +2320,15 @@
     "country_selector_title": "Select your country:",
     "@country_selector_title": {
         "description": "Label written as the title of the dialog to select the user country"
-    }
+    },
+    "nutriscore_a": "Nutri-Score A",
+    "nutriscore_b": "Nutri-Score B",
+    "nutriscore_c": "Nutri-Score C",
+    "nutriscore_d": "Nutri-Score D",
+    "nutriscore_e": "Nutri-Score E",
+    "ecoscore_a": "Eco-Score A",
+    "ecoscore_b": "Eco-Score B",
+    "ecoscore_c": "Eco-Score C",
+    "ecoscore_d": "Eco-Score D",
+    "ecoscore_e": "Eco-Score E"
 }