ANDROID-15075 ListRowItem Switch & CheckBox a11y compose

catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Lists.kt

@@ -19,6 +19,10 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Switch
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -34,6 +38,8 @@ import com.telefonica.mistica.catalog.R
 import com.telefonica.mistica.compose.list.BackgroundType
 import com.telefonica.mistica.compose.list.ListRowIcon
 import com.telefonica.mistica.compose.list.ListRowItem
+import com.telefonica.mistica.compose.list.ListRowItemWithCheckBox
+import com.telefonica.mistica.compose.list.ListRowItemWithSwitch
 import com.telefonica.mistica.compose.shape.Chevron
 import com.telefonica.mistica.compose.tag.Tag
 import com.telefonica.mistica.compose.theme.MisticaTheme
@@ -378,13 +384,36 @@ fun Lists() {
             SectionTitle("Clickable Asset")
             ClickableAssetSample(
                 context = context,
-                onRowClick = {},
+                onRowClick = null,
             )
             ClickableAssetSample(
                 context = context,
                 onRowClick = { Toast.makeText(context, "Row Clicked", Toast.LENGTH_SHORT).show() },
             )
         }
+        item {
+            SectionTitle("Toggleables")
+            var switchState by remember {
+                mutableStateOf(false)
+            }
+            ListRowItemWithSwitch(
+                title = "Title",
+                subtitle = "Subtitle",
+                checked = switchState,
+                onCheckedChange = { switchState = it },
+                listRowIcon = ListRowIcon.NormalIcon(painter = painterResource(id = R.drawable.ic_lists)),
+            )
+            var checkBoxState by remember {
+                mutableStateOf(false)
+            }
+            ListRowItemWithCheckBox(
+                title = "Title",
+                subtitle = "Subtitle",
+                checked = checkBoxState,
+                onCheckedChange = { checkBoxState = it },
+                listRowIcon = ListRowIcon.NormalIcon(painter = painterResource(id = R.drawable.ic_lists)),
+            )
+        }
     }
 }
 
@@ -451,16 +480,17 @@ private fun CustomSlot() {
 }
 
 @Composable
