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

Improve accessibility support in IPP flows #13414

Merged
merged 41 commits into from
Feb 10, 2025
Merged

Improve accessibility support in IPP flows #13414

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
80e8ecc
Ellipsize texts at the end
samiuelson Jan 28, 2025
27e4c7c
Simplify reader connect layout hierarchy
samiuelson Jan 29, 2025
9481c6e
Allow payment dialogs size scale
samiuelson Jan 29, 2025
cd38ac3
Allow payment status checker size scale
samiuelson Jan 29, 2025
b7554ee
Make payment dialog height constant in case font size is normal
samiuelson Jan 29, 2025
099be59
Unify animations between dialogs in connection <-> payment flows
samiuelson Jan 29, 2025
39ea4d4
Simplify hierarchy of reader update dialog layout
samiuelson Jan 29, 2025
b93aa29
Make reader update dialog size scalable
samiuelson Jan 29, 2025
6f03ef3
Simplify hierarchy of reader welcome dialog layout
samiuelson Jan 29, 2025
0d471ee
Make reader welcome dialog size scalable
samiuelson Jan 29, 2025
b0f413c
Simplify card reader tutorial dialog layout
samiuelson Jan 29, 2025
e332173
Make reader tutorial dialog scalable
samiuelson Jan 29, 2025
b2755e1
Improve layout of payment flow dialog
samiuelson Jan 31, 2025
3eb59a2
Remove horizontal scaling
samiuelson Jan 31, 2025
8489d5c
Improve vertical scaling of reader connect dialog
samiuelson Jan 31, 2025
447201c
Improve horizontal margins
samiuelson Jan 31, 2025
30e85d1
Fix constraints in payment dialog
samiuelson Jan 31, 2025
6bd5178
Update margins in connect dialog
samiuelson Jan 31, 2025
174704b
Improve constraints in connection flow dialog layout
samiuelson Feb 4, 2025
34e3631
Adjust margins
samiuelson Feb 5, 2025
8348f85
Hide illustrations in case font scale is > 1f
samiuelson Feb 5, 2025
e66e685
Hide illustrations in case font scale is > 1f
samiuelson Feb 5, 2025
0cd6f90
Improve connection dialog constraints
samiuelson Feb 5, 2025
83cb2ff
Improve payment dialog constraints
samiuelson Feb 5, 2025
8e4a1b5
Revert payments_dialog_height
samiuelson Feb 5, 2025
1d27aa7
Extract illustration visibility conditions into util method
samiuelson Feb 5, 2025
3e81fe2
Adjust illustration visibility only if it's visible
samiuelson Feb 5, 2025
e887cda
Adjust min height to prevent dialog from resizing in normal font scal…
samiuelson Feb 5, 2025
4019b0b
Make margins consistent across connection and payment dialogs
samiuelson Feb 5, 2025
84abc43
Adjust constraints in connect dialog
samiuelson Feb 5, 2025
e052792
Remove illustrationTopMargin from CardReaderConnectViewState
samiuelson Feb 5, 2025
74f03e4
Remove paymentStateLabelTopMargin from CardReaderPaymentViewState
samiuelson Feb 5, 2025
9589af6
Merge branch `trunk`
samiuelson Feb 5, 2025
6afdd25
Adjust min height to the max size achieved with default font scale
samiuelson Feb 5, 2025
15350f5
Clean up payment dialog layout
samiuelson Feb 6, 2025
e3b8646
Fix position of buttons in connection dialog layout
samiuelson Feb 6, 2025
e722d92
Clean up code
samiuelson Feb 6, 2025
4ad5fdd
Clean up code
samiuelson Feb 6, 2025
170d26d
Clean up code
samiuelson Feb 6, 2025
deecf19
Satisfy detekt's complaints
samiuelson Feb 6, 2025
b795b90
Update RELEASE-NOTES.txt
samiuelson Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions ...ommerce/src/main/kotlin/com/woocommerce/android/ui/payments/PaymentsBaseDialogFragment.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,16 @@ import android.os.Bundle
import androidx.annotation.LayoutRes
import androidx.fragment.app.DialogFragment
import com.woocommerce.android.R
import com.woocommerce.android.util.setWidthPercent

abstract class PaymentsBaseDialogFragment(@LayoutRes val contentLayoutId: Int) : DialogFragment(contentLayoutId) {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setStyle(STYLE_NO_TITLE, R.style.Theme_Woo_Dialog_RoundedCorners_NoMinWidth)
}

override fun onResume() {
super.onResume()
setWidthPercent(80)
}
}
14 changes: 14 additions & 0 deletions WooCommerce/src/main/kotlin/com/woocommerce/android/util/DialogFragmentUtils.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
package com.woocommerce.android.util

import android.content.res.Resources
import android.graphics.Rect
import android.view.ViewGroup
import androidx.fragment.app.DialogFragment

