ANDROID-13801 Improve buttons accesibility (#355)

Telefonica · May 22, 2024 · 1ff1103 · 1ff1103
1 parent 5851d93
commit 1ff1103
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 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
@@ -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
@@ -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" />
 
             <com.telefonica.mistica.button.Button
                 style="@style/AppTheme.Button.DefaultButton"
@@ -47,7 +48,8 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="8dp"
-                android:text="Primary Progress" />
+                android:text="Primary Progress"
+                android:contentDescription="Custom content description progress" />
 
             <com.telefonica.mistica.button.Button
                 style="@style/AppTheme.Button.DefaultButton"
@@ -217,6 +219,7 @@
                 android:layout_height="wrap_content"
                 android:layout_marginTop="8dp"
                 android:text="Link"
+                android:contentDescription="Custom content description link"
                 app:style="LINK" />
 
             <com.telefonica.mistica.button2.Button
@@ -234,6 +237,7 @@
                 android:layout_height="wrap_content"
                 android:layout_marginTop="8dp"
                 android:text="Link Progress"
+                android:contentDescription="Custom content description link progress"
                 app:style="LINK" />
 
             <com.telefonica.mistica.button2.Button
@@ -242,6 +246,7 @@
                 android:layout_marginTop="8dp"
                 android:enabled="false"
                 android:text="Link Disabled"
+                android:contentDescription="Custom content description link disabled"
                 app:style="LINK" />
 
             <com.telefonica.mistica.button2.Button

diff --git a/library/src/main/java/com/telefonica/mistica/button/ProgressButton.kt b/library/src/main/java/com/telefonica/mistica/button/ProgressButton.kt
@@ -78,13 +78,15 @@ class ProgressButton : FrameLayout {
             }
         }
 
+        this.importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO
         isClickable = false
         setPadding(0, 0, 0, 0)
         setBackgroundColor(Color.TRANSPARENT)
         originalTextColors = buttonNormal.textColors
 
         buttonNormal.apply {
             id = NO_ID
+            importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO
             layoutParams = LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT,
                 ViewGroup.LayoutParams.MATCH_PARENT
@@ -94,6 +96,7 @@ class ProgressButton : FrameLayout {
 
         buttonLoading.apply {
             id = NO_ID
+            importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO
             layoutParams = LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT,
                 ViewGroup.LayoutParams.MATCH_PARENT
@@ -108,13 +111,15 @@ class ProgressButton : FrameLayout {
                 .apply {
                     gravity = Gravity.CENTER
                 }
+            importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO
             isIndeterminate = true
             indeterminateTintMode = PorterDuff.Mode.SRC_IN
             visibility = View.INVISIBLE
         }
 
         buttonBackground.apply {
             id = NO_ID
+            importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_YES
             layoutParams = LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT,
                 ViewGroup.LayoutParams.MATCH_PARENT
@@ -281,7 +286,6 @@ class ProgressButton : FrameLayout {
         isFocusable = false
         strokeWidth = 0
         rippleColor = ColorStateList.valueOf(Color.TRANSPARENT)
-        importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_NO
     }
 
     private fun setProgressBarHorizontalPosition() {

diff --git a/library/src/main/java/com/telefonica/mistica/button2/Button.kt b/library/src/main/java/com/telefonica/mistica/button2/Button.kt
@@ -28,7 +28,7 @@ class Button @JvmOverloads constructor(
     private var onClick: () -> 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
@@ -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,