Merge pull request #595 from Orange-OpenSource/560-bug-accessibility-…

…group-elements-in-the-same-vocalisation

560 - Accessibility - Group dropdown menu elements in the same vocalisation

changelog.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - \[App\] Screen displayed on filter chip variant click was not the good one ([#580](https://github.com/Orange-OpenSource/ods-android/issues/580))
 - \[App\] Fix a bug where `OdsListItem` text color did not update when switching between light and dark modes in text field demo ([#578](https://github.com/Orange-OpenSource/ods-android/issues/578))
 - \[App\] The number of search results is now vocalized ([#506](https://github.com/Orange-OpenSource/ods-android/issues/506))
+- \[Lib\] Vocalize exposed dropdown menu content as a group ([#560](https://github.com/Orange-OpenSource/ods-android/issues/560))
 
 ## [0.14.0](https://github.com/Orange-OpenSource/ods-android/compare/0.13.0...0.14.0) - 2023-07-12
 

lib/src/main/java/com/orange/ods/compose/component/menu/OdsExposedDropdownMenu.kt

@@ -18,13 +18,18 @@ import androidx.compose.material.ExposedDropdownMenuBox
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.stateDescription
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import com.orange.ods.compose.component.OdsComposable
 import com.orange.ods.compose.component.textfield.OdsExposedDropdownMenuTrailing
 import com.orange.ods.compose.component.textfield.OdsTextField
 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.enabledStateDescription
 import kotlinx.parcelize.Parcelize
 
 /**
@@ -50,9 +55,14 @@ fun OdsExposedDropdownMenu(
  enabled: Boolean = true
 ) {
  var expanded by remember { mutableStateOf(false) }
+ val menuBoxStateDescription = enabledStateDescription(enabled = enabled)
+ val menuBoxAction = if (enabled) stringResource(id = com.orange.ods.R.string.dropdown_menu_action) else ""
 
  ExposedDropdownMenuBox(
- modifier = modifier,
+ modifier = modifier.clearAndSetSemantics {
+ contentDescription = "$label, ${selectedItem.value.label}, $menuBoxAction"
+ stateDescription = menuBoxStateDescription
+ },
  expanded = expanded,
  onExpandedChange = {
  expanded = !expanded

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

@@ -21,4 +21,13 @@ import com.orange.ods.R
  */
 @Composable
 internal fun selectionStateDescription(selected: Boolean) =
- if (selected) stringResource(id = R.string.state_selected) else stringResource(id = R.string.state_not_selected)
+ if (selected) stringResource(id = R.string.state_selected) else stringResource(id = R.string.state_not_selected)
+
+/**
+ * Returns the enabled/disabled state ready for vocalization according to the [enabled] provided value.
+ *
+ * @param enabled Set it to true if the element is enabled, false otherwise.
+ */
+@Composable
+internal fun enabledStateDescription(enabled: Boolean) =
+ if (!enabled) stringResource(id = R.string.state_disabled) else ""

lib/src/main/res/values/strings.xml

@@ -9,9 +9,12 @@
  -->
 
 <resources>
+ <string name="state_disabled">Disabled</string>
  <string name="state_selected">Selected</string>
  <string name="state_not_selected">Not selected</string>
 
+ <string name="dropdown_menu_action">Double click to change selection</string>
+
  <string name="text_field_password_show">Show password</string>
  <string name="text_field_password_hide">Hide password</string>