dhonti/ANDROID-15405-postercard: 2nd approach a11 postercard

Telefonica · Nov 29, 2024 · 1d90eb7 · 1d90eb7
1 parent a3f85e6
commit 1d90eb7
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 16 deletions.
diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/PosterCards.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/PosterCards.kt
@@ -50,7 +50,7 @@ fun PosterCards() {
     var inverseDisplay: Boolean by remember { mutableStateOf(true) }
     var backgroundType: BackgroundType by remember { mutableStateOf(BackgroundType.IMAGE) }
 
-    var topActionsType: TopActionsType by remember { mutableStateOf(TopActionsType.NONE) }
+    var topActionsType: TopActionsType by remember { mutableStateOf(TopActionsType.TWO_ACTIONS) }
 
     var preTitle: String by remember { mutableStateOf("Pretitle") }
     var title: String by remember { mutableStateOf("Title") }
@@ -185,7 +185,7 @@ private val topActionsTypeLabelsMap = mapOf(
 )
 
 private enum class BackgroundType(val backgroundValue: PosterCardBackgroundType) {
-    IMAGE(PosterCardBackgroundType.Image(imageResource = R.drawable.sample_background)),
+    IMAGE(PosterCardBackgroundType.Image(imageResource = R.drawable.sample_background, contentDescription = "Mística PosterCard")),
     SOLID_COLOR(PosterCardBackgroundType.Color(brush = SolidColor(Color.Red))),
     GRADIENT_COLOR(PosterCardBackgroundType.Color(brush = Brush.verticalGradient(colors = listOf(Color.Blue, Color.Cyan)))),
 }
@@ -199,8 +199,14 @@ private enum class TopActionsType(val info: PosterCardTopActionInfo? = null) {
     ),
     TWO_ACTIONS(
         info = PosterCardTopActionInfo(
-            firstTopAction = TopActionData(iconRes = R.drawable.icn_visibility),
-            secondTopAction = TopActionData(iconRes = R.drawable.ic_close_regular)
+            firstTopAction = TopActionData(
+                iconRes = R.drawable.icn_visibility,
+                contentDescription = "PosterCard Visible top action"
+            ),
+            secondTopAction = TopActionData(
+                iconRes = R.drawable.ic_close_regular,
+                contentDescription = "PosterCard Close top action"
+            )
         )
     )
 }

diff --git a/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCard.kt b/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCard.kt
@@ -14,6 +14,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.semantics.isTraversalGroup
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -37,7 +38,7 @@ fun PosterCard(
 ) {
     val anyTopActionsLoaded = firstTopAction != null || secondTopAction != null
 
-    BoxWithConstraints(modifier = modifier) {
+    BoxWithConstraints(modifier = modifier.semantics(mergeDescendants = true) {  }) {
         androidx.compose.material.Card(
             elevation = 0.dp,
             shape = RoundedCornerShape(MisticaTheme.radius.containerBorderRadius),
@@ -50,11 +51,13 @@ fun PosterCard(
                     min = maxWidth / aspectRatio.ratio,
                     max = Dp.Infinity
                 )
-                .semantics(mergeDescendants = true) {}
+                .semantics { isTraversalGroup = true }
+//                .semantics(mergeDescendants = true) {
+//                    focused = true
+//                }
         ) {
-            PosterCardBackground(
-                backgroundType = backgroundType
-            ) {
+            PosterCardBackground(//modifier = Modifier.semantics { isTraversalGroup = true },
+                backgroundType = backgroundType) {
                 Column(
                     modifier = Modifier.align(alignment = Alignment.BottomCenter),
                     verticalArrangement = Arrangement.Bottom
@@ -63,6 +66,7 @@ fun PosterCard(
                         Spacer(modifier = Modifier.height(40.dp))
                     }
                     PosterCardMainContent(
+//                        modifier = Modifier.semantics { isTraversalGroup = true },
                         backgroundType = backgroundType,
                         tag = headline,
                         preTitle = preTitle,
@@ -75,6 +79,7 @@ fun PosterCard(
                 if (anyTopActionsLoaded) {
                     PosterCardTopActions(
                         modifier = Modifier.align(alignment = Alignment.TopCenter),
+//                            .semantics { isTraversalGroup = true },
                         firstTopAction = firstTopAction,
                         secondTopAction = secondTopAction
                     )

diff --git a/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCardBackground.kt b/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCardBackground.kt
@@ -10,14 +10,17 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.traversalIndex
 
 @Composable
 internal fun PosterCardBackground(
+    modifier: Modifier = Modifier,
     backgroundType: PosterCardBackgroundType,
     content: @Composable BoxScope.() -> Unit)
 {
     Box(
-        modifier = Modifier.background(
+        modifier = modifier.background(
                 brush = if (backgroundType is PosterCardBackgroundType.Color) {
                     backgroundType.brush
                 } else {
@@ -27,7 +30,7 @@ internal fun PosterCardBackground(
     ) {
         if (backgroundType is PosterCardBackgroundType.Image) {
             Image(
-                modifier = Modifier.matchParentSize(),
+                modifier = Modifier.matchParentSize().semantics { traversalIndex = 0f },
                 painter = painterResource(id = backgroundType.imageResource),
                 contentDescription = backgroundType.contentDescription,
                 contentScale = ContentScale.Crop

diff --git a/...ary/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCardMainContent.kt b/...ary/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCardMainContent.kt
@@ -51,7 +51,7 @@ internal fun PosterCardMainContent(
                     24.dp
                 },
             )
-            .semantics { isTraversalGroup = true },
+            .semantics { isTraversalGroup = true }
     ) {
         if (tag != null) {
             Box(modifier = Modifier

diff --git a/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCardTopActions.kt b/library/src/main/java/com/telefonica/mistica/compose/card/postercard/PosterCardTopActions.kt
@@ -36,7 +36,7 @@ internal fun PosterCardTopActions(
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .padding(8.dp),
+            .padding(16.dp),
         horizontalArrangement = Arrangement.End,
         verticalAlignment = Alignment.CenterVertically
     ) {
@@ -47,7 +47,7 @@ internal fun PosterCardTopActions(
         }
         secondTopAction?.let {
             if (firstTopAction != null) {
-                Spacer(modifier = Modifier.width(4.dp))
+                Spacer(modifier = Modifier.width(16.dp))
             }
             TopAction(topActionData = it, modifier = Modifier.semantics {
                 traversalIndex = 9f
@@ -62,8 +62,7 @@ internal fun TopAction(modifier: Modifier, topActionData: TopActionData) {
         Box(
             modifier = modifier
                 .testTag(testTag.orEmpty())
-                .size(48.dp)
-                .padding(4.dp)
+                .size(40.dp)
                 .clip(CircleShape)
                 .clickable { onClick() }
                 .background(