From f1caeb63f64a47b3fd2904709f5e2222fb1d1aa7 Mon Sep 17 00:00:00 2001
From: Edouard Marquez <moi@edouard-marquez.me>
Date: Sat, 22 Jul 2023 10:17:55 +0200
Subject: [PATCH] Improve accessibility for KP title cards

---
 .../knowledge_panel_title_card.dart           | 83 ++++++++++++-------
 1 file changed, 55 insertions(+), 28 deletions(-)

diff --git a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_title_card.dart b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_title_card.dart
index 7052e00a8758..a64e77881bb9 100644
--- a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_title_card.dart
+++ b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_title_card.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
 import 'package:provider/provider.dart';
 import 'package:smooth_app/cards/category_cards/abstract_cache.dart';
+import 'package:smooth_app/cards/category_cards/svg_cache.dart';
 import 'package:smooth_app/data_models/user_preferences.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/helpers/extension_on_text_helper.dart';
@@ -74,39 +75,44 @@ class KnowledgePanelTitleCard extends StatelessWidget {
         top: VERY_SMALL_SPACE,
         bottom: VERY_SMALL_SPACE,
       ),
-      child: Row(
-        children: <Widget>[
-          ...iconWidget,
-          Expanded(
-            flex: IconWidgetSizer.getRemainingWidgetFlex(),
-            child: LayoutBuilder(
-              builder: (BuildContext context, BoxConstraints constraints) {
-                return Wrap(
-                  direction: Axis.vertical,
-                  children: <Widget>[
-                    SizedBox(
-                      width: constraints.maxWidth,
-                      child: Text(
-                        knowledgePanelTitleElement.title,
-                        style: TextStyle(color: colorFromEvaluation),
-                      ),
-                    ),
-                    if (knowledgePanelTitleElement.subtitle != null)
+      child: Semantics(
+        value: _generateSemanticsValue(context),
+        button: isClickable,
+        excludeSemantics: true,
+        child: Row(
+          children: <Widget>[
+            ...iconWidget,
+            Expanded(
+              flex: IconWidgetSizer.getRemainingWidgetFlex(),
+              child: LayoutBuilder(
+                builder: (BuildContext context, BoxConstraints constraints) {
+                  return Wrap(
+                    direction: Axis.vertical,
+                    children: <Widget>[
                       SizedBox(
                         width: constraints.maxWidth,
                         child: Text(
-                          knowledgePanelTitleElement.subtitle!,
-                          style:
-                              WellSpacedTextHelper.TEXT_STYLE_WITH_WELL_SPACED,
-                        ).selectable(isSelectable: !isClickable),
+                          knowledgePanelTitleElement.title,
+                          style: TextStyle(color: colorFromEvaluation),
+                        ),
                       ),
-                  ],
-                );
-              },
+                      if (knowledgePanelTitleElement.subtitle != null)
+                        SizedBox(
+                          width: constraints.maxWidth,
+                          child: Text(
+                            knowledgePanelTitleElement.subtitle!,
+                            style: WellSpacedTextHelper
+                                .TEXT_STYLE_WITH_WELL_SPACED,
+                          ).selectable(isSelectable: !isClickable),
+                        ),
+                    ],
+                  );
+                },
+              ),
             ),
-          ),
-          if (isClickable) Icon(ConstantIcons.instance.getForwardIcon()),
-        ],
+            if (isClickable) Icon(ConstantIcons.instance.getForwardIcon()),
+          ],
+        ),
       ),
     );
   }
@@ -155,4 +161,25 @@ class KnowledgePanelTitleCard extends StatelessWidget {
         return null;
     }
   }
+
+  String _generateSemanticsValue(BuildContext context) {
+    final StringBuffer buffer = StringBuffer();
+
+    if (knowledgePanelTitleElement.iconUrl != null) {
+      final String? label = SvgCache.getSemanticsLabel(
+        context,
+        knowledgePanelTitleElement.iconUrl!,
+      );
+      if (label != null) {
+        buffer.write('$label: ');
+      }
+    }
+
+    buffer.write(knowledgePanelTitleElement.title);
+    if (knowledgePanelTitleElement.subtitle != null) {
+      buffer.write('\n${knowledgePanelTitleElement.subtitle}');
+    }
+
+    return buffer.toString();
+  }
 }