feat(POM-522): Card form accessibility descriptions

sdk/src/main/res/values-ar/strings.xml

@@ -103,6 +103,9 @@
     <string name="po_card_tokenization_error_cardholder">اسم حامل البطاقة غير صالح</string>
     <string name="po_card_tokenization_error_eligibility">لا يمكننا قبول هذه البطاقة. يرجى المحاولة باستخدام بطاقة أخرى.</string>
     <string name="po_card_tokenization_error_generic">حدث خطأ ما، يرجى المحاولة مرة أخرى</string>
+    <string name="po_card_tokenization_content_description_card_number">رقم البطاقة</string>
+    <string name="po_card_tokenization_content_description_card_expiration">تاريخ انتهاء الصلاحية</string>
+    <string name="po_card_tokenization_content_description_country">بلد</string>
 
     <!-- Address Specification -->
     <string name="po_address_spec_area">المنطقة</string>

sdk/src/main/res/values-fr/strings.xml

@@ -97,6 +97,9 @@
     <string name="po_card_tokenization_error_cardholder">Le nom du porteur de carte est incorrect.</string>
     <string name="po_card_tokenization_error_eligibility">Nous ne pouvons pas accepter cette carte. Veuillez en essayer une autre.</string>
     <string name="po_card_tokenization_error_generic">Une erreur s\'est produite, veuillez réessayer.</string>
+    <string name="po_card_tokenization_content_description_card_number">Numéro de carte</string>
+    <string name="po_card_tokenization_content_description_card_expiration">Date d’expiration</string>
+    <string name="po_card_tokenization_content_description_country">Pays</string>
 
     <!-- Address Specification -->
     <string name="po_address_spec_area">Zone</string>

sdk/src/main/res/values-pl/strings.xml

@@ -100,6 +100,9 @@
     <string name="po_card_tokenization_error_cardholder">Nieprawidłowe imię i nazwisko na karcie.</string>
     <string name="po_card_tokenization_error_eligibility">Nie możemy zaakceptować tej karty. Spróbuj użyć innej.</string>
     <string name="po_card_tokenization_error_generic">Coś poszło nie tak, spróbuj ponownie.</string>
+    <string name="po_card_tokenization_content_description_card_number">Numer karty</string>
+    <string name="po_card_tokenization_content_description_card_expiration">Data ważności</string>
+    <string name="po_card_tokenization_content_description_country">Kraj</string>
 
     <!-- Address Specification -->
     <string name="po_address_spec_area">Obszar</string>

sdk/src/main/res/values-pt/strings.xml

@@ -97,6 +97,9 @@
     <string name="po_card_tokenization_error_cardholder">O nome no cartão é inválido.</string>
     <string name="po_card_tokenization_error_eligibility">Não podemos aceitar este cartão. Por favor, tente com outro.</string>
     <string name="po_card_tokenization_error_generic">Ocorreu um erro ao processar o seu cartão, por favor tente novamente.</string>
+    <string name="po_card_tokenization_content_description_card_number">Número do cartão</string>
+    <string name="po_card_tokenization_content_description_card_expiration">Data de validade</string>
+    <string name="po_card_tokenization_content_description_country">País</string>
 
     <!-- Address Specification -->
     <string name="po_address_spec_area">Região</string>

sdk/src/main/res/values/strings.xml

@@ -94,6 +94,9 @@
     <string name="po_card_tokenization_error_cardholder">The cardholder name is invalid.</string>
     <string name="po_card_tokenization_error_eligibility">We can’t accept this card. Please try a different one.</string>
     <string name="po_card_tokenization_error_generic">Something went wrong, please try again.</string>
+    <string name="po_card_tokenization_content_description_card_number">Card number</string>
+    <string name="po_card_tokenization_content_description_card_expiration">Expiration date</string>
+    <string name="po_card_tokenization_content_description_country">Country</string>
 
     <!-- Address Specification -->
     <string name="po_address_spec_area">Area</string>

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/dropdown/PODropdownField2.kt

