dhonti/ANDROID-15405-postercard: First approach with a11 integrated

Telefonica · Dec 2, 2024 · 52bb0b9 · 52bb0b9
1 parent 1d90eb7
commit 52bb0b9
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 54 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
@@ -57,7 +57,7 @@ fun PosterCards() {
     var subtitle: String by remember { mutableStateOf("Subtitle") }
     var description: String by remember { mutableStateOf("Description") }
 
-    var withAdditionalContent: Boolean by remember { mutableStateOf(false) }
+    var withAdditionalContent: Boolean by remember { mutableStateOf(true) }
 
 
     Column(

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
@@ -38,26 +38,23 @@ fun PosterCard(
 ) {
     val anyTopActionsLoaded = firstTopAction != null || secondTopAction != null
 
-    BoxWithConstraints(modifier = modifier.semantics(mergeDescendants = true) {  }) {
+    BoxWithConstraints(modifier = modifier.semantics { isTraversalGroup = true }) {
         androidx.compose.material.Card(
             elevation = 0.dp,
             shape = RoundedCornerShape(MisticaTheme.radius.containerBorderRadius),
             modifier = Modifier
                 .width(maxWidth)
-                .clickable(enabled = onClickAction != null) {
-                    onClickAction?.invoke()
-                }
+//                .clickable(enabled = onClickAction != null) {
+//                    onClickAction?.invoke()
+//                }
                 .heightIn(
                     min = maxWidth / aspectRatio.ratio,
                     max = Dp.Infinity
                 )
-                .semantics { isTraversalGroup = true }
-//                .semantics(mergeDescendants = true) {
-//                    focused = true
-//                }
         ) {
-            PosterCardBackground(//modifier = Modifier.semantics { isTraversalGroup = true },
-                backgroundType = backgroundType) {
+            PosterCardBackground(
+                backgroundType = backgroundType
+            ) {
                 Column(
                     modifier = Modifier.align(alignment = Alignment.BottomCenter),
                     verticalArrangement = Arrangement.Bottom
@@ -66,7 +63,6 @@ fun PosterCard(
                         Spacer(modifier = Modifier.height(40.dp))
                     }
                     PosterCardMainContent(
-//                        modifier = Modifier.semantics { isTraversalGroup = true },
                         backgroundType = backgroundType,
                         tag = headline,
                         preTitle = preTitle,
@@ -79,7 +75,6 @@ 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,27 +10,27 @@ 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)
-{
+    content: @Composable BoxScope.() -> Unit
+) {
     Box(
-        modifier = modifier.background(
+        modifier = Modifier
+            .background(
                 brush = if (backgroundType is PosterCardBackgroundType.Color) {
                     backgroundType.brush
                 } else {
                     SolidColor(Color.Transparent)
                 },
             )
+            .then(modifier)
     ) {
         if (backgroundType is PosterCardBackgroundType.Image) {
             Image(
-                modifier = Modifier.matchParentSize().semantics { traversalIndex = 0f },
+                modifier = Modifier.matchParentSize(),
                 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
@@ -11,8 +11,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shadow
 import androidx.compose.ui.graphics.SolidColor
-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.text.TextStyle
@@ -51,25 +49,18 @@ internal fun PosterCardMainContent(
                     24.dp
                 },
             )
-            .semantics { isTraversalGroup = true }
     ) {
         if (tag != null) {
-            Box(modifier = Modifier
-                .padding(top = 16.dp, bottom = 20.dp)
-                .semantics {
-                    traversalIndex = 2f
-                }) {
-                tag.build()
+            Box(modifier = Modifier.padding(top = 16.dp, bottom = 20.dp)) {
+                tag.withModifier(modifier = Modifier.semantics { traversalIndex = 2f }).build()
             }
         }
 
         preTitle?.let {
             PosterCardText(
                 modifier = Modifier
                     .padding(top = 4.dp)
-                    .semantics {
-                        traversalIndex = 3f
-                    },
+                    .semantics { traversalIndex = 3f },
                 textValue = preTitle,
                 textStyle = MisticaTheme.typography.preset1,
                 inverseDisplay = backgroundType.inverseDisplay
@@ -80,10 +71,7 @@ internal fun PosterCardMainContent(
             PosterCardText(
                 modifier = Modifier
                     .padding(top = 4.dp)
-                    .semantics {
-                        heading()
-                        traversalIndex = 1f
-                    },
+                    .semantics { traversalIndex = 1f },
                 textValue = title,
                 textStyle = MisticaTheme.typography.presetCardTitle,
                 inverseDisplay = backgroundType.inverseDisplay
@@ -93,9 +81,7 @@ internal fun PosterCardMainContent(
             PosterCardText(
                 modifier = Modifier
                     .padding(top = 4.dp)
-                    .semantics {
-                        traversalIndex = 4f
-                    },
+                    .semantics { traversalIndex = 4f },
                 textValue = subtitle,
                 textStyle = MisticaTheme.typography.preset2,
                 inverseDisplay = backgroundType.inverseDisplay
@@ -105,9 +91,7 @@ internal fun PosterCardMainContent(
             PosterCardText(
                 modifier = Modifier
                     .padding(top = 8.dp)
-                    .semantics {
-                        traversalIndex = 5f
-                    },
+                    .semantics { traversalIndex = 5f },
                 textValue = description,
                 textStyle = MisticaTheme.typography.preset2,
                 inverseDisplay = backgroundType.inverseDisplay
@@ -116,9 +100,8 @@ internal fun PosterCardMainContent(
         customContent?.let {
             Box(modifier = Modifier
                 .padding(top = 4.dp, bottom = 24.dp)
-                .semantics {
-                    traversalIndex = 6f
-                }) {
+                .semantics { traversalIndex = 6f }
+            ) {
                 it()
             }
         }

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
@@ -31,7 +31,7 @@ import com.telefonica.mistica.compose.theme.MisticaTheme
 internal fun PosterCardTopActions(
     modifier: Modifier = Modifier,
     firstTopAction: TopActionData?,
-    secondTopAction: TopActionData?
+    secondTopAction: TopActionData?,
 ) {
     Row(
         modifier = modifier
@@ -41,26 +41,25 @@ internal fun PosterCardTopActions(
         verticalAlignment = Alignment.CenterVertically
     ) {
         firstTopAction?.let {
-            TopAction(topActionData = it, modifier = Modifier.semantics {
-                traversalIndex = 8f
-            })
+            TopAction(topActionData = it, modifier = Modifier.semantics { traversalIndex = 7f })
         }
         secondTopAction?.let {
             if (firstTopAction != null) {
                 Spacer(modifier = Modifier.width(16.dp))
             }
-            TopAction(topActionData = it, modifier = Modifier.semantics {
-                traversalIndex = 9f
-            })
+            TopAction(topActionData = it, modifier = Modifier.semantics { traversalIndex = 8f })
         }
     }
 }
 
 @Composable
-internal fun TopAction(modifier: Modifier, topActionData: TopActionData) {
+internal fun TopAction(
+    modifier: Modifier = Modifier,
+    topActionData: TopActionData
+) {
     with(topActionData) {
         Box(
-            modifier = modifier
+            modifier = Modifier
                 .testTag(testTag.orEmpty())
                 .size(40.dp)
                 .clip(CircleShape)
@@ -73,7 +72,7 @@ internal fun TopAction(modifier: Modifier, topActionData: TopActionData) {
                     }
                 )
                 .wrapContentSize(align = Alignment.Center)
-
+                .then(modifier)
         ) {
             Image(
                 painter = painterResource(id = iconRes),