Merge pull request #17474 from wordpress-mobile/issue/17467-fix-migration-screens-w-large-fonts

antonis · web-flow · commit efee6b86435d · 2022-11-18T11:36:05.000+02:00
Fix large font size accessibility issue on migration screens by making the content scrollable
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/ButtonsColumn.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/ButtonsColumn.kt
@@ -0,0 +1,27 @@
+package org.wordpress.android.ui.main.jetpack.migration.compose.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Divider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.unit.dp
+import org.wordpress.android.R.color
+
+@Composable
+fun ButtonsColumn(
+    modifier: Modifier = Modifier,
+    content: @Composable ColumnScope.() -> Unit
+) {
+    Column(
+            modifier = modifier.padding(bottom = 50.dp)
+    ) {
+        Divider(
+                color = colorResource(color.gray_10),
+                thickness = 0.5.dp,
+        )
+        content()
+    }
+}
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/Message.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/Message.kt
@@ -5,10 +5,12 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.wordpress.android.R.color
+import org.wordpress.android.R.dimen
 
 @Composable
 fun Message(
@@ -21,6 +23,7 @@ fun Message(
             style = TextStyle(letterSpacing = (-0.01).sp),
             color = colorResource(color.gray_50),
             modifier = modifier
+                    .padding(horizontal = dimensionResource(dimen.jp_migration_padding_horizontal))
                     .padding(top = 20.dp, bottom = 30.dp)
     )
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/ScreenIcon.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/ScreenIcon.kt
@@ -7,10 +7,12 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import org.wordpress.android.R
+import org.wordpress.android.R.dimen
 
 @Composable
 fun ScreenIcon(
@@ -21,6 +23,7 @@ fun ScreenIcon(
             painter = painterResource(iconRes),
             contentDescription = stringResource(R.string.icon_desc),
             modifier = modifier
+                    .padding(horizontal = dimensionResource(dimen.jp_migration_padding_horizontal))
                     .padding(top = 34.dp)
                     .width(123.dp)
                     .height(65.dp)
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/SiteList.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/SiteList.kt
@@ -101,7 +101,6 @@ private fun SiteListItem(uiState: SiteListItemUiState, isDimmed: Boolean) = with
 private fun SiteListHeader(uiState: UiState.Content.Welcome) = with(uiState) {
     Column(
             modifier = Modifier
-                    .padding(horizontal = dimensionResource(R.dimen.jp_migration_padding_horizontal))
                     .dimmed(uiState.isProcessing)
     ) {
         ScreenIcon(iconRes = screenIconRes)
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/Subtitle.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/Subtitle.kt
@@ -4,9 +4,11 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import org.wordpress.android.R.dimen
 
 @Composable
 fun Subtitle(
@@ -18,6 +20,7 @@ fun Subtitle(
             fontSize = 17.sp,
             style = TextStyle(letterSpacing = (-0.01).sp),
             modifier = modifier
+                    .padding(horizontal = dimensionResource(dimen.jp_migration_padding_horizontal))
                     .padding(top = 20.dp)
     )
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/Title.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/components/Title.kt
@@ -4,8 +4,10 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import org.wordpress.android.R.dimen
 import org.wordpress.android.ui.compose.unit.FontSize
 
 @Composable
@@ -18,6 +20,7 @@ fun Title(
             fontSize = FontSize.ExtraExtraExtraLarge.value,
             fontWeight = FontWeight.Bold,
             modifier = modifier
+                    .padding(horizontal = dimensionResource(dimen.jp_migration_padding_horizontal))
                     .padding(top = 30.dp)
     )
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/state/DoneStep.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/state/DoneStep.kt
@@ -2,17 +2,19 @@ package org.wordpress.android.ui.main.jetpack.migration.compose.state
 
 import android.content.res.Configuration
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+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.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.colorResource
-import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
@@ -21,60 +23,66 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.wordpress.android.R
-import org.wordpress.android.R.dimen
 import org.wordpress.android.ui.compose.theme.AppTheme
 import org.wordpress.android.ui.compose.utils.htmlToAnnotatedString
 import org.wordpress.android.ui.compose.utils.uiStringText
 import org.wordpress.android.ui.main.jetpack.migration.JetpackMigrationViewModel.ActionButton.DonePrimaryButton
 import org.wordpress.android.ui.main.jetpack.migration.JetpackMigrationViewModel.UiState
+import org.wordpress.android.ui.main.jetpack.migration.compose.components.ButtonsColumn
 import org.wordpress.android.ui.main.jetpack.migration.compose.components.PrimaryButton
 import org.wordpress.android.ui.main.jetpack.migration.compose.components.ScreenIcon
 import org.wordpress.android.ui.main.jetpack.migration.compose.components.Subtitle
 import org.wordpress.android.ui.main.jetpack.migration.compose.components.Title
 
 @Composable
 fun DoneStep(uiState: UiState.Content.Done) = with(uiState) {
-    Column {
+    Column(
+            modifier = Modifier.fillMaxSize()
+    ) {
+        val scrollState = rememberScrollState()
         Column(
-                modifier = Modifier.padding(horizontal = dimensionResource(dimen.jp_migration_padding_horizontal))
+                modifier = Modifier
+                        .verticalScroll(scrollState)
+                        .weight(1f)
         ) {
             ScreenIcon(iconRes = screenIconRes)
             Title(text = uiStringText(title))
             Subtitle(text = uiStringText(subtitle))
-        }
-        Column(
-                verticalArrangement = Arrangement.Center,
-                horizontalAlignment = Alignment.CenterHorizontally,
-                modifier = Modifier
-                        .weight(1f)
-                        .fillMaxWidth()
-        ) {
+
+            Spacer(modifier = Modifier.weight(0.5f))
             Image(
                     painter = painterResource(deleteWpIcon),
                     contentDescription = stringResource(R.string.jp_migration_remove_wp_app_icon_content_description),
                     modifier = Modifier
-                            .padding(bottom = 10.dp)
+                            .padding(top = 10.dp, bottom = 10.dp)
                             .size(70.dp)
+                            .align(Alignment.CenterHorizontally)
             )
             Text(
                     text = htmlToAnnotatedString(uiStringText(message)),
                     textAlign = TextAlign.Center,
                     fontSize = 14.sp,
                     lineHeight = 18.sp,
                     color = colorResource(R.color.gray_50),
-                    modifier = Modifier.fillMaxWidth(0.75f)
+                    modifier = Modifier
+                            .fillMaxWidth(0.75f)
+                            .align(Alignment.CenterHorizontally)
+                            .padding(bottom = 10.dp)
+            )
+            Spacer(modifier = Modifier.weight(0.5f))
+        }
+        ButtonsColumn {
+            PrimaryButton(
+                    text = uiStringText(primaryActionButton.text),
+                    onClick = primaryActionButton.onClick,
             )
         }
-        PrimaryButton(
-                text = uiStringText(primaryActionButton.text),
-                onClick = primaryActionButton.onClick,
-                modifier = Modifier.padding(bottom = 50.dp),
-        )
     }
 }
 
 @Preview(showBackground = true, device = Devices.PIXEL_4_XL)
 @Preview(showBackground = true, device = Devices.PIXEL_4_XL, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(showBackground = true, device = Devices.PIXEL_4_XL, fontScale = 2f)
 @Composable
 private fun PreviewDoneStep() {
     AppTheme {
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/state/NotificationsStep.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/jetpack/migration/compose/state/NotificationsStep.kt
@@ -1,22 +1,19 @@
 package org.wordpress.android.ui.main.jetpack.migration.compose.state
 
 import android.content.res.Configuration
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import org.wordpress.android.R.dimen
 import org.wordpress.android.ui.compose.theme.AppTheme
 import org.wordpress.android.ui.compose.utils.uiStringText
 import org.wordpress.android.ui.main.jetpack.migration.JetpackMigrationViewModel.ActionButton.NotificationsPrimaryButton
 import org.wordpress.android.ui.main.jetpack.migration.JetpackMigrationViewModel.UiState
+import org.wordpress.android.ui.main.jetpack.migration.compose.components.ButtonsColumn
 import org.wordpress.android.ui.main.jetpack.migration.compose.components.Message
 import org.wordpress.android.ui.main.jetpack.migration.compose.components.PrimaryButton
 import org.wordpress.android.ui.main.jetpack.migration.compose.components.ScreenIcon
@@ -25,31 +22,32 @@ import org.wordpress.android.ui.main.jetpack.migration.compose.components.Title
 
 @Composable
 fun NotificationsStep(uiState: UiState.Content.Notifications) = with(uiState) {
-    Box(
+    Column(
             modifier = Modifier.fillMaxSize()
     ) {
+        val scrollState = rememberScrollState()
         Column(
-                modifier = Modifier.padding(horizontal = dimensionResource(dimen.jp_migration_padding_horizontal))
+                modifier = Modifier
+                        .verticalScroll(scrollState)
+                        .weight(1f)
         ) {
             ScreenIcon(iconRes = screenIconRes)
             Title(text = uiStringText(title))
             Subtitle(text = uiStringText(subtitle))
             Message(text = uiStringText(message))
         }
-        Column(
-                modifier = Modifier.align(Alignment.BottomCenter)
-        ) {
+        ButtonsColumn {
             PrimaryButton(
                     text = uiStringText(primaryActionButton.text),
                     onClick = primaryActionButton.onClick,
-                    modifier = Modifier.padding(bottom = 50.dp),
             )
         }
     }
 }
 
 @Preview(showBackground = true, device = Devices.PIXEL_4_XL)
 @Preview(showBackground = true, device = Devices.PIXEL_4_XL, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(showBackground = true, device = Devices.PIXEL_4_XL, fontScale = 2f)
 @Composable
 private fun PreviewNotificationsStep() {
     AppTheme {