@@ -52,7 +52,8 @@ fun PODropdownField2(
     isError: Boolean = false,
     label: String? = null,
     placeholder: String? = null,
-    description: String? = null
+    description: String? = null,
+    contentDescription: String? = null
 ) {
     MaterialTheme(
         colorScheme = MaterialTheme.colorScheme.copy(surface = Color.Transparent),
@@ -109,6 +110,7 @@ fun PODropdownField2(
                 label = label,
                 placeholder = placeholder,
                 description = description,
+                contentDescription = contentDescription,
                 trailingIcon = {
                     Icon(
                         painter = painterResource(id = R.drawable.po_chevron_down),

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField.kt

@@ -18,6 +18,9 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextOverflow
@@ -32,6 +35,7 @@ import com.processout.sdk.ui.core.component.field.POField.ContainerBox
 import com.processout.sdk.ui.core.component.field.POField.stateStyle
 import com.processout.sdk.ui.core.component.field.POField.textSelectionColors
 import com.processout.sdk.ui.core.component.field.POField.textStyle
+import com.processout.sdk.ui.core.extension.conditional
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.dimensions
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.spacing
 
@@ -52,6 +56,7 @@ fun POTextField(
     forceTextDirectionLtr: Boolean = false,
     label: String? = null,
     placeholder: String? = null,
+    contentDescription: String? = null,
     leadingIcon: @Composable (() -> Unit)? = null,
     trailingIcon: @Composable (() -> Unit)? = null,
     visualTransformation: VisualTransformation = VisualTransformation.None,
@@ -74,6 +79,17 @@ fun POTextField(
                 .requiredHeightIn(min = minHeight)
                 .onFocusChanged {
                     isFocused = it.isFocused
+                }
+                .conditional(!contentDescription.isNullOrBlank()) {
+                    if (isDropdown) {
+                        clearAndSetSemantics {
+                            this.contentDescription = "${value.text} $contentDescription"
+                        }
+                    } else {
+                        semantics {
+                            this.contentDescription = contentDescription ?: String()
+                        }
+                    }
                 },
             enabled = enabled,
             readOnly = readOnly,
@@ -108,6 +124,9 @@ fun POTextField(
                                 )
                                 POText(
                                     text = label,
+                                    modifier = Modifier.conditional(!contentDescription.isNullOrBlank()) {
+                                        clearAndSetSemantics { }
+                                    },
                                     color = stateStyle.label.color,
                                     style = stateStyle.label.textStyle.copy(fontSize = animatedFontSizeValue.sp),
                                     overflow = TextOverflow.Ellipsis,
@@ -122,6 +141,7 @@ fun POTextField(
                                     if (value.text.isEmpty() && !placeholder.isNullOrBlank()) {
                                         POText(
                                             text = placeholder,
+                                            modifier = Modifier.clearAndSetSemantics {},
                                             color = stateStyle.placeholderTextColor,
                                             style = stateStyle.text.textStyle,
                                             overflow = TextOverflow.Ellipsis,

ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/field/text/POTextField2.kt

@@ -39,6 +39,7 @@ fun POTextField2(
     label: String? = null,
     placeholder: String? = null,
     description: String? = null,
+    contentDescription: String? = null,
     leadingIcon: @Composable (() -> Unit)? = null,
     trailingIcon: @Composable (() -> Unit)? = null,
     visualTransformation: VisualTransformation = VisualTransformation.None,
@@ -64,6 +65,7 @@ fun POTextField2(
             forceTextDirectionLtr = forceTextDirectionLtr,
             label = label,
             placeholder = placeholder,
+            contentDescription = contentDescription,
             leadingIcon = leadingIcon,
             trailingIcon = trailingIcon,
             visualTransformation = visualTransformation,

ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationViewModel.kt

@@ -174,6 +174,7 @@ internal class CardTokenizationViewModel private constructor(
                 CardFieldId.NUMBER -> cardNumberField = field(
                     field = field,
                     placeholder = app.getString(R.string.po_card_tokenization_card_details_number_placeholder),
+                    contentDescription = app.getString(R.string.po_card_tokenization_content_description_card_number),
                     iconResId = cardSchemeDrawableResId(scheme = state.preferredSchemeField.value.text),
                     forceTextDirectionLtr = true,
                     inputFilter = CardNumberInputFilter(),
@@ -188,6 +189,7 @@ internal class CardTokenizationViewModel private constructor(
                     field(
                         field = field,
                         placeholder = app.getString(R.string.po_card_tokenization_card_details_expiration_placeholder),
+                        contentDescription = app.getString(R.string.po_card_tokenization_content_description_card_expiration),
                         forceTextDirectionLtr = true,
                         inputFilter = CardExpirationInputFilter(),
                         visualTransformation = CardExpirationVisualTransformation(),
@@ -253,7 +255,8 @@ internal class CardTokenizationViewModel private constructor(
             val keyboardAction = keyboardAction(field.id, lastFocusableFieldId)
             when (field.id) {
                 AddressFieldId.COUNTRY -> field(
-                    field = field
+                    field = field,
+                    contentDescription = app.getString(R.string.po_card_tokenization_content_description_country)
                 )?.also { items.add(it) }
                 AddressFieldId.ADDRESS_1 -> field(
                     field = field,
@@ -345,7 +348,10 @@ internal class CardTokenizationViewModel private constructor(
         val displayInline = configuration.preferredScheme?.displayInline ?: true
         return if (displayInline)
             radioField(field)
-        else dropdownField(field)
+        else dropdownField(
+            field = field,
+            contentDescription = app.getString(R.string.po_card_tokenization_preferred_scheme)
+        )
     }
 
     private fun futurePaymentsSection(
@@ -383,6 +389,7 @@ internal class CardTokenizationViewModel private constructor(
     private fun field(
         field: Field,
         placeholder: String? = null,
+        contentDescription: String? = null,
         @DrawableRes iconResId: Int? = null,
         forceTextDirectionLtr: Boolean = false,
         inputFilter: POInputFilter? = null,
@@ -394,11 +401,15 @@ internal class CardTokenizationViewModel private constructor(
             return null
         }
         if (!field.availableValues.isNullOrEmpty()) {
-            return dropdownField(field)
+            return dropdownField(
+                field = field,
+                contentDescription = contentDescription
+            )
         }
         return textField(
             field = field,
             placeholder = placeholder,
+            contentDescription = contentDescription,
             iconResId = iconResId,
             forceTextDirectionLtr = forceTextDirectionLtr,
             inputFilter = inputFilter,
@@ -411,6 +422,7 @@ internal class CardTokenizationViewModel private constructor(
     private fun textField(
         field: Field,
         placeholder: String? = null,
+        contentDescription: String? = null,
         @DrawableRes iconResId: Int? = null,
         forceTextDirectionLtr: Boolean = false,
         inputFilter: POInputFilter? = null,
@@ -422,6 +434,7 @@ internal class CardTokenizationViewModel private constructor(
             id = field.id,
             value = field.value,
             label = placeholder,
+            contentDescription = contentDescription,
             iconResId = iconResId,
             enabled = field.enabled,
             isError = !field.isValid,
@@ -443,15 +456,18 @@ internal class CardTokenizationViewModel private constructor(
             )
         )
 
-    private fun dropdownField(field: Field): Item =
-        Item.DropdownField(
-            FieldState(
-                id = field.id,
-                value = field.value,
-                availableValues = POImmutableList(field.availableValues ?: emptyList()),
-                enabled = field.enabled
-            )
+    private fun dropdownField(
+        field: Field,
+        contentDescription: String? = null
+    ): Item = Item.DropdownField(
+        FieldState(
+            id = field.id,
+            value = field.value,
+            availableValues = POImmutableList(field.availableValues ?: emptyList()),
+            contentDescription = contentDescription,
+            enabled = field.enabled
         )
+    )
 
     private fun checkboxField(
         field: Field,

ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/screen/CardTokenizationContent.kt

@@ -250,6 +250,7 @@ private fun TextField(
         isError = state.isError,
         forceTextDirectionLtr = state.forceTextDirectionLtr,
         label = state.label,
+        contentDescription = state.contentDescription,
         trailingIcon = { state.iconResId?.let { AnimatedFieldIcon(id = it) } },
         visualTransformation = state.visualTransformation,
         keyboardOptions = state.keyboardOptions,
@@ -322,7 +323,8 @@ private fun DropdownField(
         fieldStyle = fieldStyle,
         menuStyle = menuStyle,
         enabled = state.enabled,
-        isError = state.isError
+        isError = state.isError,
+        contentDescription = state.contentDescription
     )
 }
 

ui/src/main/kotlin/com/processout/sdk/ui/shared/state/FieldState.kt

@@ -18,6 +18,7 @@ internal data class FieldState(
     val label: String? = null,
     val placeholder: String? = null,
     val description: String? = null,
+    val contentDescription: String? = null,
     @DrawableRes val iconResId: Int? = null,
     val enabled: Boolean = true,
     val isError: Boolean = false,