Bug 1834747 - Fix talkback linktext access url issue

app/src/main/java/org/mozilla/fenix/onboarding/view/OnboardingPage.kt

@@ -6,6 +6,7 @@ package org.mozilla.fenix.onboarding.view
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.BoxWithConstraintsScope
@@ -27,14 +28,17 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import mozilla.components.support.ktx.android.content.isScreenReaderEnabled
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
 import org.mozilla.fenix.compose.button.PrimaryButton
@@ -197,6 +201,7 @@ private fun LinkText(
     text: String,
     linkTextState: LinkTextState,
 ) {
+    val context = LocalContext.current
     val annotatedString = buildAnnotatedString {
         val startIndex = text.indexOf(linkTextState.text, ignoreCase = true)
         val endIndex = startIndex + linkTextState.text.length
@@ -215,17 +220,29 @@ private fun LinkText(
         )
     }
 
+    // When using UrlAnnotation, talkback shows links in a separate dialog and
+    // opens them in the default browser. Since this component allows the caller to define the
+    // onClick behaviour - e.g. to open the link in in-app custom tab, here StringAnnotation is used
+    // and modifier is enabled with Role.Button when screen reader is enabled.
     ClickableText(
         text = annotatedString,
         style = FirefoxTheme.typography.body2.copy(
             textAlign = TextAlign.Center,
             color = FirefoxTheme.colors.textSecondary,
         ),
+        modifier = Modifier.clickable(
+            enabled = context.isScreenReaderEnabled,
+            role = Role.Button,
+            onClickLabel = linkTextState.text,
+            onClick = { linkTextState.onClick(linkTextState.url) },
+        ),
         onClick = {
-            val range: AnnotatedString.Range<String>? =
-                annotatedString.getStringAnnotations(URL_TAG, it, it).firstOrNull()
-            range?.let { stringAnnotation ->
-                linkTextState.onClick(stringAnnotation.item)
+            if (!context.isScreenReaderEnabled) {
+                val range: AnnotatedString.Range<String>? =
+                    annotatedString.getStringAnnotations(URL_TAG, it, it).firstOrNull()
+                range?.let { stringAnnotation ->
+                    linkTextState.onClick(stringAnnotation.item)
+                }
             }
         },
     )