From ae4c6b8a4e68c64aca2e28d2b30fbea0a45536d7 Mon Sep 17 00:00:00 2001 From: bemusementpark Date: Wed, 3 Jul 2024 08:27:07 +0930 Subject: [PATCH] Fix RadioButton a11y --- .../MessageNotifications.kt | 69 ++----------- .../securesms/ui/components/RadioButton.kt | 99 +++++++++++++++++++ 2 files changed, 106 insertions(+), 62 deletions(-) create mode 100644 app/src/main/java/org/thoughtcrime/securesms/ui/components/RadioButton.kt diff --git a/app/src/main/java/org/thoughtcrime/securesms/onboarding/messagenotifications/MessageNotifications.kt b/app/src/main/java/org/thoughtcrime/securesms/onboarding/messagenotifications/MessageNotifications.kt index 1b0be5506c..f609afd1f4 100644 --- a/app/src/main/java/org/thoughtcrime/securesms/onboarding/messagenotifications/MessageNotifications.kt +++ b/app/src/main/java/org/thoughtcrime/securesms/onboarding/messagenotifications/MessageNotifications.kt @@ -1,31 +1,19 @@ package org.thoughtcrime.securesms.onboarding.messagenotifications import androidx.annotation.StringRes -import androidx.compose.animation.AnimatedVisibility -import androidx.compose.animation.scaleIn -import androidx.compose.animation.scaleOut -import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size -import androidx.compose.foundation.layout.width -import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Text -import androidx.compose.material.TextButton import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter @@ -42,8 +30,8 @@ import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider import org.thoughtcrime.securesms.ui.base import org.thoughtcrime.securesms.ui.color.Colors import org.thoughtcrime.securesms.ui.color.LocalColors -import org.thoughtcrime.securesms.ui.color.transparentButtonColors import org.thoughtcrime.securesms.ui.components.CircularProgressIndicator +import org.thoughtcrime.securesms.ui.components.RadioButton import org.thoughtcrime.securesms.ui.contentDescription import org.thoughtcrime.securesms.ui.h4 import org.thoughtcrime.securesms.ui.h8 @@ -100,7 +88,7 @@ internal fun MessageNotificationsScreen( R.string.activity_pn_mode_fast_mode_explanation, modifier = Modifier.contentDescription(R.string.AccessibilityId_fast_mode_notifications_button), tag = R.string.activity_pn_mode_recommended_option_tag, - selected = state.pushEnabled, + checked = state.pushEnabled, onClick = { setEnabled(true) } ) @@ -110,7 +98,7 @@ internal fun MessageNotificationsScreen( R.string.activity_pn_mode_slow_mode, R.string.activity_pn_mode_slow_mode_explanation, modifier = Modifier.contentDescription(R.string.AccessibilityId_slow_mode_notifications_button), - selected = state.pushDisabled, + checked = state.pushDisabled, onClick = { setEnabled(false) } ) @@ -126,14 +114,13 @@ private fun NotificationRadioButton( @StringRes explanation: Int, modifier: Modifier = Modifier, @StringRes tag: Int? = null, - selected: Boolean = false, + checked: Boolean = false, onClick: () -> Unit = {} ) { - TextButton( - modifier = modifier.fillMaxWidth(), - colors = transparentButtonColors(), + RadioButton( onClick = onClick, - shape = RectangleShape, + modifier = modifier, + checked = checked, contentPadding = PaddingValues(horizontal = LocalDimensions.current.margin, vertical = 7.dp) ) { Box( @@ -161,48 +148,6 @@ private fun NotificationRadioButton( } } } - Spacer(modifier = Modifier.width(20.dp)) - RadioButtonIndicator( - selected = selected, - modifier = Modifier - .size(22.dp) - .align(Alignment.CenterVertically) - ) - } -} - -@Composable -private fun RadioButtonIndicator( - selected: Boolean, - modifier: Modifier -) { - Box(modifier = modifier) { - AnimatedVisibility( - selected, - modifier = Modifier - .padding(2.5.dp) - .clip(CircleShape), - enter = scaleIn(), - exit = scaleOut() - ) { - Box( - modifier = Modifier - .fillMaxSize() - .background( - color = LocalColors.current.primary, - shape = CircleShape - ) - ) - } - Box( - modifier = Modifier - .aspectRatio(1f) - .border( - width = LocalDimensions.current.borderStroke, - color = LocalColors.current.text, - shape = CircleShape - ) - ) {} } } diff --git a/app/src/main/java/org/thoughtcrime/securesms/ui/components/RadioButton.kt b/app/src/main/java/org/thoughtcrime/securesms/ui/components/RadioButton.kt new file mode 100644 index 0000000000..8058459a7c --- /dev/null +++ b/app/src/main/java/org/thoughtcrime/securesms/ui/components/RadioButton.kt @@ -0,0 +1,99 @@ +package org.thoughtcrime.securesms.ui.components + +import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.scaleIn +import androidx.compose.animation.scaleOut +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.aspectRatio +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.selection.selectable +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.TextButton +import androidx.compose.material.ripple.rememberRipple +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.RectangleShape +import androidx.compose.ui.semantics.Role +import androidx.compose.ui.unit.dp +import org.thoughtcrime.securesms.ui.LocalDimensions +import org.thoughtcrime.securesms.ui.color.LocalColors +import org.thoughtcrime.securesms.ui.color.transparentButtonColors + +@Composable +fun RadioButton( + onClick: () -> Unit = {}, + modifier: Modifier = Modifier, + checked: Boolean = false, + contentPadding: PaddingValues = PaddingValues(), + content: @Composable RowScope.() -> Unit = {} +) { + TextButton( + modifier = modifier + .fillMaxWidth() + .selectable( + selected = checked, + enabled = true, + role = Role.RadioButton, + onClick = onClick + ), + colors = transparentButtonColors(), + onClick = onClick, + shape = RectangleShape, + contentPadding = contentPadding + ) { + content() + Spacer(modifier = Modifier.width(20.dp)) + RadioButtonIndicator( + checked = checked, + modifier = Modifier + .size(22.dp) + .align(Alignment.CenterVertically) + ) + } +} + +@Composable +private fun RadioButtonIndicator( + checked: Boolean, + modifier: Modifier +) { + Box(modifier = modifier) { + AnimatedVisibility( + checked, + modifier = Modifier + .padding(2.5.dp) + .clip(CircleShape), + enter = scaleIn(), + exit = scaleOut() + ) { + Box( + modifier = Modifier + .fillMaxSize() + .background( + color = LocalColors.current.primary, + shape = CircleShape + ) + ) + } + Box( + modifier = Modifier + .aspectRatio(1f) + .border( + width = LocalDimensions.current.borderStroke, + color = LocalColors.current.text, + shape = CircleShape + ) + ) {} + } +}