From 94905c993625430873936b5cb1bffd424e2c1a8b Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Tue, 5 Jul 2022 17:15:22 +0200 Subject: [PATCH 1/5] Fix control list item talkback behavior by adding a toggleable on the parent --- .../composable/SelectionControlListItems.kt | 36 ++++++++++++------- 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt index 75cf59b21..c680e08b7 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt @@ -11,12 +11,13 @@ package com.orange.ods.demo.ui.utilities.composable import androidx.annotation.StringRes -import androidx.compose.foundation.clickable +import androidx.compose.foundation.selection.toggleable import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.runtime.Composable import androidx.compose.runtime.MutableState import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource +import androidx.compose.ui.semantics.Role import com.orange.ods.compose.component.control.OdsCheckbox import com.orange.ods.compose.component.control.OdsRadioButton import com.orange.ods.compose.component.control.OdsSwitch @@ -26,12 +27,15 @@ import com.orange.ods.compose.component.list.OdsListItem @Composable fun CheckboxListItem(@StringRes labelRes: Int, checked: MutableState, enabled: Boolean = true) { OdsListItem( - modifier = if (enabled) Modifier.clickable { checked.value = !checked.value } else Modifier, + modifier = if (enabled) Modifier.toggleable( + value = checked.value, + role = Role.Checkbox, + onValueChange = { checked.value = !checked.value }) else Modifier, text = stringResource(id = labelRes), trailing = { OdsCheckbox( checked = checked.value, - onCheckedChange = { checked.value = it }, + onCheckedChange = null, enabled = enabled ) } @@ -41,17 +45,20 @@ fun CheckboxListItem(@StringRes labelRes: Int, checked: MutableState, e @ExperimentalMaterialApi @Composable fun RadioButtonListItem(@StringRes labelRes: Int, selectedRadio: MutableState, currentRadio: T, onClick: () -> Unit = {}, enabled: Boolean = true) { - val clickAction = { - selectedRadio.value = currentRadio - onClick.invoke() - } + val selected = selectedRadio.value == currentRadio OdsListItem( - modifier = if (enabled) Modifier.clickable { clickAction() } else Modifier, + modifier = if (enabled) Modifier.toggleable( + value = selected, + role = Role.RadioButton, + onValueChange = { + selectedRadio.value = currentRadio + onClick.invoke() + }) else Modifier, text = stringResource(id = labelRes), trailing = { OdsRadioButton( - selected = selectedRadio.value == currentRadio, - onClick = { clickAction() }, + selected = selected, + onClick = null, enabled = enabled ) } @@ -62,12 +69,17 @@ fun RadioButtonListItem(@StringRes labelRes: Int, selectedRadio: MutableStat @Composable fun SwitchListItem(@StringRes labelRes: Int, checked: MutableState, enabled: Boolean = true) { OdsListItem( - modifier = if (enabled) Modifier.clickable { checked.value = !checked.value } else Modifier, + modifier = if (enabled) Modifier.toggleable( + value = checked.value, + role = Role.Switch, + onValueChange = { + checked.value = !checked.value + }) else Modifier, text = stringResource(id = labelRes), trailing = { OdsSwitch( checked = checked.value, - onCheckedChange = { checked.value = it }, + onCheckedChange = null, enabled = enabled ) } From d68ab44e92f159bd998608ac4d25c52932b4d16b Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Wed, 6 Jul 2022 15:11:31 +0200 Subject: [PATCH 2/5] Review: Fix Talkback vocalization for disabled controls --- .../composable/SelectionControlListItems.kt | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt index c680e08b7..708e707c7 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt @@ -27,10 +27,12 @@ import com.orange.ods.compose.component.list.OdsListItem @Composable fun CheckboxListItem(@StringRes labelRes: Int, checked: MutableState, enabled: Boolean = true) { OdsListItem( - modifier = if (enabled) Modifier.toggleable( + modifier = Modifier.toggleable( value = checked.value, role = Role.Checkbox, - onValueChange = { checked.value = !checked.value }) else Modifier, + enabled = enabled, + onValueChange = { checked.value = !checked.value } + ), text = stringResource(id = labelRes), trailing = { OdsCheckbox( @@ -47,13 +49,15 @@ fun CheckboxListItem(@StringRes labelRes: Int, checked: MutableState, e fun RadioButtonListItem(@StringRes labelRes: Int, selectedRadio: MutableState, currentRadio: T, onClick: () -> Unit = {}, enabled: Boolean = true) { val selected = selectedRadio.value == currentRadio OdsListItem( - modifier = if (enabled) Modifier.toggleable( + modifier = Modifier.toggleable( value = selected, role = Role.RadioButton, + enabled = enabled, onValueChange = { selectedRadio.value = currentRadio onClick.invoke() - }) else Modifier, + } + ), text = stringResource(id = labelRes), trailing = { OdsRadioButton( @@ -69,12 +73,14 @@ fun RadioButtonListItem(@StringRes labelRes: Int, selectedRadio: MutableStat @Composable fun SwitchListItem(@StringRes labelRes: Int, checked: MutableState, enabled: Boolean = true) { OdsListItem( - modifier = if (enabled) Modifier.toggleable( + modifier = Modifier.toggleable( value = checked.value, role = Role.Switch, + enabled = enabled, onValueChange = { checked.value = !checked.value - }) else Modifier, + } + ), text = stringResource(id = labelRes), trailing = { OdsSwitch( From d0465f1015aad021a5ab0fab5978b98555514e67 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Wed, 6 Jul 2022 15:59:18 +0200 Subject: [PATCH 3/5] Review: Use selectable modifier for choice chips instead of toggleable --- .../orange/ods/demo/ui/components/chips/VariantChip.kt | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/chips/VariantChip.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/chips/VariantChip.kt index ce5ecd813..727fd23c8 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/chips/VariantChip.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/chips/VariantChip.kt @@ -18,7 +18,7 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.rememberScrollState -import androidx.compose.foundation.selection.toggleable +import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.verticalScroll import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.rememberBottomSheetScaffoldState @@ -166,10 +166,10 @@ private fun ChoiceChip(index: Int, customizationState: ChipCustomizationState) { val selected = customizationState.choiceChipIndexSelected.value == index val onClick: () -> Unit = { customizationState.selectChoiceChip(index) } OdsChip( - modifier = Modifier.toggleable( - value = selected, + modifier = Modifier.selectable( + selected = selected, role = Role.RadioButton, - onValueChange = { onClick() } + onClick = onClick ), text = "${getChipText(chipType = customizationState.chipType.value)} $index", onClick = onClick, From 6a678f747c79ea4edb494a9a091431cd3c313a68 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Wed, 6 Jul 2022 15:59:49 +0200 Subject: [PATCH 4/5] Review: Use selectable modifier for radio buttons --- .../ui/utilities/composable/SelectionControlListItems.kt | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt index 708e707c7..337a10138 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/SelectionControlListItems.kt @@ -11,6 +11,7 @@ package com.orange.ods.demo.ui.utilities.composable import androidx.annotation.StringRes +import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.selection.toggleable import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.runtime.Composable @@ -49,13 +50,13 @@ fun CheckboxListItem(@StringRes labelRes: Int, checked: MutableState, e fun RadioButtonListItem(@StringRes labelRes: Int, selectedRadio: MutableState, currentRadio: T, onClick: () -> Unit = {}, enabled: Boolean = true) { val selected = selectedRadio.value == currentRadio OdsListItem( - modifier = Modifier.toggleable( - value = selected, + modifier = Modifier.selectable( + selected = selected, role = Role.RadioButton, enabled = enabled, - onValueChange = { + onClick = { selectedRadio.value = currentRadio - onClick.invoke() + onClick() } ), text = stringResource(id = labelRes), From 8e3f5ad53f3c17b3e0a552094735a183e9cadd42 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Wed, 6 Jul 2022 16:13:15 +0200 Subject: [PATCH 5/5] Review: Add selectable group modifiers --- .../demo/ui/components/chips/VariantChip.kt | 5 +- .../radiobuttons/ComponentRadioButtons.kt | 46 ++++++++++--------- 2 files changed, 29 insertions(+), 22 deletions(-) diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/chips/VariantChip.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/chips/VariantChip.kt index 727fd23c8..1b524bafc 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/chips/VariantChip.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/chips/VariantChip.kt @@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.selection.selectable +import androidx.compose.foundation.selection.selectableGroup import androidx.compose.foundation.verticalScroll import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.rememberBottomSheetScaffoldState @@ -127,7 +128,9 @@ private fun VariantChip(customizationState: ChipCustomizationState) { val chipLabel = stringResource(id = R.string.component_chip) if (customizationState.isChoiceChip) { - FlowRow(modifier = Modifier.fillMaxWidth()) { + FlowRow(modifier = Modifier + .fillMaxWidth() + .selectableGroup()) { for (index in 1..4) { ChoiceChip(index, customizationState) } diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/radiobuttons/ComponentRadioButtons.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/radiobuttons/ComponentRadioButtons.kt index 0ee8eec2e..24ff966a0 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/radiobuttons/ComponentRadioButtons.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/radiobuttons/ComponentRadioButtons.kt @@ -10,10 +10,13 @@ package com.orange.ods.demo.ui.components.radiobuttons +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.selection.selectableGroup import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier import com.orange.ods.demo.R import com.orange.ods.demo.ui.utilities.composable.RadioButtonListItem import com.orange.ods.demo.ui.utilities.composable.Title @@ -32,25 +35,26 @@ fun ComponentRadioButtonsContent() { @Composable private fun RadioButtons(enabled: Boolean) { val selectedRadio = remember { mutableStateOf(R.string.component_element_item1) } - - RadioButtonListItem( - labelRes = R.string.component_element_item1, - selectedRadio = selectedRadio, - currentRadio = R.string.component_element_item1, - enabled = enabled - ) - - RadioButtonListItem( - labelRes = R.string.component_element_item2, - selectedRadio = selectedRadio, - currentRadio = R.string.component_element_item2, - enabled = enabled - ) - - RadioButtonListItem( - labelRes = R.string.component_element_item3, - selectedRadio = selectedRadio, - currentRadio = R.string.component_element_item3, - enabled = enabled - ) + Column(modifier = Modifier.selectableGroup()) { + RadioButtonListItem( + labelRes = R.string.component_element_item1, + selectedRadio = selectedRadio, + currentRadio = R.string.component_element_item1, + enabled = enabled + ) + + RadioButtonListItem( + labelRes = R.string.component_element_item2, + selectedRadio = selectedRadio, + currentRadio = R.string.component_element_item2, + enabled = enabled + ) + + RadioButtonListItem( + labelRes = R.string.component_element_item3, + selectedRadio = selectedRadio, + currentRadio = R.string.component_element_item3, + enabled = enabled + ) + } } \ No newline at end of file