feat(accessibility): Add screen reader descriptions for graphs

assets/translations/en.json

@@ -136,16 +136,24 @@
         "day": "Day",
         "hour": "Hour",
         "cpu_title": "CPU Usage",
+        "cpu_chart_screen_reader_explanation": "This chart shows the CPU usage in last {period}. The last value is at {lastValue}%. The average usage is at {averageUsage}%. The maximal usage is at {maxUsage}% at {maxUsageTime}.",
         "disk_title": "Disk Usage",
+        "disk_chart_screen_reader_explanation": {
+            "beginning": "This chart shows the disk usage in last {period}. ",
+            "disk": "For {disk} the consumption went from {beginningValue}% to {endValue}%. "
+        },
         "network_title": "Network Usage",
+        "network_chart_screen_reader_explanation": "This chart shows the network usage in last {period}. The last value is at {lastValueIn} inbound and {lastValueOut} outbound. The average usage is at {averageUsageIn} inbound and {averageUsageOut} outbound. The maximal inbound usage is at {maxUsageIn} at {maxUsageTimeIn} and maximal outbound {maxUsageOut} at {maxUsageTimeOut} out.",
         "in": "In",
         "out": "Out",
         "memory": "Memory usage",
+        "memory_chart_screen_reader_explanation": "This chart shows the memory usage in last {period}. The last value is at {lastValue}%. The average usage is at {averageUsage}%. The maximal usage is at {maxUsage}% at {maxUsageTime}.",
         "view_usage_by_service": "View usage by service",
         "unsupported": "You can't view resource usage charts without the server provider token.",
         "system": "System",
         "ssh_users": "SSH users",
         "ram_usage": "Average usage: {average}. Maximum: {max}.",
+        "loading": "The chart is loading…",
         "failed_to_load_memory_metrics": "Couldn't load memory usage data. This might be a connection issue, or there is not enough data yet."
     },
     "server": {

assets/translations/ru.json

@@ -136,6 +136,7 @@
         "day": "День",
         "hour": "Час",
         "cpu_title": "Использование процессора",
+        "cpu_chart_screen_reader_explanation": "Этот график показывает использование процессора за последний {period}. Последнее значение {lastValue}%. Среднее использование {averageUsage}%. Максимальное использование было {maxUsage}% в {maxUsageTime}.",
         "network_title": "Использование сети",
         "in": "Получено",
         "out": "Отправлено",

lib/ui/components/cards/filled_card.dart

@@ -7,6 +7,7 @@ class FilledCard extends StatelessWidget {
     this.tertiary = false,
     this.error = false,
     this.clipped = true,
+    this.mergeSemantics = true,
     super.key,
   });
 
@@ -15,6 +16,7 @@ class FilledCard extends StatelessWidget {
   final bool error;
   final bool clipped;
   final bool secondary;
+  final bool mergeSemantics;
   @override
   Widget build(final BuildContext context) => Card(
         elevation: 0.0,
@@ -29,6 +31,7 @@ class FilledCard extends StatelessWidget {
                 : tertiary
                     ? Theme.of(context).colorScheme.tertiaryContainer
                     : Theme.of(context).colorScheme.surfaceVariant,
+        semanticContainer: mergeSemantics,
         child: child,
       );
 }

lib/ui/components/pre_styled_buttons/flash_fab.dart

@@ -75,6 +75,7 @@ class _BrandFabState extends State<BrandFab>
           );
         },
         isExtended: widget.extended,
+        tooltip: 'jobs.title'.tr(),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.center,
           mainAxisAlignment: MainAxisAlignment.center,

lib/ui/pages/server_details/charts/chart.dart

