Merge pull request #568 from Orange-OpenSource/567-bug-accessibility-…

…toggle-button-is-not-vocalised-correctly

567 - Bug - Accessibility toggle button is not vocalized correctly

changelog.md

@@ -42,6 +42,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - \[Lib\] Fix a bug where `enabled` property of `OdsIconToggleButtonsRowItem` has no effect ([#329](https://github.com/Orange-OpenSource/ods-android/issues/329))
 
+### Fixed
+
+- \[Lib\] Vocalize icon toggle button state change in `OdsIconToggleButtonsRow` component ([#567](https://github.com/Orange-OpenSource/ods-android/issues/567))
+
 ## [0.13.0](https://github.com/Orange-OpenSource/ods-android/compare/0.12.0...0.13.0) - 2023-06-01
 
 ### Added

lib/src/main/java/com/orange/ods/compose/component/button/OdsIconToggleButtonsRow.kt

@@ -32,11 +32,14 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.stateDescription
 import androidx.compose.ui.unit.dp
 import com.orange.ods.compose.component.OdsComposable
 import com.orange.ods.compose.component.utilities.DisabledInteractionSource
 import com.orange.ods.compose.component.utilities.Preview
 import com.orange.ods.compose.component.utilities.UiModePreviews
+import com.orange.ods.compose.component.utilities.selectionStateDescription
 import com.orange.ods.compose.theme.OdsDisplaySurface
 import com.orange.ods.utilities.extension.enable
 
@@ -108,12 +111,13 @@ private fun IconToggleButtonsRowItem(
 ) {
     val iconTint = buttonToggleIconColor(displaySurface, selected, iconToggleButton.enabled)
     val backgroundAlpha = if (selected && iconToggleButton.enabled) 0.12f else 0f
+    val iconToggleButtonStateDescription = selectionStateDescription(selected = selected)
 
     Icon(
         modifier = Modifier
             .background(
                 color = buttonToggleBackgroundColor(displaySurface)
-                    .copy(alpha = if (iconToggleButton.enabled) animateFloatAsState(backgroundAlpha).value else backgroundAlpha)
+                    .copy(alpha = if (iconToggleButton.enabled) animateFloatAsState(backgroundAlpha, label = "").value else backgroundAlpha)
             )
             .padding(12.dp)
             .run {
@@ -122,10 +126,13 @@ private fun IconToggleButtonsRowItem(
                 } else {
                     this
                 }
+            }
+            .semantics {
+                stateDescription = iconToggleButtonStateDescription
             },
         painter = iconToggleButton.icon,
         contentDescription = iconToggleButton.iconDescription,
-        tint = if (iconToggleButton.enabled) animateColorAsState(iconTint).value else iconTint
+        tint = if (iconToggleButton.enabled) animateColorAsState(iconTint, label = "").value else iconTint
     )
 }
 

lib/src/main/java/com/orange/ods/compose/component/chip/OdsChip.kt

@@ -28,7 +28,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.stateDescription
 import androidx.compose.ui.tooling.preview.PreviewParameter
@@ -40,6 +39,7 @@ import com.orange.ods.compose.component.utilities.BasicPreviewParameterProvider
 import com.orange.ods.compose.component.utilities.OdsImageCircleShape
 import com.orange.ods.compose.component.utilities.Preview
 import com.orange.ods.compose.component.utilities.UiModePreviews
+import com.orange.ods.compose.component.utilities.selectionStateDescription
 import com.orange.ods.compose.theme.OdsTheme
 import com.orange.ods.utilities.extension.enable
 import com.orange.ods.utilities.extension.noRippleClickable
@@ -80,7 +80,7 @@ fun OdsChip(
     leadingContentDescription: String? = null,
     onCancel: (() -> Unit)? = null
 ) {
-    val chipStateDescription = odsChipStateDescription(selected)
+    val chipStateDescription = selectionStateDescription(selected)
 
     Chip(
         onClick = onClick,
@@ -136,10 +136,6 @@ fun OdsChip(
     }
 }
 
-@Composable
-internal fun odsChipStateDescription(selected: Boolean) =
-    if (selected) stringResource(id = R.string.state_selected) else stringResource(id = R.string.state_not_selected)
-
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
 private fun odsChipColors(outlined: Boolean, selected: Boolean): ChipColors {

lib/src/main/java/com/orange/ods/compose/component/chip/OdsChoiceChipsFlowRow.kt

@@ -29,6 +29,7 @@ import com.orange.ods.compose.component.OdsComposable
 import com.orange.ods.compose.component.utilities.BasicPreviewParameterProvider
 import com.orange.ods.compose.component.utilities.Preview
 import com.orange.ods.compose.component.utilities.UiModePreviews
+import com.orange.ods.compose.component.utilities.selectionStateDescription
 
 /**
  * Displays a full width [FlowRow] containing customized choice chips [OdsChoiceChipsFlowRowScope.OdsChoiceChip].
@@ -67,7 +68,7 @@ fun <T> OdsChoiceChipsFlowRow(
 @OdsComposable
 fun <T> OdsChoiceChipsFlowRowScope<T>.OdsChoiceChip(text: String, value: T, modifier: Modifier = Modifier, enabled: Boolean = true) {
     val selected = selectedChip.value == value
-    val chipStateDescription = odsChipStateDescription(selected = selected)
+    val chipStateDescription = selectionStateDescription(selected = selected)
     OdsChip(
         text = text,
         modifier = modifier.semantics {

lib/src/main/java/com/orange/ods/compose/component/textfield/OdsTextFieldsCommon.kt

@@ -14,7 +14,6 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.Text
@@ -83,7 +82,6 @@ internal fun OdsTextFieldIcon(painter: Painter, contentDescription: String?, onC
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 internal fun getTrailing(trailing: OdsTextFieldTrailing, value: String, enabled: Boolean = true): @Composable (() -> Unit) {
     return when (trailing) {
         is OdsTextTrailing -> {

lib/src/main/java/com/orange/ods/compose/component/utilities/Accessibility.kt

@@ -0,0 +1,24 @@
+/*
+ *
+ *  Copyright 2021 Orange
+ *
+ *  Use of this source code is governed by an MIT-style
+ *  license that can be found in the LICENSE file or at
+ *  https://opensource.org/licenses/MIT.
+ * /
+ */
+
+package com.orange.ods.compose.component.utilities
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import com.orange.ods.R
+
+/**
+ * Returns the selection state ready for vocalization according to the [selected] provided value.
+ *
+ * @param selected Set it to true if the element is selected, false otherwise.
+ */
+@Composable
+internal fun selectionStateDescription(selected: Boolean) =
+    if (selected) stringResource(id = R.string.state_selected) else stringResource(id = R.string.state_not_selected)

lib/src/main/java/com/orange/ods/compose/component/utilities/DisabledInteractionSource.kt

@@ -15,6 +15,9 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.emptyFlow
 
+/**
+ * Prevent ripple effect on element click.
+ */
 class DisabledInteractionSource : MutableInteractionSource {
     override val interactions: Flow<Interaction> = emptyFlow()
     override suspend fun emit(interaction: Interaction) {}