How to make clickabletext work while accessibility is on for mutiple links in android compose?

Question

How to implement multiple substring clickable work in one sentence. and that should work while talkback accessibility is on. like whatsapp. how to achieve this.

You can try from this [answer](https://stackoverflow.com/a/65656351/8266651). — Kotlin Learner, Jul 05 '23 at 13:22
Does this help - https://stackoverflow.com/a/69636806/9636037 — Abhimanyu, Jul 05 '23 at 13:56
Does this answer your question? [Jetpack Compose Text hyperlink some section of the text](https://stackoverflow.com/questions/65567412/jetpack-compose-text-hyperlink-some-section-of-the-text) — Abhimanyu, Jul 05 '23 at 14:39

score 0 · Answer 1 · answered Jul 05 '23 at 14:14

You can used the predefined Composable ClickableText.

Below an example of what you want to achieve. Also you can improve the code by defining a data class that will handle the clickable Link properties.

@Composable
fun TestScreen() {
    Scaffold { paddingValues ->
        Box(
            modifier = Modifier
                .fillMaxSize(1f)
                .padding(paddingValues),
            contentAlignment = Alignment.Center
        ) {
            val firstLink = "Privacy policy"
            val secondLink = "Terms of Service"
            val str = "Read our $firstLink. Tap 'Agree and continue' to accept $secondLink"

            val startIndexOfFirstLink = str.indexOf(firstLink)
            val endIndexOfFirstLink = startIndexOfFirstLink + firstLink.length

            val startIndexOfSecondLink = str.indexOf(secondLink)
            val endIndexOfSecondLink = startIndexOfSecondLink + secondLink.length

            val annotatedString = buildAnnotatedString {
                append(str)
                addStringAnnotation(
                    tag = "policy",
                    annotation = "https://www.whatsapp.com/legal/privacy-policy",
                    start = startIndexOfFirstLink,
                    end = endIndexOfFirstLink
                )
                addStyle(
                    style = SpanStyle(
                        color = MaterialTheme.colorScheme.primary
                    ),
                    start = startIndexOfFirstLink,
                    end = endIndexOfFirstLink
                )
                addStringAnnotation(
                    tag = "terms",
                    annotation = "https://www.whatsapp.com/legal/terms-of-service",
                    start = startIndexOfSecondLink,
                    end = endIndexOfSecondLink
                )
                addStyle(
                    style = SpanStyle(
                        color = MaterialTheme.colorScheme.primary
                    ),
                    start = startIndexOfSecondLink,
                    end = endIndexOfSecondLink
                )
            }
            ClickableText(
                modifier = Modifier.padding(horizontal = 16.dp),
                text = annotatedString,
                style = MaterialTheme.typography.bodyMedium.copy(textAlign = TextAlign.Center),
                onClick = { offset ->
                    val policy = annotatedString.getStringAnnotations(
                        tag = "policy",
                        start = offset,
                        end = offset
                    )
                    if (policy.isNotEmpty()) {
                        /**
                         * open URI in a browser.
                         */
                        Log.e("policy url", policy.first().item)
                    }

                    val terms = annotatedString.getStringAnnotations(
                        tag = "terms",
                        start = offset,
                        end = offset
                    )
                    if (terms.isNotEmpty()) {
                        /**
                         * open browser
                         */
                        Log.e("terms url", terms.first().item)
                    }
                }
            )
        }
    }
}

this solution works normally but not with accessibility talkback on. — Pratibha, Jul 26 '23 at 08:57

score -1 · Answer 2 · answered Jul 05 '23 at 13:55

You can use the AnnotatedString and ClickableText APIs. Here's an example of how you can achieve this:

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import androidx.core.content.ContextCompat
import androidx.core.content.ContextCompat.startActivity

@Composable
fun ClickableTextWithMultipleLinks() {
    val context = LocalContext.current

    val text = buildAnnotatedString {
        withStyle(
            style = SpanStyle(
                color = MaterialTheme.colors.primary,
                textDecoration = TextDecoration.Underline
            )
        ) {
            append("Link 1")
            addLink("https://www.example.com/link1") // Replace with your URL
        }
        append(" and ")
        withStyle(
            style = SpanStyle(
                color = MaterialTheme.colors.primary,
                textDecoration = TextDecoration.Underline
            )
        ) {
            append("Link 2")
            addLink("https://www.example.com/link2") // Replace with your URL
        }
    }

    Column {
        ClickableText(text, onClick = { offset ->
            text.getStringAnnotations(offset, offset).firstOrNull()?.let { annotation ->
                // Handle the click event
                val url = annotation.item
                // Open the URL or perform any action based on the clicked link
                startActivity(context, url)
            }
        }, style = MaterialTheme.typography.body1, modifier = Modifier.clickable())
    }
}

@Preview
@Composable
fun PreviewClickableTextWithMultipleLinks() {
    ClickableTextWithMultipleLinks()
}

fun startActivity(context: Context, url: String) {
    // Handle starting an activity with the provided URL
    // Replace with your implementation
}

Make sure to replace the startActivity function implementation with your desired logic to handle opening the URLs or performing any other actions based on the clicked links.

Remember to add the necessary dependencies and imports for Compose and the AndroidX libraries used in the code.

When accessibility talkback on , it opens only second link always., first one is not opening — Pratibha, Jul 26 '23 at 08:57

How to make clickabletext work while accessibility is on for mutiple links in android compose?

2 Answers2