fun DialogFragment.setWidthPercent(percentage: Int) {
val percent = percentage.toFloat() / 100
val dm = Resources.getSystem().displayMetrics
val rect = dm.run { Rect(0, 0, widthPixels, heightPixels) }
val percentWidth = rect.width() * percent
dialog?.window?.setLayout(percentWidth.toInt(), ViewGroup.LayoutParams.WRAP_CONTENT)
}
188 changes: 95 additions & 93 deletions WooCommerce/src/main/res/layout/card_reader_connect_dialog.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,107 +1,109 @@
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
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"
Dismissed Show dismissed Hide dismissed
android:gravity="center_horizontal"
android:minWidth="@dimen/payments_dialog_width"
android:minHeight="@dimen/payments_dialog_height"
android:orientation="vertical"
android:paddingStart="@dimen/major_200"
android:paddingTop="@dimen/major_200"
android:paddingEnd="@dimen/major_200"
android:paddingBottom="@dimen/payments_dialog_bottom_padding"
tools:context="com.woocommerce.android.ui.payments.cardreader.connect.CardReaderConnectDialogFragment">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="@dimen/payments_dialog_width"
android:layout_height="@dimen/payments_dialog_height"
android:background="@color/color_surface_elevated"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="@dimen/major_200"
android:paddingBottom="@dimen/payments_dialog_bottom_padding">
<com.google.android.material.textview.MaterialTextView
android:id="@+id/header_label"
style="@style/Woo.TextView.Subtitle2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/major_125"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
android:ellipsize="end"
android:gravity="center"
android:textColor="@color/color_on_surface_high"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Collect payment" />

<com.google.android.material.textview.MaterialTextView
android:id="@+id/header_label"
style="@style/Woo.TextView.Subtitle2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/major_125"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
android:gravity="center"
android:textColor="@color/color_on_surface_high"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Collect payment" />
<ImageView
android:id="@+id/illustration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="@dimen/margin_extra_extra_medium_large"
android:contentDescription="@null"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/header_label"
tools:srcCompat="@drawable/img_card_reader_scanning" />

<ImageView
android:id="@+id/illustration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="@dimen/margin_extra_extra_medium_large"
android:contentDescription="@null"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/header_label"
tools:srcCompat="@drawable/img_card_reader_scanning" />
<com.google.android.material.textview.MaterialTextView
android:id="@+id/hint_label"
style="@style/Woo.Card.Body.High"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/major_125"
android:layout_marginEnd="@dimen/major_125"
android:ellipsize="end"
android:gravity="center"
app:layout_constraintBottom_toTopOf="@id/primary_action_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/illustration"
tools:text="Please wait" />

<com.google.android.material.textview.MaterialTextView
android:id="@+id/hint_label"
style="@style/Woo.Card.Body.High"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/major_125"
android:layout_marginEnd="@dimen/major_125"
android:gravity="center"
app:layout_constraintBottom_toTopOf="@id/secondary_action_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/illustration"
tools:text="Please wait" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/multiple_card_readers_found_rv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="@dimen/margin_extra_large"
app:layout_constraintBottom_toTopOf="@id/secondary_action_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/header_label"
tools:listitem="@layout/card_reader_connect_reader_item"
tools:visibility="gone" />

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/multiple_card_readers_found_rv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="@dimen/margin_extra_large"
app:layout_constraintBottom_toTopOf="@id/secondary_action_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/header_label"
tools:listitem="@layout/card_reader_connect_reader_item"
tools:visibility="gone" />
<com.google.android.material.button.MaterialButton
android:id="@+id/primary_action_btn"
style="@style/Woo.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/major_200"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toTopOf="@id/secondary_action_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/hint_label"
tools:text="Connect" />

<com.google.android.material.button.MaterialButton
android:id="@+id/primary_action_btn"
style="@style/Woo.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/major_200"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toTopOf="@id/secondary_action_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="Connect" />
<com.google.android.material.button.MaterialButton
android:id="@+id/secondary_action_btn"
style="@style/Woo.Button.Outlined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/major_200"
app:layout_constraintBottom_toTopOf="@id/tertiary_action_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="Keep Searching" />

<com.google.android.material.button.MaterialButton
android:id="@+id/secondary_action_btn"
style="@style/Woo.Button.Outlined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/major_200"
app:layout_constraintBottom_toTopOf="@id/tertiary_action_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="Keep Searching" />
<com.google.android.material.button.MaterialButton
android:id="@+id/tertiary_action_btn"
style="@style/Woo.Button.TextButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/major_200"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="Cancel" />

<com.google.android.material.button.MaterialButton
android:id="@+id/tertiary_action_btn"
style="@style/Woo.Button.TextButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/major_200"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="Cancel" />

</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
1 change: 1 addition & 0 deletions WooCommerce/src/main/res/layout/card_reader_connect_scanning_item.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_extra_large"
android:ellipsize="end"
android:alpha="@dimen/alpha_emphasis_disabled"
android:textColor="?attr/colorOnSurface"
tools:text="Scanning for readers" />
Expand Down
Loading