SelfPrivacy/selfprivacy.org.app
1
0
Fork 0
mirror of https://git.selfprivacy.org/kherel/selfprivacy.org.app.git synced 2025-03-11 09:14:10 +00:00
Code Issues Projects Releases Wiki Activity

feat(accessibility): Add screen reader descriptions for graphs

Browse source
This commit is contained in:
Inex Code 2024-08-06 22:04:34 +03:00
parent 100ad5c367
commit d01df51296
9 changed files with 730 additions and 561 deletions
assets/translations
en.jsonru.json
lib/ui
components
cards
filled_card.dart
pre_styled_buttons
flash_fab.dart
pages/server_details/charts
chart.dartcpu_chart.dartdisk_charts.dartmemory_chart.dartnetwork_charts.dart

8
assets/translations/en.json
View file

@ -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": {

1
assets/translations/ru.json
View file

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

3
lib/ui/components/cards/filled_card.dart
View file

@ -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,
);
}

1
lib/ui/components/pre_styled_buttons/flash_fab.dart
View file

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

16
lib/ui/pages/server_details/charts/chart.dart
View file

@ -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()),
),
);
}

39
lib/ui/pages/server_details/charts/cpu_chart.dart
View file

@ -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(

55
lib/ui/pages/server_details/charts/disk_charts.dart
View file

@ -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,
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,
showTitles: false,
),
),
),
@ -179,6 +203,7 @@ class DiskChart extends StatelessWidget {
),
),
),
),
);
}

39
lib/ui/pages/server_details/charts/memory_chart.dart
View file

@ -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(

63
lib/ui/pages/server_details/charts/network_charts.dart
View file

@ -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 {
),
),
),
),
);
}