Merge pull request #13414 from woocommerce/13250-fix-accessibility-in…

…-ipp-flows Improve accessibility support in IPP flows
woocommerce · Feb 10, 2025 · c03d5d3 · c03d5d3
2 parents cb07541 + b795b90
commit c03d5d3
Show file tree

Hide file tree

Showing 17 changed files with 565 additions and 574 deletions.
diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
@@ -3,6 +3,7 @@
 *** For entries which are touching the Android Wear app's, start entry with `[WEAR]` too.
 21.8
 -----
+- [**] Improved accessibility support (handling of increased text size) in in-person payment flows [https://github.com/woocommerce/woocommerce-android/pull/13414]
 
 
 21.7

diff --git a/...com/woocommerce/android/ui/payments/cardreader/connect/CardReaderConnectDialogFragment.kt b/...com/woocommerce/android/ui/payments/cardreader/connect/CardReaderConnectDialogFragment.kt
@@ -18,6 +18,7 @@ import androidx.activity.addCallback
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.activity.result.contract.ActivityResultContracts.RequestPermission
 import androidx.activity.result.contract.ActivityResultContracts.StartActivityForResult
+import androidx.core.view.isVisible
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.Lifecycle
 import androidx.navigation.fragment.findNavController
@@ -48,6 +49,7 @@ import com.woocommerce.android.ui.woopos.cardreader.WooPosCardReaderActivity
 import com.woocommerce.android.util.ChromeCustomTabUtils
 import com.woocommerce.android.util.LocationUtils
 import com.woocommerce.android.util.UiHelpers
+import com.woocommerce.android.util.UiHelpers.getIllustrationVisibilityForFontScale
 import com.woocommerce.android.util.WooAnimUtils
 import com.woocommerce.android.util.WooLog
 import com.woocommerce.android.util.WooPermissionUtils
@@ -164,6 +166,12 @@ class CardReaderConnectDialogFragment : PaymentsBaseDialogFragment(R.layout.card
     private fun moveToState(binding: CardReaderConnectDialogBinding, viewState: CardReaderConnectViewState) {
         UiHelpers.setTextOrHide(binding.headerLabel, viewState.headerLabel)
         UiHelpers.setImageOrHideInLandscapeOnCompactScreenHeightSizeClass(binding.illustration, viewState.illustration)
+            .also {
+                if (binding.illustration.isVisible) {
+                    binding.illustration.visibility =
+                        getIllustrationVisibilityForFontScale(resources.configuration.fontScale)
+                }
+            }
         UiHelpers.setTextOrHide(binding.hintLabel, viewState.hintLabel)
         UiHelpers.setTextOrHide(binding.primaryActionBtn, viewState.primaryActionLabel)
         UiHelpers.setTextOrHide(binding.secondaryActionBtn, viewState.secondaryActionLabel)
@@ -179,10 +187,6 @@ class CardReaderConnectDialogFragment : PaymentsBaseDialogFragment(R.layout.card
             viewState.onTertiaryActionClicked?.invoke()
         }
 
-        with(binding.illustration.layoutParams as ViewGroup.MarginLayoutParams) {
-            topMargin = resources.getDimensionPixelSize(viewState.illustrationTopMargin)
-        }
-
         updateMultipleReadersFoundRecyclerView(binding, viewState)
 
         with(binding.illustration) {

diff --git a/...tlin/com/woocommerce/android/ui/payments/cardreader/connect/CardReaderConnectViewState.kt b/...tlin/com/woocommerce/android/ui/payments/cardreader/connect/CardReaderConnectViewState.kt
@@ -1,6 +1,5 @@
 package com.woocommerce.android.ui.payments.cardreader.connect
 
-import androidx.annotation.DimenRes
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import com.woocommerce.android.R
@@ -17,7 +16,6 @@ sealed class CardReaderConnectViewState(
     val primaryActionLabel: Int? = null,
     val secondaryActionLabel: Int? = null,
     val tertiaryActionLabel: Int? = null,
-    @DimenRes val illustrationTopMargin: Int = R.dimen.major_200,
     open val listItems: List<CardReaderConnectViewModel.ListItemViewState>? = null,
     val learnMoreLabel: UiString? = null,
 ) {
@@ -67,7 +65,6 @@ sealed class CardReaderConnectViewState(
         primaryActionLabel = R.string.card_reader_connect_to_reader,
         secondaryActionLabel = R.string.card_reader_connect_keep_searching_button,
         tertiaryActionLabel = R.string.cancel,
-        illustrationTopMargin = R.dimen.major_150
     )
 
     data class MultipleExternalReadersFoundState(
@@ -85,7 +82,6 @@ sealed class CardReaderConnectViewState(
             illustration = R.drawable.img_card_reader_connecting,
             hintLabel = R.string.card_reader_connect_connecting_hint,
             secondaryActionLabel = R.string.cancel,
-            illustrationTopMargin = R.dimen.major_275
         )
 
     data class BuiltInReaderConnectingState(override val onSecondaryActionClicked: (() -> Unit)) :
@@ -95,7 +91,6 @@ sealed class CardReaderConnectViewState(
             illustration = R.drawable.img_card_reader_tpp_connecting,
             hintLabel = R.string.card_reader_connect_connecting_hint,
             secondaryActionLabel = R.string.cancel,
-            illustrationTopMargin = R.dimen.major_275
         )
 
     data class ScanningFailedState(
@@ -106,7 +101,6 @@ sealed class CardReaderConnectViewState(
         illustration = R.drawable.img_products_error,
         primaryActionLabel = R.string.try_again,
         secondaryActionLabel = R.string.cancel,
-        illustrationTopMargin = R.dimen.major_150
     )
 
     data class ConnectingFailedState(
@@ -117,7 +111,6 @@ sealed class CardReaderConnectViewState(
         illustration = R.drawable.img_products_error,
         primaryActionLabel = R.string.try_again,
         secondaryActionLabel = R.string.cancel,
-        illustrationTopMargin = R.dimen.major_150
     )
 
     data class LocationPermissionRationale(
@@ -127,7 +120,6 @@ sealed class CardReaderConnectViewState(
         hintLabel = R.string.card_reader_connect_permission_rationale_hint,
         illustration = R.drawable.img_location,
         primaryActionLabel = R.string.card_reader_connect_permission_rationale_action,
-        illustrationTopMargin = R.dimen.major_150
     )
 
     data class MissingLocationPermissionsError(
@@ -138,7 +130,6 @@ sealed class CardReaderConnectViewState(
         illustration = R.drawable.img_products_error,
         primaryActionLabel = R.string.card_reader_connect_open_permission_settings,
         secondaryActionLabel = R.string.cancel,
-        illustrationTopMargin = R.dimen.major_150
     )
 
     data class LocationDisabledError(
@@ -149,7 +140,6 @@ sealed class CardReaderConnectViewState(
         illustration = R.drawable.img_products_error,
         primaryActionLabel = R.string.card_reader_connect_open_location_settings,
         secondaryActionLabel = R.string.cancel,
-        illustrationTopMargin = R.dimen.major_150
     )
 
     data class BluetoothDisabledError(
@@ -160,7 +150,6 @@ sealed class CardReaderConnectViewState(
         illustration = R.drawable.img_products_error,
         primaryActionLabel = R.string.card_reader_connect_open_bluetooth_settings,
         secondaryActionLabel = R.string.cancel,
-        illustrationTopMargin = R.dimen.major_150
     )
 
     data class MissingBluetoothPermissionsError(
@@ -171,7 +160,6 @@ sealed class CardReaderConnectViewState(
         illustration = R.drawable.img_products_error,
         primaryActionLabel = R.string.card_reader_connect_missing_bluetooth_permission_button,
         secondaryActionLabel = R.string.cancel,
-        illustrationTopMargin = R.dimen.major_150
     )
 
     data class MissingMerchantAddressError(
@@ -182,7 +170,6 @@ sealed class CardReaderConnectViewState(
         illustration = R.drawable.img_products_error,
         primaryActionLabel = R.string.card_reader_connect_missing_address_button,
         secondaryActionLabel = R.string.cancel,
-        illustrationTopMargin = R.dimen.major_150
     )
 
     data class InvalidMerchantAddressPostCodeError(
@@ -192,6 +179,5 @@ sealed class CardReaderConnectViewState(
         hintLabel = R.string.card_reader_connect_invalid_postal_code_hint,
         illustration = R.drawable.img_products_error,
         primaryActionLabel = R.string.try_again,
-        illustrationTopMargin = R.dimen.major_150,
     )
 }
diff --git a/...com/woocommerce/android/ui/payments/cardreader/payment/CardReaderPaymentDialogFragment.kt b/...com/woocommerce/android/ui/payments/cardreader/payment/CardReaderPaymentDialogFragment.kt
@@ -13,6 +13,7 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.activity.ComponentDialog
 import androidx.activity.addCallback
+import androidx.core.view.isVisible
 import androidx.fragment.app.viewModels
 import androidx.navigation.fragment.findNavController
 import com.google.android.material.snackbar.BaseTransientBottomBar
@@ -33,6 +34,7 @@ import com.woocommerce.android.ui.payments.cardreader.payment.ViewState.External
 import com.woocommerce.android.ui.payments.refunds.RefundSummaryFragment.Companion.KEY_INTERAC_SUCCESS
 import com.woocommerce.android.util.PrintHtmlHelper
 import com.woocommerce.android.util.UiHelpers
+import com.woocommerce.android.util.UiHelpers.getIllustrationVisibilityForFontScale
 import com.woocommerce.android.util.UiHelpers.getTextOfUiString
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.Exit
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ShowSnackbar
@@ -107,10 +109,13 @@ class CardReaderPaymentDialogFragment : PaymentsBaseDialogFragment(R.layout.card
             UiHelpers.setImageOrHideInLandscapeOnCompactScreenHeightSizeClass(
                 binding.illustration,
                 viewState.illustration
-            )
+            ).also {
+                if (binding.illustration.isVisible) {
+                    binding.illustration.visibility =
+                        getIllustrationVisibilityForFontScale(resources.configuration.fontScale)
+                }
+            }
             UiHelpers.setTextOrHide(binding.paymentStateLabel, viewState.paymentStateLabel)
-            (binding.paymentStateLabel.layoutParams as ViewGroup.MarginLayoutParams)
-                .topMargin = resources.getDimensionPixelSize(viewState.paymentStateLabelTopMargin)
             UiHelpers.setTextOrHide(binding.hintLabel, viewState.hintLabel)
             UiHelpers.setTextOrHide(binding.primaryActionBtn, viewState.primaryActionLabel)
             UiHelpers.setTextOrHide(binding.secondaryActionBtn, viewState.secondaryActionLabel)

diff --git a/...tlin/com/woocommerce/android/ui/payments/cardreader/payment/CardReaderPaymentViewState.kt b/...tlin/com/woocommerce/android/ui/payments/cardreader/payment/CardReaderPaymentViewState.kt
@@ -1,6 +1,5 @@
 package com.woocommerce.android.ui.payments.cardreader.payment
 
-import androidx.annotation.DimenRes
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import com.woocommerce.android.R
@@ -20,7 +19,6 @@ sealed class ViewState(
     @StringRes open val headerLabel: Int? = null,
     val paymentStateLabel: UiString? = null,
     open val receiptSentAutomaticallyHint: UiString? = null,
-    @DimenRes val paymentStateLabelTopMargin: Int = R.dimen.major_275,
     @DrawableRes val illustration: Int? = null,
     open val isProgressVisible: Boolean = false,
     val primaryActionLabel: Int? = null,
@@ -56,7 +54,6 @@ sealed class ViewState(
     ) : ViewState(
         headerLabel = R.string.card_reader_payment_payment_failed_header,
         paymentStateLabel = errorType.message,
-        paymentStateLabelTopMargin = R.dimen.major_100,
         primaryActionLabel = primaryLabel,
         illustration = R.drawable.img_products_error,
         secondaryActionLabel = secondaryLabel
@@ -72,7 +69,6 @@ sealed class ViewState(
     ) : ViewState(
         headerLabel = R.string.card_reader_payment_payment_failed_header,
         paymentStateLabel = errorType.message,
-        paymentStateLabelTopMargin = R.dimen.major_100,
         primaryActionLabel = primaryLabel,
         illustration = R.drawable.img_card_reader_tpp_payment_failed,
         secondaryActionLabel = secondaryLabel
@@ -262,7 +258,6 @@ sealed class ViewState(
     ) : ViewState(
         headerLabel = R.string.card_reader_interac_refund_refund_failed_header,
         paymentStateLabel = errorType.message,
-        paymentStateLabelTopMargin = R.dimen.major_100,
         primaryActionLabel = primaryLabel,
         illustration = R.drawable.img_products_error,
         secondaryActionLabel = secondaryLabel,

diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/util/UiHelpers.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/util/UiHelpers.kt
@@ -105,6 +105,13 @@ object UiHelpers {
         updateVisibility(imageView, image != null)
         image?.let { imageView.setImageDrawable(image) }
     }
+
+    @Suppress("MagicNumber")
+    fun getIllustrationVisibilityForFontScale(fontScale: Float): Int = if (fontScale > 1.5f) {
+        View.GONE
+    } else {
+        View.VISIBLE
+    }
 }
 
 class IsWindowClassLargeThanCompact @Inject constructor(val context: Context) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ @@
     *** For entries which are touching the Android Wear app's, start entry with `[WEAR]` too.
 .8
     -----
+    - [**] Improved accessibility support (handling of increased text size) in in-person payment flows [https://github.com/woocommerce/woocommerce-android/pull/13414]
 .7
@@ Expand Down @@