Improve accessibility support in IPP flows #13414

samiuelson · 2025-01-29T12:50:46Z

Description

The goal of this PR is to fix the UI of the card reader connection and payment flows in case font size is increased in the accessibility settings of the device.

The layouts of the dialogs were made scalable. The fixed heights were replaced by wrap_content, and min height was introduced instead. This way the dialogs keep consistent size in case a standard "text size" is set on the device. The height of the dialogs can now scale, however, in case the font scale is increased.
The illustration image views are now hidden in case the font scale is increased significantly (> 1.5).
The programmatically set margins are now removed since the related vertical constraints are corrected in the layout

Steps to reproduce

Go to device settings > search for "accessibility" > Display size and text > increase the font size
Create an order and collect payment with card reader
Notice that the UI is not looking correct (e.g. elements are overlapping each other)

Testing information

Test the following flows with the increased font size settings:

The easy way to test the accessibility settings is to use "Device UI Shortcuts" > "Font size" from the level of Android Studio:

To change the font scale dynamically.

The tests that have been performed

I've tested the above flows with the maximum available font size.
I verified that UI looks good with normal font size as well (regression test).

Images/gif

Screen_recording_20250206_163200.mp4

I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on big (tablet) and small (phone) in case of UI changes, and no regressions are added.

dangermattic · 2025-01-29T12:51:37Z

	2 Warnings
⚠️	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
⚠️	This PR is assigned to the milestone 21.7. This milestone is due in less than 2 days. Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by 🚫 Danger

wpmobilebot · 2025-01-29T12:55:26Z

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	`b795b90`
	Direct Download	`woocommerce-wear-prototype-build-pr13414-b795b90.apk`

wpmobilebot · 2025-01-29T13:08:20Z

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	`b795b90`
	Direct Download	`woocommerce-prototype-build-pr13414-b795b90.apk`

WooCommerce/src/main/res/layout/card_reader_connect_dialog.xml

    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
+    android:background="@color/color_surface_elevated"


WooCommerce/src/main/res/layout/card_reader_payment_dialog.xml

    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
-    android:layout_height="wrap_content">
+    android:layout_height="wrap_content"
+    android:background="@color/color_surface_elevated"


WooCommerce/src/main/res/layout/card_reader_status_checker_dialog.xml

    android:layout_height="wrap_content"
+    android:layout_width="wrap_content"
+    android:background="@color/color_surface_elevated"


WooCommerce/src/main/res/layout/card_reader_update_dialog.xml

    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
+    android:background="@color/color_surface_elevated"


WooCommerce/src/main/res/layout/card_reader_update_dialog.xml

-            app:layout_constraintEnd_toEndOf="@id/progressImageView"
-            app:layout_constraintStart_toStartOf="@id/progressImageView"
-            app:layout_constraintTop_toTopOf="@id/progressImageView" />
+    <ImageView


WooCommerce/src/main/res/layout/card_reader_welcome_dialog.xml

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
-    tools:context="com.woocommerce.android.ui.payments.cardreader.connect.CardReaderConnectDialogFragment">
+    android:background="@color/color_surface_elevated"


…e mode

samiuelson added 3 commits January 28, 2025 17:35

Ellipsize texts at the end

80e8ecc

Simplify reader connect layout hierarchy

27e4c7c

Allow payment dialogs size scale

9481c6e

samiuelson linked an issue Jan 29, 2025 that may be closed by this pull request

Fix accessibility in IPP flows #13250

Open

github-advanced-security bot found potential problems Jan 29, 2025

View reviewed changes

samiuelson added 3 commits January 29, 2025 14:27

Allow payment status checker size scale

cd38ac3

Make payment dialog height constant in case font size is normal

b7554ee

Unify animations between dialogs in connection <-> payment flows

099be59

github-advanced-security bot found potential problems Jan 29, 2025

View reviewed changes

samiuelson added 6 commits January 29, 2025 16:50

Simplify hierarchy of reader update dialog layout

39ea4d4

Make reader update dialog size scalable

b93aa29

Simplify hierarchy of reader welcome dialog layout

6f03ef3

Make reader welcome dialog size scalable

0d471ee

Simplify card reader tutorial dialog layout

b0f413c

Make reader tutorial dialog scalable

e332173

github-advanced-security bot found potential problems Jan 29, 2025

View reviewed changes

samiuelson added 11 commits January 31, 2025 16:53

Improve layout of payment flow dialog

b2755e1

Remove horizontal scaling

3eb59a2

Improve vertical scaling of reader connect dialog

8489d5c

Improve horizontal margins

447201c

Fix constraints in payment dialog

30e85d1

Update margins in connect dialog

6bd5178

Improve constraints in connection flow dialog layout

174704b

Adjust margins

34e3631

Hide illustrations in case font scale is > 1f

8348f85

Hide illustrations in case font scale is > 1f

e66e685

Improve connection dialog constraints

0cd6f90

samiuelson added 18 commits February 5, 2025 16:08

Improve payment dialog constraints

83cb2ff

Revert payments_dialog_height

8e4a1b5

Extract illustration visibility conditions into util method

1d27aa7

Adjust illustration visibility only if it's visible

3e81fe2

Adjust min height to prevent dialog from resizing in normal font scal…

e887cda

…e mode

Make margins consistent across connection and payment dialogs

4019b0b

Adjust constraints in connect dialog

84abc43

Remove illustrationTopMargin from CardReaderConnectViewState

e052792

Remove paymentStateLabelTopMargin from CardReaderPaymentViewState

74f03e4

Merge branch trunk

9589af6

Adjust min height to the max size achieved with default font scale

6afdd25

Clean up payment dialog layout

15350f5

Fix position of buttons in connection dialog layout

e3b8646

Clean up code

e722d92

Clean up code

4ad5fdd

Clean up code

170d26d

Satisfy detekt's complaints

deecf19

Update RELEASE-NOTES.txt

b795b90

samiuelson added category: accessibility Related to accessibility. feature: mobile payments Related to mobile payments / card present payments / Woo Payments. labels Feb 6, 2025

samiuelson added this to the 21.7 milestone Feb 6, 2025

samiuelson marked this pull request as ready for review February 6, 2025 15:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve accessibility support in IPP flows #13414

Improve accessibility support in IPP flows #13414

samiuelson commented Jan 29, 2025 •

edited

Loading

dangermattic commented Jan 29, 2025 •

edited

Loading

wpmobilebot commented Jan 29, 2025 •

edited

Loading

wpmobilebot commented Jan 29, 2025 •

edited

Loading

Improve accessibility support in IPP flows #13414

Are you sure you want to change the base?

Improve accessibility support in IPP flows #13414

Conversation

samiuelson commented Jan 29, 2025 • edited Loading

Description

Steps to reproduce

Testing information

The tests that have been performed

Images/gif

Reviewer (or Author, in the case of optional code reviews):

dangermattic commented Jan 29, 2025 • edited Loading

wpmobilebot commented Jan 29, 2025 • edited Loading

wpmobilebot commented Jan 29, 2025 • edited Loading

samiuelson commented Jan 29, 2025 •

edited

Loading

dangermattic commented Jan 29, 2025 •

edited

Loading

wpmobilebot commented Jan 29, 2025 •

edited

Loading

wpmobilebot commented Jan 29, 2025 •

edited

Loading