Merge pull request #528 from Automattic/mlumeau/500-what-is-alt-text-link

QuickEditor: Clickable alt text help link brings to support page

Author: mlumeau

gravatar-quickeditor/screenshotTests/roborazzi/com.gravatar.quickeditor.ui.alttext.AltTextPageTest.altTextPageLoaded.png

@@ -2,6 +2,7 @@ package com.gravatar.quickeditor.ui.alttext
 
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -12,11 +13,11 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -28,6 +29,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -48,6 +51,10 @@ import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import java.net.URL
 
+/** Gravatar Alt Text help URL */
+private const val GRAVATAR_ALT_TEXT_HELP_URL: String =
+    "https://support.gravatar.com/profiles/avatars/#add-alt-text-to-avatars"
+
 @Composable
 internal fun AltTextPage(
     email: String,
@@ -118,6 +125,8 @@ internal fun AltTextPage(
     onEvent: (AltTextEvent) -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val uriHandler = LocalUriHandler.current
+
     Surface(modifier = modifier.fillMaxWidth()) {
         Box(
             modifier = Modifier
@@ -138,9 +147,13 @@ internal fun AltTextPage(
                         title = stringResource(R.string.gravatar_qe_avatar_alt_text_section_title),
                         modifier = Modifier,
                     )
-                    Text(
-                        text = stringResource(id = R.string.gravatar_qe_avatar_alt_text_section_what_is),
-                        color = MaterialTheme.colorScheme.primary,
+                    Icon(
+                        painter = painterResource(id = R.drawable.gravatar_alt_text_help),
+                        tint = MaterialTheme.colorScheme.primary,
+                        contentDescription = stringResource(id = R.string.gravatar_qe_avatar_alt_text_section_what_is),
+                        modifier = Modifier.clickable {
+                            uriHandler.openUri(GRAVATAR_ALT_TEXT_HELP_URL)
+                        },
                     )
                 }
 

gravatar-quickeditor/screenshotTests/roborazzi/com.gravatar.quickeditor.ui.alttext.AltTextPageTest.altTextPageLoadedDark.png

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="18dp"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+  <path
+      android:pathData="M6.75,7.25C6.75,6.007 7.757,5 9,5C10.243,5 11.25,6.007 11.25,7.25C11.25,8.408 10.375,9.362 9.25,9.486C9.112,9.501 9,9.612 9,9.75V11M9,12V13.5M17,9C17,13.418 13.418,17 9,17C4.582,17 1,13.418 1,9C1,4.582 4.582,1 9,1C13.418,1 17,4.582 17,9Z"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#101517"/>
+</vector>