-private fun ClickableAssetSample(context: Context, onRowClick: () -> Unit) {
+private fun ClickableAssetSample(context: Context, onRowClick: (() -> Unit)? = null) {
     ListRowItem(
-        title = "Clickable Asset in Clickable Row",
+        title = if (onRowClick != null) "Clickable Asset in Clickable Row" else "Clickable Asset",
         subtitle = "Subtitle",
         description = "Description",
         isBadgeVisible = true,
         badge = "1",
         onClick = onRowClick,
         listRowIcon = ListRowIcon.CircleIcon(
             painterResource(id = R.drawable.ic_lists),
+            description = "Clickable asset",
             backgroundColor = MisticaTheme.colors.backgroundAlternative,
             modifier = Modifier.clickable {
                 Toast.makeText(context, "Asset Clicked", Toast.LENGTH_SHORT).show()

library/src/main/java/com/telefonica/mistica/compose/badge/Badge.kt

@@ -6,13 +6,16 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Badge as MaterialBadge
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.telefonica.mistica.compose.theme.MisticaTheme
@@ -23,6 +26,7 @@ import com.telefonica.mistica.compose.theme.brand.MovistarBrand
 fun Badge(
     modifier: Modifier = Modifier,
     content: String? = null,
+    contentDescription: String? = null,
 ) {
     if (content.isNullOrEmpty()) {
         Surface(
@@ -33,12 +37,19 @@ fun Badge(
                 .size(8.dp),
         ) { }
     } else {
-        androidx.compose.material.Badge(
+        MaterialBadge(
             backgroundColor = MisticaTheme.colors.badge,
             modifier = modifier.testTag(BadgeTestTags.BADGE_NUMBER),
         ) {
             Text(
-                modifier = Modifier.testTag(BadgeTestTags.BADGE_NUMBER_VALUE),
+                modifier = Modifier
+                    .testTag(BadgeTestTags.BADGE_NUMBER_VALUE)
+                    .then(
+                        if (contentDescription != null)
+                            Modifier.semantics { this.contentDescription = contentDescription }
+                        else
+                            Modifier
+                    ),
                 text = content,
                 color = MisticaTheme.colors.textPrimaryInverse,
             )

library/src/main/java/com/telefonica/mistica/compose/input/PasswordInput.kt

@@ -15,6 +15,8 @@ import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
 import com.telefonica.mistica.R
+import com.telefonica.mistica.compose.theme.MisticaTheme
+import com.telefonica.mistica.compose.theme.brand.MovistarBrand
 
 @Composable
 fun PasswordInput(
@@ -86,38 +88,46 @@ private fun PasswordVisibleIcon(
 @Preview(showBackground = true)
 @Composable
 fun PreviewEmptyPasswordInput() {
-    PasswordInput(
-        value = "",
-        onValueChange = {},
-        label = "empty",
-    )
+    MisticaTheme(brand = MovistarBrand) {
+        PasswordInput(
+            value = "",
+            onValueChange = {},
+            label = "empty",
+        )
+    }
 }
 
 @Preview(showBackground = true)
 @Composable
 fun PreviewPasswordInput() {
-    PasswordInput(
-        value = "value",
-        onValueChange = {},
-        label = "label",
-    )
+    MisticaTheme(brand = MovistarBrand) {
+        PasswordInput(
+            value = "value",
+            onValueChange = {},
+            label = "label",
+        )
+    }
 }
 
 @Preview(showBackground = true)
 @Composable
 fun PreviewPasswordVisibleIconVisible() {
-    PasswordVisibleIcon(
-        passwordVisible = true,
-        onIconClicked = {},
-    )
+    MisticaTheme(brand = MovistarBrand) {
+        PasswordVisibleIcon(
+            passwordVisible = true,
+            onIconClicked = {},
+        )
+    }
 }
 
 @Preview(showBackground = true)
 @Composable
 fun PreviewPasswordVisibleIconInVisible() {
-    PasswordVisibleIcon(
-        passwordVisible = false,
-        onIconClicked = {},
-    )
+    MisticaTheme(brand = MovistarBrand) {
+        PasswordVisibleIcon(
+            passwordVisible = false,
+            onIconClicked = {},
+        )
+    }
 }
 

library/src/main/java/com/telefonica/mistica/compose/list/ListRowItem.kt

@@ -30,7 +30,9 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.semantics.heading
+import androidx.compose.ui.semantics.isTraversalGroup
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.traversalIndex
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.telefonica.mistica.R
@@ -40,7 +42,6 @@ import com.telefonica.mistica.compose.tag.Tag
 import com.telefonica.mistica.compose.theme.MisticaTheme
 import com.telefonica.mistica.compose.theme.brand.MovistarBrand
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun ListRowItem(
     modifier: Modifier = Modifier,
@@ -52,6 +53,7 @@ fun ListRowItem(
     backgroundType: BackgroundType = BackgroundType.TYPE_NORMAL,
     badge: String? = null,
     isBadgeVisible: Boolean = false,
+    isToggleable: Boolean = false,
     headline: Tag? = null,
     trailing: @Composable (() -> Unit)? = null,
     onClick: (() -> Unit)? = null,
@@ -68,6 +70,7 @@ fun ListRowItem(
         backgroundType = backgroundType,
         badge = badge,
         isBadgeVisible = isBadgeVisible,
+        isToggleable = isToggleable,
         headline = headline,
         trailing = trailing,
         onClick = onClick,
@@ -76,7 +79,6 @@ fun ListRowItem(
     )
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 @Deprecated(replaceWith = ReplaceWith("ListRowItem"), message = "Use new ListRowItem with ListRowIcon param instead")
 fun ListRowItem(
@@ -113,9 +115,9 @@ fun ListRowItem(
     )
 }
 
-@ExperimentalMaterialApi
+@OptIn(ExperimentalMaterialApi::class)
 @Composable
-private fun ListRowItemImp(
+internal fun ListRowItemImp(
     modifier: Modifier = Modifier,
     icon: @Composable (() -> Unit)? = null,
     title: String? = null,
@@ -125,6 +127,7 @@ private fun ListRowItemImp(
     backgroundType: BackgroundType = BackgroundType.TYPE_NORMAL,
     badge: String? = null,
     isBadgeVisible: Boolean = false,
+    isToggleable: Boolean = false,
     headline: Tag? = null,
     trailing: @Composable (() -> Unit)? = null,
     onClick: (() -> Unit)? = null,
@@ -186,10 +189,14 @@ private fun ListRowItemImp(
     }
 
     Box(
-        modifier = boxModifier.testTag(ListRowItemTestTags.LIST_ROW_ITEM)
+        modifier = boxModifier
+            .testTag(ListRowItemTestTags.LIST_ROW_ITEM)
+            .semantics(mergeDescendants = isToggleable) {  }
     ) {
         Row(
-            modifier = rowModifier.height(IntrinsicSize.Min)
+            modifier = rowModifier
+                .height(IntrinsicSize.Min)
+                .semantics { isTraversalGroup = true },
         ) {
             if (icon != null) {
                 Box(modifier = Modifier.testTag(ListRowItemTestTags.LIST_ROW_ITEM_ICON)) {
@@ -202,10 +209,15 @@ private fun ListRowItemImp(
                 modifier = Modifier
                     .weight(1f)
                     .absolutePadding(right = 16.dp)
-                    .align(CenterVertically)
+                    .align(CenterVertically),
             ) {
                 headline?.let {
-                    it.build()
+                    it
+                        .withModifier(
+                            modifier = Modifier
+                                .semantics { traversalIndex = 2f }
+                        )
+                        .build()
                     Spacer(modifier = Modifier.height(8.dp))
                 }
                 title?.let {
@@ -215,6 +227,7 @@ private fun ListRowItemImp(
                         color = textColorPrimary,
                         modifier = Modifier
                             .testTag(ListRowItemTestTags.LIST_ROW_ITEM_TITLE)
+                            .semantics { traversalIndex = 1f }
                             .then(
                                 if (isTitleHeading) {
                                     Modifier.semantics { heading() }
@@ -231,6 +244,7 @@ private fun ListRowItemImp(
                         color = textColorPrimary,
                         modifier = Modifier
                             .testTag(ListRowItemTestTags.LIST_ROW_ITEM_SUBTITLE)
+                            .semantics { traversalIndex = 3f }
                             .padding(vertical = 2.dp)
                             .defaultMinSize(minHeight = 20.dp),
                     )
@@ -242,28 +256,39 @@ private fun ListRowItemImp(
                         color = textColorSecondary,
                         modifier = Modifier
                             .testTag(ListRowItemTestTags.LIST_ROW_ITEM_DESCRIPTION)
+                            .semantics { traversalIndex = 4f }
                             .padding(vertical = 2.dp)
                             .defaultMinSize(minHeight = 20.dp),
                     )
                 }
                 bottom?.let {
                     Spacer(modifier = Modifier.height(2.dp))
-                    bottom()
+                    Box(
+                        modifier = Modifier
+                            .semantics(mergeDescendants = !isToggleable) { traversalIndex = 5f }
+                    ) {
+                        bottom()
+                    }
                 }
             }
 
             if (badgeVisible) {
                 val badgeModifier = Modifier
                     .align(CenterVertically)
                     .absolutePadding(0.dp, 0.dp, 16.dp, 0.dp)
+                    .semantics(mergeDescendants = !isToggleable) { traversalIndex = 6f }
                 Badge(
                     modifier = badgeModifier,
                     content = badge,
                 )
             }
 
             trailing?.let {
-                Column(modifier = Modifier.align(CenterVertically)) {
+                Column(
+                    modifier = Modifier
+                        .align(CenterVertically)
+                        .semantics { traversalIndex = 7f }
+                ) {
                     it()
                 }
             }