feat: enhance image configurator with descriptions (#1391)

adevinta · Dec 4, 2024 · fbd1c10 · fbd1c10
1 parent d036963
commit fbd1c10
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 38 deletions.
diff --git a/...rc/main/kotlin/com/adevinta/spark/catalog/configurator/samples/image/ImageConfigurator.kt b/...rc/main/kotlin/com/adevinta/spark/catalog/configurator/samples/image/ImageConfigurator.kt
@@ -23,11 +23,13 @@ package com.adevinta.spark.catalog.configurator.samples.image
 
 import android.graphics.drawable.Drawable
 import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
 import androidx.appcompat.content.res.AppCompatResources.getDrawable
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
@@ -48,6 +50,7 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -75,6 +78,7 @@ import com.adevinta.spark.components.textfields.TextField
 import com.adevinta.spark.components.toggles.SwitchLabelled
 import com.adevinta.spark.icons.Check
 import com.adevinta.spark.icons.SparkIcons
+import com.adevinta.spark.res.annotatedStringResource
 import com.adevinta.spark.tokens.LocalWindowSizeClass
 import com.adevinta.spark.tools.modifiers.ifTrue
 import com.google.accompanist.drawablepainter.rememberDrawablePainter
@@ -120,7 +124,7 @@ private fun ColumnScope.ImageSample() {
     }
     SparkImage(
         model = state.ordinal,
-        contentDescription = null,
+        contentDescription = stringResource(selectedImage.contentDescription),
         modifier = Modifier
             .widthIn(max = imageMaxWidth)
             .aspectRatio(
@@ -213,7 +217,17 @@ private fun ColumnScope.ImageSample() {
         dropdownContent = {
             ImageContentScale.entries.forEach {
                 DropdownMenuItem(
-                    text = { Text(it.name) },
+                    text = {
+                        Column(
+                            verticalArrangement = Arrangement.spacedBy(4.dp),
+                        ) {
+                            Text(it.name)
+                            Text(
+                                text = annotatedStringResource(it.descriptionRes),
+                                style = SparkTheme.typography.caption,
+                            )
+                        }
+                    },
                     onClick = {
                         contentScale = it
                         expandedScale = false
@@ -370,43 +384,34 @@ private enum class ImageShape {
     abstract val shape: Shape
 }
 
-private enum class SelectedImage(@DrawableRes val res: Int) {
-    Wide(R.drawable.img_wide_image_configurator),
-    Narrow(R.drawable.img_narrow_image_configurator),
+private enum class SelectedImage(@DrawableRes val res: Int, @StringRes val contentDescription: Int) {
+    Wide(
+        R.drawable.img_wide_image_configurator,
+        R.string.component_image_wide_description,
+    ),
+    Narrow(
+        R.drawable.img_narrow_image_configurator,
+        R.string.component_image_narrow_description,
+    ),
 }
 
-private enum class ImageContentScale {
-    Crop {
-        override val scale: ContentScale
-            get() = ContentScale.Crop
-    },
-    Fit {
-        override val scale: ContentScale
-            get() = ContentScale.Fit
-    },
-    FillHeight {
-        override val scale: ContentScale
-            get() = ContentScale.FillHeight
-    },
-    FillWidth {
-        override val scale: ContentScale
-            get() = ContentScale.FillWidth
-    },
-    Inside {
-        override val scale: ContentScale
-            get() = ContentScale.Inside
-    },
-    None {
-        override val scale: ContentScale
-            get() = ContentScale.None
-    },
-    FillBounds {
-        override val scale: ContentScale
-            get() = ContentScale.FillBounds
-    },
-    ;
-
-    abstract val scale: ContentScale
+private enum class ImageContentScale(val scale: ContentScale, @StringRes val descriptionRes: Int) {
+    Crop(scale = ContentScale.Crop, descriptionRes = R.string.component_image_content_scale_crop_description),
+    Fit(scale = ContentScale.Fit, descriptionRes = R.string.component_image_content_scale_fit_description),
+    FillHeight(
+        scale = ContentScale.FillHeight,
+        descriptionRes = R.string.component_image_content_scale_fill_height_description,
+    ),
+    FillWidth(
+        scale = ContentScale.FillWidth,
+        descriptionRes = R.string.component_image_content_scale_fill_width_description,
+    ),
+    Inside(scale = ContentScale.Inside, descriptionRes = R.string.component_image_content_scale_inside_description),
+    None(scale = ContentScale.None, descriptionRes = R.string.component_image_content_scale_none_description),
+    FillBounds(
+        scale = ContentScale.FillBounds,
+        descriptionRes = R.string.component_image_content_scale_fill_bounds_description,
+    ),
 }
 
 private enum class ImageAspectRatio(val label: String, val ratio: Float) {

diff --git a/catalog/src/main/res/values/strings.xml b/catalog/src/main/res/values/strings.xml
@@ -77,6 +77,15 @@
     <!--endregion-->
     <!--region image -->
     <string name="component_image_description">The Image component is used to display images with support for fallback.</string>
+    <string name="component_image_narrow_description">Street photography of a person walking in a paved alley after a rain with bright white/golden lights on the side and the center deep blue color with an umbrella</string>
+    <string name="component_image_wide_description">A huge portrait of the Unicorn Gundam fullscale statue at the Odaiba’s DiverCity Tokyo Plaza.</string>
+    <string name="component_image_content_scale_crop_description">Scale the image to fill 100% the bounds of the Image component but without changing its ratio</string>
+    <string name="component_image_content_scale_fit_description">Scale to make sure the image is not cropped and the image component bounds is filled on one at least direction</string>
+    <string name="component_image_content_scale_fill_height_description">Scale the Image to fill the height of its bounds keeping its aspect ratio but might fill the width or not with cropping</string>
+    <string name="component_image_content_scale_fill_width_description">Scale the Image to fill the width of its bounds keeping its aspect ratio but might fill the height or not with cropping</string>
+    <string name="component_image_content_scale_inside_description">Same as <b>Fit</b> however it’ll scale it only if it’s bigger than the image component otherwise it’ll stay <i>smaller</i> that the bounds</string>
+    <string name="component_image_content_scale_none_description">No scaling, the image stay at it’s original size</string>
+    <string name="component_image_content_scale_fill_bounds_description">Stretch the image to fill 100% of the image component bounds</string>
     <!--endregion-->
     <!--region Radio button-->
     <string name="component_radiobutton_description">Component used when only one choice may be selected in a series of options.</string>

diff --git a/spark/src/main/kotlin/com/adevinta/spark/components/image/Image.kt b/spark/src/main/kotlin/com/adevinta/spark/components/image/Image.kt
@@ -44,6 +44,10 @@ import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.role
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -69,6 +73,7 @@ import com.adevinta.spark.icons.SparkIcon
 import com.adevinta.spark.icons.SparkIcons
 import com.adevinta.spark.icons.Tattoo
 import com.adevinta.spark.tokens.EmphasizeDim2
+import com.adevinta.spark.tools.modifiers.ifNotNull
 import com.adevinta.spark.tools.modifiers.sparkUsageOverlay
 
 @InternalSparkApi
@@ -99,7 +104,14 @@ public fun SparkImage(
     blurEdges: Boolean = false,
 ) {
     BoxWithConstraints(
-        modifier = modifier.sparkUsageOverlay(),
+        modifier = modifier
+            .sparkUsageOverlay()
+            .ifNotNull(contentDescription) { description ->
+                clearAndSetSemantics {
+                    this.contentDescription = description
+                    this.role = Role.Image
+                }
+            },
         contentAlignment = Alignment.Center,
     ) {
         val iconSize = when {