Improve accessibility

assets/translations/strings_en.i18n.json

@@ -15,7 +15,8 @@
         "notSet": "Not Set",
         "agree": "Agree",
         "decline": "Decline",
-        "unknown": "Unknown"
+        "unknown": "Unknown",
+        "hidden": "Hidden"
     },
     "intro": {
         "termsAndPolicyCaution(rich)": "by continuing you agree with ${tap(@:about.termsAndConditions)}",
@@ -127,6 +128,19 @@
             "unsorted": "Default",
             "name": "Alphabetically",
             "delay": "By Delay"
+        },
+        "activeProxySemanticLabel": "Active proxy",
+        "delaySemantics": {
+            "result": "delay: ${delay}ms",
+            "testing": "delay: testing..."
+        },
+        "ipInfoSemantics": {
+            "address": "IP address",
+            "country": "Country"
+        },
+        "statsSemantics": {
+            "speed": "Speed",
+            "totalTransferred": "Total transferred"
         }
     },
     "logs": {

lib/features/home/widget/connection_button.dart

@@ -149,10 +149,12 @@ class _ConnectionButton extends StatelessWidget {
               .scaleXY(end: .88, curve: Curves.easeIn),
         ),
         const Gap(16),
-        Text(
+        ExcludeSemantics(
+          child: Text(
             label,
             style: Theme.of(context).textTheme.titleMedium,
           ),
+        ),
       ],
     );
   }

lib/features/proxy/active/active_proxy_delay_indicator.dart

@@ -1,6 +1,7 @@
 import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
+import 'package:hiddify/core/localization/translations.dart';
 import 'package:hiddify/core/widget/animated_visibility.dart';
 import 'package:hiddify/core/widget/shimmer_skeleton.dart';
 import 'package:hiddify/features/proxy/active/active_proxy_notifier.dart';
@@ -11,6 +12,7 @@ class ActiveProxyDelayIndicator extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final t = ref.watch(translationsProvider);
     final theme = Theme.of(context);
     final activeProxy = ref.watch(activeProxyNotifierProvider);
 
@@ -39,6 +41,8 @@ class ActiveProxyDelayIndicator extends HookConsumerWidget {
                       const Gap(8),
                       if (delay > 0)
                         Text.rich(
+                          semanticsLabel:
+                              t.proxies.delaySemantics.result(delay: delay),
                           TextSpan(
                             children: [
                               TextSpan(
@@ -51,7 +55,10 @@ class ActiveProxyDelayIndicator extends HookConsumerWidget {
                           ),
                         )
                       else
-                        const ShimmerSkeleton(width: 48, height: 18),
+                        Semantics(
+                          label: t.proxies.delaySemantics.testing,
+                          child: const ShimmerSkeleton(width: 48, height: 18),
+                        ),
                     ],
                   ),
                 ),

lib/features/proxy/active/active_proxy_footer.dart

@@ -1,6 +1,7 @@
 import 'package:dartx/dartx.dart';
 import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/semantics.dart';
 import 'package:gap/gap.dart';
 import 'package:hiddify/core/localization/translations.dart';
 import 'package:hiddify/core/widget/animated_visibility.dart';
@@ -38,6 +39,7 @@ class ActiveProxyFooter extends HookConsumerWidget {
                         text: proxy.selectedName.isNotNullOrBlank
                             ? proxy.selectedName!
                             : proxy.name,
+                        semanticLabel: t.proxies.activeProxySemanticLabel,
                       ),
                       const Gap(8),
                       switch (ipInfo) {
@@ -90,6 +92,7 @@ class _StatsColumn extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final t = ref.watch(translationsProvider);
     final stats = ref.watch(statsNotifierProvider).value;
 
     return Directionality(
@@ -101,11 +104,13 @@ class _StatsColumn extends HookConsumerWidget {
             _InfoProp(
               icon: FluentIcons.arrow_bidirectional_up_down_20_regular,
               text: (stats?.downlinkTotal ?? 0).size(),
+              semanticLabel: t.proxies.statsSemantics.totalTransferred,
             ),
             const Gap(8),
             _InfoProp(
               icon: FluentIcons.arrow_download_20_regular,
               text: (stats?.downlink ?? 0).speed(),
+              semanticLabel: t.proxies.statsSemantics.speed,
             ),
           ],
         ),
@@ -118,14 +123,18 @@ class _InfoProp extends StatelessWidget {
   const _InfoProp({
     required this.icon,
     required this.text,
+    this.semanticLabel,
   });
 
   final IconData icon;
   final String text;
+  final String? semanticLabel;
 
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return Semantics(
+      label: semanticLabel,
+      child: Row(
         children: [
           Icon(icon),
           const Gap(8),
@@ -137,6 +146,7 @@ class _InfoProp extends StatelessWidget {
             ),
           ),
         ],
+      ),
     );
   }
 }

lib/features/proxy/active/ip_widget.dart

@@ -1,6 +1,7 @@
 import 'package:circle_flags/circle_flags.dart';
 import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
+import 'package:hiddify/core/localization/translations.dart';
 import 'package:hiddify/utils/riverpod_utils.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
@@ -23,10 +24,13 @@ class IPText extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final t = ref.watch(translationsProvider);
     final isVisible = ref.watch(_showIp);
     final textTheme = Theme.of(context).textTheme;
 
-    return InkWell(
+    return Semantics(
+      label: t.proxies.ipInfoSemantics.address,
+      child: InkWell(
         onTap: () {
           ref.read(_showIp.notifier).state = !isVisible;
         },
@@ -46,15 +50,19 @@ class IPText extends HookConsumerWidget {
                   : const EdgeInsetsDirectional.only(end: 48),
               child: Text(
                 "*.*.*.*",
-              style: constrained ? textTheme.labelMedium : textTheme.labelLarge,
+                semanticsLabel: t.general.hidden,
+                style:
+                    constrained ? textTheme.labelMedium : textTheme.labelLarge,
                 overflow: TextOverflow.ellipsis,
               ),
             ),
-          crossFadeState:
-              isVisible ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+            crossFadeState: isVisible
+                ? CrossFadeState.showFirst
+                : CrossFadeState.showSecond,
             duration: const Duration(milliseconds: 200),
           ),
         ),
+      ),
     );
   }
 }
@@ -67,9 +75,12 @@ class IPCountryFlag extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final t = ref.watch(translationsProvider);
     final isVisible = ref.watch(_showIp);
 
-    return InkWell(
+    return Semantics(
+      label: t.proxies.ipInfoSemantics.country,
+      child: InkWell(
         onTap: () {
           ref.read(_showIp.notifier).state = !isVisible;
         },
@@ -81,7 +92,8 @@ class IPCountryFlag extends HookConsumerWidget {
           child: Center(
             child: AnimatedCrossFade(
               firstChild: CircleFlag(countryCode),
-            secondChild: Icon(FluentIcons.eye_off_24_regular, size: size * .8),
+              secondChild:
+                  Icon(FluentIcons.eye_off_24_regular, size: size * .8),
               crossFadeState: isVisible
                   ? CrossFadeState.showFirst
                   : CrossFadeState.showSecond,
@@ -89,6 +101,7 @@ class IPCountryFlag extends HookConsumerWidget {
             ),
           ),
         ),
+      ),
     );
   }
 }