From 9b9e4b38718e9d0cf3107eace871f53e17b67e9b Mon Sep 17 00:00:00 2001
From: ialokim <ialokim@mailbox.org>
Date: Tue, 21 Jun 2022 14:08:22 +0200
Subject: [PATCH] better screen reader support for about table
---
.../briar/desktop/login/StartupScreen.kt | 11 +-----
.../briar/desktop/ui/AboutScreen.kt | 39 +++++++++++++------
.../resources/strings/BriarDesktop.properties | 1 +
3 files changed, 29 insertions(+), 22 deletions(-)
diff --git a/briar-desktop/src/main/kotlin/org/briarproject/briar/desktop/login/StartupScreen.kt b/briar-desktop/src/main/kotlin/org/briarproject/briar/desktop/login/StartupScreen.kt
index 5e5c17b864..fb697f351a 100644
--- a/briar-desktop/src/main/kotlin/org/briarproject/briar/desktop/login/StartupScreen.kt
+++ b/briar-desktop/src/main/kotlin/org/briarproject/briar/desktop/login/StartupScreen.kt
@@ -51,16 +51,7 @@ fun StartupScreen(
is LoginSubViewModel -> LoginScreen(viewModel::showAbout, holder)
is RegistrationSubViewModel -> RegistrationScreen(viewModel::showAbout, holder)
is ErrorSubViewModel -> ErrorScreen(holder)
- is AboutSubViewModel -> Box {
- AboutScreen(Modifier.padding(16.dp))
-
- IconButton(
- onClick = holder.onBackButton,
- modifier = Modifier.align(Alignment.TopStart)
- ) {
- Icon(Icons.Filled.ArrowBack, i18n("back"))
- }
- }
+ is AboutSubViewModel -> AboutScreen(holder.onBackButton)
}
}
diff --git a/briar-desktop/src/main/kotlin/org/briarproject/briar/desktop/ui/AboutScreen.kt b/briar-desktop/src/main/kotlin/org/briarproject/briar/desktop/ui/AboutScreen.kt
index 7d4867d9cf..8fc879972e 100644
--- a/briar-desktop/src/main/kotlin/org/briarproject/briar/desktop/ui/AboutScreen.kt
+++ b/briar-desktop/src/main/kotlin/org/briarproject/briar/desktop/ui/AboutScreen.kt
@@ -24,6 +24,10 @@ import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.text
+import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import org.briarproject.briar.desktop.BuildData
@@ -48,18 +52,18 @@ fun main() = preview(
fun AboutScreen(
onBackButton: () -> Unit,
) = Box {
- AboutScreen(Modifier.padding(16.dp))
+ AboutScreen()
IconButton(
onClick = onBackButton,
modifier = Modifier.align(Alignment.TopStart)
) {
- Icon(Icons.Filled.ArrowBack, i18n("back"))
+ Icon(Icons.Filled.ArrowBack, i18n("access.return_to_previous_screen"))
}
}
@Composable
-fun AboutScreen(modifier: Modifier = Modifier) {
+fun AboutScreen(modifier: Modifier = Modifier.padding(16.dp)) {
// sizes of the two columns
val colSizes = listOf(0.3f, 0.7f)
@@ -83,7 +87,7 @@ fun AboutScreen(modifier: Modifier = Modifier) {
Column(modifier) {
Row(
- modifier = Modifier.padding(bottom = 8.dp).fillMaxWidth(),
+ modifier = Modifier.padding(bottom = 16.dp).fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
@@ -98,19 +102,31 @@ fun AboutScreen(modifier: Modifier = Modifier) {
}
val scrollState = rememberLazyListState()
Box {
- LazyColumn(state = scrollState) {
+ LazyColumn(
+ modifier = Modifier.semantics {
+ contentDescription = i18n("access.about.list")
+ },
+ state = scrollState
+ ) {
item {
HorizontalDivider()
}
items(lines) { (key, value) ->
- // this is required for Divider between Boxes to have appropriate size
- Row(Modifier.fillMaxWidth().height(IntrinsicSize.Min)) {
+ Row(
+ Modifier
+ .fillMaxWidth()
+ // this is required for Divider between Boxes to have appropriate size
+ .height(IntrinsicSize.Min)
+ .semantics(mergeDescendants = true) {
+ // manual text setting can be removed if Compose issue resolved
+ // https://github.com/JetBrains/compose-jb/issues/2111
+ text = buildAnnotatedString { append("$key: $value") }
+ }
+ ) {
Box(modifier = Modifier.weight(colSizes[0]).fillMaxHeight()) {
Text(
text = key,
- modifier = Modifier.padding(horizontal = 8.dp)
- .padding(vertical = 8.dp).padding(end = 8.dp)
- .align(Alignment.CenterStart)
+ modifier = Modifier.padding(8.dp)
)
}
VerticalDivider()
@@ -118,8 +134,7 @@ fun AboutScreen(modifier: Modifier = Modifier) {
SelectionContainer {
Text(
text = value,
- modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp)
- .padding(start = 8.dp)
+ modifier = Modifier.padding(8.dp)
)
}
}
diff --git a/briar-desktop/src/main/resources/strings/BriarDesktop.properties b/briar-desktop/src/main/resources/strings/BriarDesktop.properties
index 39f09d11b4..d4f2c7da2a 100644
--- a/briar-desktop/src/main/resources/strings/BriarDesktop.properties
+++ b/briar-desktop/src/main/resources/strings/BriarDesktop.properties
@@ -21,6 +21,7 @@ access.mode.blogs=Blogs
access.mode.transports=Transport Settings
access.mode.settings=Settings
access.mode.about=About Briar Desktop
+access.about.list=Information about your version of Briar Desktop, the Briar Project in general and how to get in touch
access.password.show=Show password
access.password.hide=Hide password
access.settings.current_value=Current value
--
GitLab