@@ -60,6 +60,7 @@ class _Chart extends StatelessWidget {
         if (!(state is MetricsLoaded && state.memoryMetrics == null))
           FilledCard(
             clipped: false,
+            mergeSemantics: false,
             child: Padding(
               padding: const EdgeInsets.all(16.0),
               child: Column(
@@ -110,7 +111,8 @@ class _Chart extends StatelessWidget {
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Row(
+                ExcludeSemantics(
+                  child: Row(
                     crossAxisAlignment: CrossAxisAlignment.center,
                     mainAxisSize: MainAxisSize.max,
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -147,6 +149,7 @@ class _Chart extends StatelessWidget {
                       ),
                     ],
                   ),
+                ),
                 const SizedBox(height: 20),
                 Stack(
                   alignment: Alignment.center,
@@ -205,7 +208,8 @@ class _Chart extends StatelessWidget {
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
-                      Row(
+                      ExcludeSemantics(
+                        child: Row(
                           crossAxisAlignment: CrossAxisAlignment.center,
                           mainAxisSize: MainAxisSize.max,
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -242,6 +246,7 @@ class _Chart extends StatelessWidget {
                             ),
                           ],
                         ),
+                      ),
                       const SizedBox(height: 20),
                       Stack(
                         alignment: Alignment.center,
@@ -390,9 +395,12 @@ class _GraphLoadingCardContent extends StatelessWidget {
   const _GraphLoadingCardContent();
 
   @override
-  Widget build(final BuildContext context) => const SizedBox(
+  Widget build(final BuildContext context) => SizedBox(
         height: 200,
-        child: Center(child: CircularProgressIndicator.adaptive()),
+        child: Semantics(
+          label: 'resource_chart.loading'.tr(),
+          child: const Center(child: CircularProgressIndicator.adaptive()),
+        ),
       );
 }
 

lib/ui/pages/server_details/charts/cpu_chart.dart

@@ -1,6 +1,6 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
 import 'package:selfprivacy/logic/common_enum/common_enum.dart';
 import 'package:selfprivacy/logic/models/metrics.dart';
 import 'package:selfprivacy/ui/pages/server_details/charts/bottom_title.dart';
@@ -29,8 +29,36 @@ class CpuChart extends StatelessWidget {
     return res;
   }
 
+  String screenReaderDescription(final BuildContext context) {
+    final lastData = data.last;
+    final lastValue = lastData.value;
+
+    final averageUsage =
+        data.map((final e) => e.value).reduce((final a, final b) => a + b) /
+            data.length;
+    final maxUsage = data
+        .map((final e) => e.value)
+        .reduce((final a, final b) => a > b ? a : b);
+    final maxUsageTime = data.firstWhere((final e) => e.value == maxUsage).time;
+
+    final label = 'resource_chart.cpu_chart_screen_reader_explanation'.tr(
+      namedArgs: {
+        'period': 'resource_chart.${period.name}'.tr(),
+        'lastValue': lastValue.toStringAsFixed(1),
+        'averageUsage': averageUsage.toStringAsFixed(1),
+        'maxUsage': maxUsage.toStringAsFixed(1),
+        'maxUsageTime': DateFormat('HH:mm dd MMMM', context.locale.languageCode)
+            .format(maxUsageTime),
+      },
+    );
+
+    return label;
+  }
+
   @override
-  Widget build(final BuildContext context) => LineChart(
+  Widget build(final BuildContext context) => Semantics(
+        label: screenReaderDescription(context),
+        child: LineChart(
           LineChartData(
             lineTouchData: LineTouchData(
               enabled: true,
@@ -96,6 +124,7 @@ class CpuChart extends StatelessWidget {
                   reservedSize: 30,
                   getTitlesWidget: (final value, final titleMeta) => Padding(
                     padding: const EdgeInsets.all(8.0),
+                    child: ExcludeSemantics(
                       child: Text(
                         bottomTitle(
                           value.toInt(),
@@ -103,7 +132,10 @@ class CpuChart extends StatelessWidget {
                           period,
                         ),
                         style: Theme.of(context).textTheme.labelSmall?.copyWith(
-                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                              color: Theme.of(context)
+                                  .colorScheme
+                                  .onSurfaceVariant,
+                            ),
                       ),
                     ),
                   ),
@@ -157,6 +189,7 @@ class CpuChart extends StatelessWidget {
               ),
             ),
           ),
+        ),
       );
 
   bool checkToShowTitle(

lib/ui/pages/server_details/charts/disk_charts.dart

@@ -32,6 +32,36 @@ class DiskChart extends StatelessWidget {
     return res;
   }
 
+  String screenReaderDescription(final BuildContext context) {
+    final buffer = StringBuffer();
+    buffer.write(
+      'resource_chart.disk_chart_screen_reader_explanation.beginning'.tr(
+        namedArgs: {
+          'period': 'resource_chart.${period.name}'.tr(),
+        },
+      ),
+    );
+
+    for (final disk in diskData) {
+      final lastData = disk.diskData.last;
+      final lastValue = lastData.value;
+
+      final firstData = disk.diskData.first;
+      final firstValue = firstData.value;
+
+      buffer.write(
+        'resource_chart.disk_chart_screen_reader_explanation.disk'.tr(
+          namedArgs: {
+            'disk': disk.volume.displayName,
+            'beginningValue': firstValue.toStringAsFixed(1),
+            'endValue': lastValue.toStringAsFixed(1),
+          },
+        ),
+      );
+    }
+    return buffer.toString();
+  }
+
   @override
   Widget build(final BuildContext context) {
     final diskDataMax = [
@@ -39,7 +69,9 @@ class DiskChart extends StatelessWidget {
         (final disk) => disk.diskData.map((final e) => e.value).toList(),
       ),
     ].expand((final x) => x).reduce(max);
-    return LineChart(
+    return Semantics(
+      label: screenReaderDescription(context),
+      child: LineChart(
         LineChartData(
           lineTouchData: LineTouchData(
             enabled: true,
@@ -109,6 +141,7 @@ class DiskChart extends StatelessWidget {
                 reservedSize: 30,
                 getTitlesWidget: (final value, final titleMeta) => Padding(
                   padding: const EdgeInsets.all(8.0),
+                  child: ExcludeSemantics(
                     child: Text(
                       bottomTitle(
                         value.toInt(),
@@ -116,7 +149,9 @@ class DiskChart extends StatelessWidget {
                         period,
                       ),
                       style: Theme.of(context).textTheme.labelSmall?.copyWith(
-                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                            color:
+                                Theme.of(context).colorScheme.onSurfaceVariant,
+                          ),
                     ),
                   ),
                 ),
@@ -126,20 +161,9 @@ class DiskChart extends StatelessWidget {
             leftTitles: const AxisTitles(
               sideTitles: SideTitles(showTitles: false),
             ),
-          rightTitles: AxisTitles(
+            rightTitles: const AxisTitles(
               sideTitles: SideTitles(
-              reservedSize: 50,
+                showTitles: false,
-              getTitlesWidget: (final value, final titleMeta) => Padding(
-                padding: const EdgeInsets.only(left: 5),
-                child: Text(
-                  '${value.toInt()}%',
-                  style: Theme.of(context).textTheme.labelSmall?.copyWith(
-                        color: Theme.of(context).colorScheme.onSurfaceVariant,
-                      ),
-                ),
-              ),
-              interval: diskDataMax * 2 / 6.5,
-              showTitles: true,
               ),
             ),
           ),
@@ -179,6 +203,7 @@ class DiskChart extends StatelessWidget {
             ),
           ),
         ),
+      ),
     );
   }
 

lib/ui/pages/server_details/charts/memory_chart.dart

@@ -1,6 +1,6 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
 import 'package:selfprivacy/logic/common_enum/common_enum.dart';
 import 'package:selfprivacy/logic/models/metrics.dart';
 import 'package:selfprivacy/ui/pages/server_details/charts/bottom_title.dart';
@@ -29,8 +29,36 @@ class MemoryChart extends StatelessWidget {
     return res;
   }
 
+  String screenReaderDescription(final BuildContext context) {
+    final lastData = data.last;
+    final lastValue = lastData.value;
+
+    final averageUsage =
+        data.map((final e) => e.value).reduce((final a, final b) => a + b) /
+            data.length;
+    final maxUsage = data
+        .map((final e) => e.value)
+        .reduce((final a, final b) => a > b ? a : b);
+    final maxUsageTime = data.firstWhere((final e) => e.value == maxUsage).time;
+
+    final label = 'resource_chart.memory_chart_screen_reader_explanation'.tr(
+      namedArgs: {
+        'period': 'resource_chart.${period.name}'.tr(),
+        'lastValue': lastValue.toStringAsFixed(1),
+        'averageUsage': averageUsage.toStringAsFixed(1),
+        'maxUsage': maxUsage.toStringAsFixed(1),
+        'maxUsageTime': DateFormat('HH:mm dd MMMM', context.locale.languageCode)
+            .format(maxUsageTime),
+      },
+    );
+
+    return label;
+  }
+
   @override
-  Widget build(final BuildContext context) => LineChart(
+  Widget build(final BuildContext context) => Semantics(
+        label: screenReaderDescription(context),
+        child: LineChart(
           LineChartData(
             lineTouchData: LineTouchData(
               enabled: true,
@@ -96,6 +124,7 @@ class MemoryChart extends StatelessWidget {
                   reservedSize: 30,
                   getTitlesWidget: (final value, final titleMeta) => Padding(
                     padding: const EdgeInsets.all(8.0),
+                    child: ExcludeSemantics(
                       child: Text(
                         bottomTitle(
                           value.toInt(),
@@ -103,7 +132,10 @@ class MemoryChart extends StatelessWidget {
                           period,
                         ),
                         style: Theme.of(context).textTheme.labelSmall?.copyWith(
-                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                              color: Theme.of(context)
+                                  .colorScheme
+                                  .onSurfaceVariant,
+                            ),
                       ),
                     ),
                   ),
@@ -157,6 +189,7 @@ class MemoryChart extends StatelessWidget {
               ),
             ),
           ),
+        ),
       );
 
   bool checkToShowTitle(

lib/ui/pages/server_details/charts/network_charts.dart

@@ -32,13 +32,63 @@ class NetworkChart extends StatelessWidget {
     return res;
   }
 
+  String screenReaderDescription(final BuildContext context) {
+    final lastDataIn = listData[0].last;
+    final lastDataOut = listData[1].last;
+    final lastValueIn = lastDataIn.value;
+    final lastValueOut = lastDataOut.value;
+
+    final averageUsageIn = listData[0]
+            .map((final e) => e.value)
+            .reduce((final a, final b) => a + b) /
+        listData[0].length;
+    final averageUsageOut = listData[1]
+            .map((final e) => e.value)
+            .reduce((final a, final b) => a + b) /
+        listData[1].length;
+
+    final maxUsageIn = listData[0]
+        .map((final e) => e.value)
+        .reduce((final a, final b) => a > b ? a : b);
+    final maxUsageOut = listData[1]
+        .map((final e) => e.value)
+        .reduce((final a, final b) => a > b ? a : b);
+
+    final maxUsageTimeIn =
+        listData[0].firstWhere((final e) => e.value == maxUsageIn).time;
+    final maxUsageTimeOut =
+        listData[1].firstWhere((final e) => e.value == maxUsageOut).time;
+
+    final label = 'resource_chart.network_chart_screen_reader_explanation'.tr(
+      namedArgs: {
+        'period': 'resource_chart.${period.name}'.tr(),
+        'lastValueIn': DiskSize(byte: lastValueIn.toInt()).toString(),
+        'lastValueOut': DiskSize(byte: lastValueOut.toInt()).toString(),
+        'averageUsageIn': DiskSize(byte: averageUsageIn.toInt()).toString(),
+        'averageUsageOut': DiskSize(byte: averageUsageOut.toInt()).toString(),
+        'maxUsageIn': DiskSize(byte: maxUsageIn.toInt()).toString(),
+        'maxUsageOut': DiskSize(byte: maxUsageOut.toInt()).toString(),
+        'maxUsageTimeIn':
+            DateFormat('HH:mm dd MMMM', context.locale.languageCode)
+                .format(maxUsageTimeIn),
+        'maxUsageTimeOut':
+            DateFormat('HH:mm dd MMMM', context.locale.languageCode)
+                .format(maxUsageTimeOut),
+      },
+    );
+
+    return label;
+  }
+
   @override
   Widget build(final BuildContext context) {
     final listDataMax = [
       ...listData[0].map((final e) => e.value),
       ...listData[1].map((final e) => e.value),
     ].reduce(max);
-    return LineChart(
+    return Semantics(
+      label: screenReaderDescription(context),
+      child: LineChart(
         LineChartData(
           lineTouchData: LineTouchData(
             enabled: true,
@@ -129,6 +179,7 @@ class NetworkChart extends StatelessWidget {
                 reservedSize: 30,
                 getTitlesWidget: (final value, final titleMeta) => Padding(
                   padding: const EdgeInsets.all(8.0),
+                  child: ExcludeSemantics(
                     child: Text(
                       bottomTitle(
                         value.toInt(),
@@ -136,7 +187,9 @@ class NetworkChart extends StatelessWidget {
                         period,
                       ),
                       style: Theme.of(context).textTheme.labelSmall?.copyWith(
-                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                            color:
+                                Theme.of(context).colorScheme.onSurfaceVariant,
+                          ),
                     ),
                   ),
                 ),
@@ -151,10 +204,13 @@ class NetworkChart extends StatelessWidget {
                 reservedSize: 50,
                 getTitlesWidget: (final value, final titleMeta) => Padding(
                   padding: const EdgeInsets.only(left: 5),
+                  child: ExcludeSemantics(
                     child: Text(
                       DiskSize(byte: value.toInt()).toString(),
                       style: Theme.of(context).textTheme.labelSmall?.copyWith(
-                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                            color:
+                                Theme.of(context).colorScheme.onSurfaceVariant,
+                          ),
                     ),
                   ),
                 ),
@@ -199,6 +255,7 @@ class NetworkChart extends StatelessWidget {
             ),
           ),
         ),
+      ),
     );
   }