From 1ff1103c11e93c06dc3439dabebe92a2833a1795 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Latorre=20Asensio?= Date: Wed, 22 May 2024 14:04:06 +0200 Subject: [PATCH] ANDROID-13801 Improve buttons accesibility (#355) --- .../mistica/catalog/ui/compose/components/Buttons.kt | 5 +++++ catalog/src/main/res/layout/screen_buttons_catalog.xml | 9 +++++++-- .../java/com/telefonica/mistica/button/ProgressButton.kt | 6 +++++- .../main/java/com/telefonica/mistica/button2/Button.kt | 7 +++++-- .../java/com/telefonica/mistica/compose/button/Button.kt | 9 +++++++-- 5 files changed, 29 insertions(+), 7 deletions(-) diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Buttons.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Buttons.kt index 9fce6ef1f..1556ccddb 100644 --- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Buttons.kt +++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Buttons.kt @@ -71,6 +71,7 @@ private fun Buttons( name = it.name.lowercase().replaceFirstChar(Char::titlecase), style = it, isLoading = false, + contentDescription = "Custom content description", ) CatalogButton( @@ -86,6 +87,7 @@ private fun Buttons( style = it, isLoading = isLoading, loadingText = "Loading", + contentDescription = "Custom content description loading", onClickListener = { isLoading = true scope.launch { @@ -100,6 +102,7 @@ private fun Buttons( style = it, enabled = false, isLoading = false, + contentDescription = "Custom content description disabled", ) if (it in listOf(ButtonStyle.LINK, ButtonStyle.LINK_INVERSE)) { @@ -133,6 +136,7 @@ private fun CatalogButton( loadingText: String = "", onClickListener: () -> Unit = {}, @DrawableRes icon: Int? = null, + contentDescription: String? = null, ) { Button( text = name, @@ -143,5 +147,6 @@ private fun CatalogButton( icon = icon, withChevron = withChevron, onClickListener = onClickListener, + contentDescription = contentDescription, ) } diff --git a/catalog/src/main/res/layout/screen_buttons_catalog.xml b/catalog/src/main/res/layout/screen_buttons_catalog.xml index 862a34fae..5196715ef 100644 --- a/catalog/src/main/res/layout/screen_buttons_catalog.xml +++ b/catalog/src/main/res/layout/screen_buttons_catalog.xml @@ -31,7 +31,8 @@ style="@style/AppTheme.Button.DefaultButton" android:layout_width="wrap_content" android:layout_height="wrap_content" - android:text="Primary" /> + android:text="Primary" + android:contentDescription="Custom content description" /> + android:text="Primary Progress" + android:contentDescription="Custom content description progress" /> Unit by mutableStateOf({}) private var invalidatePaddings: Boolean by mutableStateOf(false) - init { + init { attrs?.let { val textTypedArray = context.obtainStyledAttributes(attrs, intArrayOf(android.R.attr.text)) val enabledTypedArray = context.obtainStyledAttributes(attrs, intArrayOf(android.R.attr.enabled)) @@ -53,6 +53,8 @@ class Button @JvmOverloads constructor( styledAttrs.recycle() } } + + importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO } override fun setEnabled(enabled: Boolean) { @@ -88,7 +90,8 @@ class Button @JvmOverloads constructor( icon = icon, withChevron = withChevron, invalidatePaddings = invalidatePaddings, - onClickListener = onClick + onClickListener = onClick, + contentDescription = contentDescription?.toString()?.ifEmpty { null } ) } } diff --git a/library/src/main/java/com/telefonica/mistica/compose/button/Button.kt b/library/src/main/java/com/telefonica/mistica/compose/button/Button.kt index 3a622f4d6..72dd3a089 100644 --- a/library/src/main/java/com/telefonica/mistica/compose/button/Button.kt +++ b/library/src/main/java/com/telefonica/mistica/compose/button/Button.kt @@ -39,6 +39,8 @@ import androidx.compose.ui.layout.onGloballyPositioned import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.painterResource +import androidx.compose.ui.semantics.contentDescription +import androidx.compose.ui.semantics.semantics import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter @@ -57,6 +59,7 @@ private const val CHEVRON_ASPECT_RATIO = 8f / 20f fun Button( modifier: Modifier = Modifier, text: String, + contentDescription: String? = null, loadingText: String = "", buttonStyle: ButtonStyle = ButtonStyle.PRIMARY, isLoading: Boolean = false, @@ -96,7 +99,7 @@ fun Button( ) { Box(contentAlignment = Alignment.Center) { LoadingContent(isLoading, size, textColor, loadingText) - ButtonContent(isLoading, icon, size, style, text, textColor, withChevron, enabled) + ButtonContent(isLoading, icon, size, style, text, textColor, withChevron, enabled, contentDescription) } } } @@ -148,6 +151,7 @@ private fun ButtonContent( textColor: Color, withChevron: Boolean, enabled: Boolean, + contentDescription: String?, ) { AnimatedVisibility( modifier = Modifier.fillMaxHeight(), @@ -169,7 +173,8 @@ private fun ButtonContent( } Text( modifier = Modifier - .align(Alignment.CenterVertically), + .align(Alignment.CenterVertically) + .semantics { contentDescription?.let { this.contentDescription = it } }, text = text, color = textColor, style = size.textStyle,