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,9 +149,11 @@ class _ConnectionButton extends StatelessWidget {
               .scaleXY(end: .88, curve: Curves.easeIn),
         ),
         const Gap(16),
-        Text(
+        ExcludeSemantics(
-          label,
+          child: Text(
-          style: Theme.of(context).textTheme.titleMedium,
+            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,25 +123,30 @@ 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(
-      children: [
+      label: semanticLabel,
-        Icon(icon),
+      child: Row(
-        const Gap(8),
+        children: [
-        Flexible(
+          Icon(icon),
-          child: Text(
+          const Gap(8),
-            text,
+          Flexible(
-            style: Theme.of(context).textTheme.labelMedium,
+            child: Text(
-            overflow: TextOverflow.ellipsis,
+              text,
+              style: Theme.of(context).textTheme.labelMedium,
+              overflow: TextOverflow.ellipsis,
+            ),
           ),
-        ),
+        ],
-      ],
+      ),
     );
   }
 }

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,36 +24,43 @@ 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(
-      onTap: () {
+      label: t.proxies.ipInfoSemantics.address,
-        ref.read(_showIp.notifier).state = !isVisible;
+      child: InkWell(
-      },
+        onTap: () {
-      onLongPress: onLongPress,
+          ref.read(_showIp.notifier).state = !isVisible;
-      borderRadius: BorderRadius.circular(12),
+        },
-      child: Padding(
+        onLongPress: onLongPress,
-        padding: const EdgeInsets.symmetric(horizontal: 2),
+        borderRadius: BorderRadius.circular(12),
-        child: AnimatedCrossFade(
+        child: Padding(
-          firstChild: Text(
+          padding: const EdgeInsets.symmetric(horizontal: 2),
-            ip,
+          child: AnimatedCrossFade(
-            style: textTheme.labelMedium,
+            firstChild: Text(
-            overflow: TextOverflow.ellipsis,
+              ip,
-          ),
+              style: textTheme.labelMedium,
-          secondChild: Padding(
-            padding: constrained
-                ? EdgeInsets.zero
-                : const EdgeInsetsDirectional.only(end: 48),
-            child: Text(
-              "*.*.*.*",
-              style: constrained ? textTheme.labelMedium : textTheme.labelLarge,
               overflow: TextOverflow.ellipsis,
             ),
+            secondChild: Padding(
+              padding: constrained
+                  ? EdgeInsets.zero
+                  : const EdgeInsetsDirectional.only(end: 48),
+              child: Text(
+                "*.*.*.*",
+                semanticsLabel: t.general.hidden,
+                style:
+                    constrained ? textTheme.labelMedium : textTheme.labelLarge,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+            crossFadeState: isVisible
+                ? CrossFadeState.showFirst
+                : CrossFadeState.showSecond,
+            duration: const Duration(milliseconds: 200),
           ),
-          crossFadeState:
-              isVisible ? CrossFadeState.showFirst : CrossFadeState.showSecond,
-          duration: const Duration(milliseconds: 200),
         ),
       ),
     );
@@ -67,25 +75,30 @@ 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(
-      onTap: () {
+      label: t.proxies.ipInfoSemantics.country,
-        ref.read(_showIp.notifier).state = !isVisible;
+      child: InkWell(
-      },
+        onTap: () {
-      borderRadius: BorderRadius.circular(12),
+          ref.read(_showIp.notifier).state = !isVisible;
-      child: Container(
+        },
-        width: size,
+        borderRadius: BorderRadius.circular(12),
-        height: size,
+        child: Container(
-        padding: const EdgeInsets.all(2),
+          width: size,
-        child: Center(
+          height: size,
-          child: AnimatedCrossFade(
+          padding: const EdgeInsets.all(2),
-            firstChild: CircleFlag(countryCode),
+          child: Center(
-            secondChild: Icon(FluentIcons.eye_off_24_regular, size: size * .8),
+            child: AnimatedCrossFade(
-            crossFadeState: isVisible
+              firstChild: CircleFlag(countryCode),
-                ? CrossFadeState.showFirst
+              secondChild:
-                : CrossFadeState.showSecond,
+                  Icon(FluentIcons.eye_off_24_regular, size: size * .8),
-            duration: const Duration(milliseconds: 200),
+              crossFadeState: isVisible
+                  ? CrossFadeState.showFirst
+                  : CrossFadeState.showSecond,
+              duration: const Duration(milliseconds: 200),
+            ),
           ),
         ),
       ),