dhonti/ANDROID-15405-postercard: 1st approach for accesibility Poster…

…Card
Telefonica · Nov 29, 2024 · 2c44779 · 2c44779
1 parent f73ec02
commit 2c44779
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 17 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,7 +14,6 @@ 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.focused
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -36,26 +35,26 @@ fun PosterCard(
     onClickAction: (() -> Unit)? = null,
     customContent: (@Composable () -> Unit)? = null,
 ) {
-    val anyTopActionsLoaded = firstTopAction!=null || secondTopAction!=null
+    val anyTopActionsLoaded = firstTopAction != null || secondTopAction != null
 
     BoxWithConstraints(modifier = modifier) {
         androidx.compose.material.Card(
             elevation = 0.dp,
             shape = RoundedCornerShape(MisticaTheme.radius.containerBorderRadius),
             modifier = Modifier
                 .width(maxWidth)
-                .clickable(enabled = onClickAction!=null) {
+                .clickable(enabled = onClickAction != null) {
                     onClickAction?.invoke()
                 }
                 .heightIn(
                     min = maxWidth / aspectRatio.ratio,
                     max = Dp.Infinity
                 )
-                .semantics {
-                    focused = true
-                }
+                .semantics(mergeDescendants = true) {}
         ) {
-            PosterCardBackground(backgroundType = backgroundType) {
+            PosterCardBackground(
+                backgroundType = backgroundType
+            ) {
                 Column(
                     modifier = Modifier.align(alignment = Alignment.BottomCenter),
                     verticalArrangement = Arrangement.Bottom

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,6 +11,10 @@ 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
 import androidx.compose.ui.unit.dp
 import com.telefonica.mistica.compose.tag.Tag
@@ -47,16 +51,25 @@ internal fun PosterCardMainContent(
                     24.dp
                 },
             )
+            .semantics { isTraversalGroup = true },
     ) {
         if (tag != null) {
-            Box(modifier = Modifier.padding(top = 16.dp, bottom = 20.dp)) {
+            Box(modifier = Modifier
+                .padding(top = 16.dp, bottom = 20.dp)
+                .semantics {
+                    traversalIndex = 2f
+                }) {
                 tag.build()
             }
         }
 
         preTitle?.let {
             PosterCardText(
-                modifier = Modifier.padding(top = 4.dp),
+                modifier = Modifier
+                    .padding(top = 4.dp)
+                    .semantics {
+                        traversalIndex = 3f
+                    },
                 textValue = preTitle,
                 textStyle = MisticaTheme.typography.preset1,
                 inverseDisplay = backgroundType.inverseDisplay
@@ -65,30 +78,47 @@ internal fun PosterCardMainContent(
 
         title?.let {
             PosterCardText(
-                modifier = Modifier.padding(top = 4.dp),
+                modifier = Modifier
+                    .padding(top = 4.dp)
+                    .semantics {
+                        heading()
+                        traversalIndex = 1f
+                    },
                 textValue = title,
                 textStyle = MisticaTheme.typography.presetCardTitle,
                 inverseDisplay = backgroundType.inverseDisplay
             )
         }
         subtitle?.let {
             PosterCardText(
-                modifier = Modifier.padding(top = 4.dp),
+                modifier = Modifier
+                    .padding(top = 4.dp)
+                    .semantics {
+                        traversalIndex = 4f
+                    },
                 textValue = subtitle,
                 textStyle = MisticaTheme.typography.preset2,
                 inverseDisplay = backgroundType.inverseDisplay
             )
         }
         description?.let {
             PosterCardText(
-                modifier = Modifier.padding(top = 8.dp),
+                modifier = Modifier
+                    .padding(top = 8.dp)
+                    .semantics {
+                        traversalIndex = 5f
+                    },
                 textValue = description,
                 textStyle = MisticaTheme.typography.preset2,
                 inverseDisplay = backgroundType.inverseDisplay
             )
         }
         customContent?.let {
-            Box(modifier = Modifier.padding(top = 4.dp, bottom = 24.dp)) {
+            Box(modifier = Modifier
+                .padding(top = 4.dp, bottom = 24.dp)
+                .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
@@ -22,6 +22,9 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.semantics.focused
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.traversalIndex
 import androidx.compose.ui.unit.dp
 import com.telefonica.mistica.compose.theme.MisticaTheme
 
@@ -39,22 +42,26 @@ internal fun PosterCardTopActions(
         verticalAlignment = Alignment.CenterVertically
     ) {
         firstTopAction?.let {
-            TopAction(topActionData = it)
+            TopAction(topActionData = it, modifier = Modifier.semantics {
+                traversalIndex = 8f
+            })
         }
         secondTopAction?.let {
             if (firstTopAction != null) {
                 Spacer(modifier = Modifier.width(16.dp))
             }
-            TopAction(topActionData = it)
+            TopAction(topActionData = it, modifier = Modifier.semantics {
+                traversalIndex = 9f
+            })
         }
     }
 }
 
 @Composable
-internal fun TopAction(topActionData: TopActionData) {
+internal fun TopAction(modifier: Modifier, topActionData: TopActionData) {
     with(topActionData) {
         Box(
-            modifier = Modifier
+            modifier = modifier
                 .testTag(testTag.orEmpty())
                 .size(40.dp)
                 .clip(CircleShape)