feat: Improvements for a11n on preferences (#4550)

* Ensure all items in the preferences behave the same + a hint for screen readers

* Regenerate goldens

packages/smooth_app/lib/l10n/app_en.arb

@@ -1465,6 +1465,10 @@
     "@category_picker_no_category_found_button": {
         "description": "Button label when no category is available"
     },
+    "user_preferences_item_accessibility_hint": "Click to open in your browser or in the application (if installed)",
+    "@user_preferences_item_accessibility_hint":{
+        "description": "A hint for screen readers to explain how external links work"
+    },
     "dev_preferences_screen_title": "DEV Mode",
     "@dev_preferences_screen_title": {
         "description": "User dev preferences - Title"

packages/smooth_app/lib/pages/preferences/user_preferences_connect.dart

@@ -245,5 +245,6 @@ class UserPreferencesConnect extends AbstractUserPreferences {
         trailing:
             UserPreferencesListTile.getTintedIcon(Icons.open_in_new, context),
         leading: leading,
+        externalLink: true,
       );
 }

packages/smooth_app/lib/pages/preferences/user_preferences_contribute.dart

@@ -86,6 +86,7 @@ class UserPreferencesContribute extends AbstractUserPreferences {
         () => _donate(),
         Icons.volunteer_activism,
         icon: UserPreferencesListTile.getTintedIcon(Icons.open_in_new, context),
+        externalLink: true,
       ),
       _getListTile(
         appLocalizations.contributors_label,
@@ -239,12 +240,14 @@ class UserPreferencesContribute extends AbstractUserPreferences {
     final IconData leading, {
     final Icon? icon,
     final String? description,
+    final bool? externalLink = false,
   }) {
     final Widget tile = UserPreferencesListTile(
       title: Text(title),
       onTap: onTap,
       trailing: icon ?? getForwardIcon(),
       leading: UserPreferencesListTile.getTintedIcon(leading, context),
+      externalLink: externalLink,
     );
 
     if (description != null) {

packages/smooth_app/lib/pages/preferences/user_preferences_faq.dart

@@ -53,21 +53,25 @@ class UserPreferencesFaq extends AbstractUserPreferences {
           title: appLocalizations.faq,
           leading: Icons.question_mark,
           url: 'https://support.openfoodfacts.org/help',
+          externalLink: true,
         ),
         _getListTile(
           title: appLocalizations.discover,
           leading: Icons.travel_explore,
           url: 'https://world.openfoodfacts.org/discover',
+          externalLink: true,
         ),
         _getListTile(
           title: appLocalizations.how_to_contribute,
           leading: Icons.volunteer_activism,
           url: 'https://world.openfoodfacts.org/contribute',
+          externalLink: true,
         ),
         _getListTile(
           title: appLocalizations.feed_back,
           leading: Icons.feedback_sharp,
           url: UserFeedbackHelper.getFeedbackFormLink(),
+          externalLink: true,
         ),
         _getListTile(
           title: appLocalizations.about_this_app,
@@ -83,13 +87,15 @@ class UserPreferencesFaq extends AbstractUserPreferences {
     final String? url,
     final VoidCallback? onTap,
     final Icon? icon,
+    final bool? externalLink,
   }) =>
       UserPreferencesListTile(
         title: Text(title),
         onTap: onTap ?? () async => LaunchUrlHelper.launchURL(url!, false),
         trailing: icon ??
             UserPreferencesListTile.getTintedIcon(Icons.open_in_new, context),
         leading: UserPreferencesListTile.getTintedIcon(leading, context),
+        externalLink: externalLink,
       );
 
   static const String _iconLightAssetPath =

packages/smooth_app/lib/pages/preferences/user_preferences_list_tile.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
 
 /// Custom [ListTile] for preferences.
@@ -14,6 +15,7 @@ class UserPreferencesListTile extends StatelessWidget {
     this.selected,
     this.selectedColor,
     this.contentPadding,
+    this.externalLink,
   });
 
   final Widget title;
@@ -24,6 +26,7 @@ class UserPreferencesListTile extends StatelessWidget {
   final VoidCallback? onLongPress;
   final ShapeBorder? shape;
   final bool? selected;
+  final bool? externalLink;
   final Color? selectedColor;
   final EdgeInsetsGeometry? contentPadding;
 
@@ -38,23 +41,42 @@ class UserPreferencesListTile extends StatelessWidget {
       );
 
   @override
-  Widget build(BuildContext context) => ListTile(
-        leading: leading,
-        title: DefaultTextStyle.merge(
-          style: Theme.of(context).textTheme.headlineMedium,
-          child: title,
-        ),
-        selected: selected ?? false,
-        selectedTileColor: selectedColor,
-        contentPadding: contentPadding ??
-            EdgeInsets.symmetric(
-              horizontal: LARGE_SPACE,
-              vertical: subtitle != null ? VERY_SMALL_SPACE : 2.0,
-            ),
-        trailing: trailing,
-        onTap: onTap,
-        onLongPress: onLongPress,
-        subtitle: subtitle,
-        shape: shape,
+  Widget build(BuildContext context) {
+    final String? titleAsText = title is Text ? (title as Text).data : null;
+
+    final Widget child = ListTile(
+      leading: leading,
+      title: DefaultTextStyle.merge(
+        style: Theme.of(context).textTheme.headlineMedium,
+        child: title,
+      ),
+      selected: selected ?? false,
+      selectedTileColor: selectedColor,
+      contentPadding: contentPadding ??
+          EdgeInsets.symmetric(
+            horizontal: LARGE_SPACE,
+            vertical: subtitle != null ? VERY_SMALL_SPACE : 2.0,
+          ),
+      trailing: trailing,
+      onTap: onTap,
+      onLongPress: onLongPress,
+      subtitle: subtitle,
+      shape: shape,
+    );
+
+    if (titleAsText != null) {
+      return Semantics(
+        label: titleAsText,
+        hint: externalLink == true
+            ? AppLocalizations.of(context)
+                .user_preferences_item_accessibility_hint
+            : null,
+        button: true,
+        excludeSemantics: true,
+        child: child,
       );
+    } else {
+      return child;
+    }
+  }
 }