dhonti/ANDROID-15405-postercard: A11 approach using "Modifier.zIndex(…

…)" in corresponding components
Telefonica · Dec 2, 2024 · 3ada235 · 3ada235
1 parent 52bb0b9
commit 3ada235
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
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,10 +14,9 @@ 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
+import androidx.compose.ui.zIndex
 import com.telefonica.mistica.compose.tag.Tag
 import com.telefonica.mistica.compose.theme.MisticaTheme
 
@@ -38,15 +37,15 @@ fun PosterCard(
 ) {
     val anyTopActionsLoaded = firstTopAction != null || secondTopAction != null
 
-    BoxWithConstraints(modifier = modifier.semantics { isTraversalGroup = true }) {
+    BoxWithConstraints(modifier = modifier) {
         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
@@ -74,7 +73,7 @@ fun PosterCard(
                 }
                 if (anyTopActionsLoaded) {
                     PosterCardTopActions(
-                        modifier = Modifier.align(alignment = Alignment.TopCenter),
+                        modifier = Modifier.align(alignment = Alignment.TopCenter).zIndex(1f),
                         firstTopAction = firstTopAction,
                         secondTopAction = secondTopAction
                     )

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,10 +11,9 @@ 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.semantics
-import androidx.compose.ui.semantics.traversalIndex
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import com.telefonica.mistica.compose.tag.Tag
 import com.telefonica.mistica.compose.theme.MisticaTheme
 
@@ -51,16 +50,16 @@ internal fun PosterCardMainContent(
             )
     ) {
         if (tag != null) {
-            Box(modifier = Modifier.padding(top = 16.dp, bottom = 20.dp)) {
-                tag.withModifier(modifier = Modifier.semantics { traversalIndex = 2f }).build()
+            Box(modifier = Modifier.padding(top = 16.dp, bottom = 20.dp).zIndex(2f)) {
+                tag.build()
             }
         }
 
         preTitle?.let {
             PosterCardText(
                 modifier = Modifier
                     .padding(top = 4.dp)
-                    .semantics { traversalIndex = 3f },
+                    .zIndex(2f),
                 textValue = preTitle,
                 textStyle = MisticaTheme.typography.preset1,
                 inverseDisplay = backgroundType.inverseDisplay
@@ -71,7 +70,7 @@ internal fun PosterCardMainContent(
             PosterCardText(
                 modifier = Modifier
                     .padding(top = 4.dp)
-                    .semantics { traversalIndex = 1f },
+                    .zIndex(0f),
                 textValue = title,
                 textStyle = MisticaTheme.typography.presetCardTitle,
                 inverseDisplay = backgroundType.inverseDisplay
@@ -81,7 +80,7 @@ internal fun PosterCardMainContent(
             PosterCardText(
                 modifier = Modifier
                     .padding(top = 4.dp)
-                    .semantics { traversalIndex = 4f },
+                    .zIndex(4f),
                 textValue = subtitle,
                 textStyle = MisticaTheme.typography.preset2,
                 inverseDisplay = backgroundType.inverseDisplay
@@ -91,16 +90,18 @@ internal fun PosterCardMainContent(
             PosterCardText(
                 modifier = Modifier
                     .padding(top = 8.dp)
-                    .semantics { traversalIndex = 5f },
+                    .zIndex(5f),
                 textValue = description,
                 textStyle = MisticaTheme.typography.preset2,
                 inverseDisplay = backgroundType.inverseDisplay
             )
         }
+
         customContent?.let {
-            Box(modifier = Modifier
-                .padding(top = 4.dp, bottom = 24.dp)
-                .semantics { traversalIndex = 6f }
+            Box(
+                modifier = Modifier
+                    .padding(top = 4.dp, bottom = 24.dp)
+                    .zIndex(6f),
             ) {
                 it()
             }