Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve accessibility support in IPP flows #13414

Draft
wants to merge 19 commits into
base: trunk
Choose a base branch
from
Draft

Improve accessibility support in IPP flows #13414

wants to merge 19 commits into from
+538 −483

Conversation

samiuelson
Copy link
Collaborator

@samiuelson samiuelson commented Jan 29, 2025 •
edited
Loading

Closes: #13250

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.

Steps to reproduce

  1. Go to device settings > search for "accessibility" > Display size and text > increase the font size
  2. Create an order and collect payment with card reader
  3. 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:

  • Reader connection flow
  • Reader update flow
  • Payment collection flow
  • Reader welcome dialog
  • Reader onboarding

The tests that have been performed

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

Images/gif

  • 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.

@samiuelson samiuelson linked an issue Jan 29, 2025 that may be closed by this pull request
Fix accessibility in IPP flows #13250
Open
@dangermattic
Copy link
Collaborator

dangermattic commented Jan 29, 2025 •
edited
Loading

1 Warning
⚠️ This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
1 Message
📖 This PR is still a Draft: some checks will be skipped.

Generated by 🚫 Danger

@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Jan 29, 2025 •
edited
Loading

📲 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
FlavorJalapeno
Build TypeDebug
Commit174704b
Direct Downloadwoocommerce-wear-prototype-build-pr13414-174704b.apk

@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Jan 29, 2025 •
edited
Loading

📲 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
FlavorJalapeno
Build TypeDebug
Commit174704b
Direct Downloadwoocommerce-prototype-build-pr13414-174704b.apk

github-advanced-security[bot]
github-advanced-security bot found potential problems Jan 29, 2025
View reviewed changes
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"

Check warning

Code scanning / Android Lint

Overdraw: Painting regions more than once Warning

Possible overdraw: Root element paints background @color/color_surface_elevated with a theme that also paints a background (inferred theme is @style/Theme.Woo.DayNight)
github-advanced-security[bot]
github-advanced-security bot found potential problems Jan 29, 2025
View reviewed changes
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"

Check warning

Code scanning / Android Lint

Overdraw: Painting regions more than once Warning

Possible overdraw: Root element paints background @color/color_surface_elevated with a theme that also paints a background (inferred theme is @style/Theme.Woo.DayNight)
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"

Check warning

Code scanning / Android Lint

Overdraw: Painting regions more than once Warning

Possible overdraw: Root element paints background @color/color_surface_elevated with a theme that also paints a background (inferred theme is @style/Theme.Woo.DayNight)
github-advanced-security[bot]
github-advanced-security bot found potential problems Jan 29, 2025
View reviewed changes
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"

Check warning

Code scanning / Android Lint

Overdraw: Painting regions more than once Warning

Possible overdraw: Root element paints background @color/color_surface_elevated with a theme that also paints a background (inferred theme is @style/Theme.Woo.DayNight)
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

Check warning

Code scanning / Android Lint

Image without contentDescription Warning

Missing contentDescription attribute on image
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"

Check warning

Code scanning / Android Lint

Overdraw: Painting regions more than once Warning

Possible overdraw: Root element paints background @color/color_surface_elevated with a theme that also paints a background (inferred theme is @style/Theme.Woo.DayNight)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Fix accessibility in IPP flows
3 participants
@samiuelson @dangermattic @wpmobilebot