Merge pull request #606 from android/jv/jc_touch_target

[Jetcaster] A11y improvements

Author: JolandaVerhoef

Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/category/PodcastCategory.kt

@@ -208,15 +208,17 @@ fun EpisodeListItem(
             contentDescription = stringResource(R.string.cd_play),
             contentScale = ContentScale.Fit,
             colorFilter = ColorFilter.tint(LocalContentColor.current),
-            modifier = Modifier.clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = rememberRipple(bounded = false, radius = 24.dp)
-            ) { /* TODO */ }
-                .size(36.dp)
+            modifier = Modifier
+                .clickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = rememberRipple(bounded = false, radius = 24.dp)
+                ) { /* TODO */ }
+                .size(48.dp)
+                .padding(6.dp)
                 .constrainAs(playIcon) {
                     start.linkTo(parent.start, Keyline1)
-                    top.linkTo(titleImageBarrier, margin = 16.dp)
-                    bottom.linkTo(parent.bottom, 16.dp)
+                    top.linkTo(titleImageBarrier, margin = 10.dp)
+                    bottom.linkTo(parent.bottom, 10.dp)
                 }
         )
 

Jetcaster/app/src/main/java/com/example/jetcaster/util/Buttons.kt

@@ -33,6 +33,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.onClick
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
 import com.example.jetcaster.R
 
@@ -42,9 +44,12 @@ fun ToggleFollowPodcastIconButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier
 ) {
+    val clickLabel = stringResource(if (isFollowed) R.string.cd_unfollow else R.string.cd_follow)
     IconButton(
         onClick = onClick,
-        modifier = modifier
+        modifier = modifier.semantics {
+            onClick(label = clickLabel, action = null)
+        }
     ) {
         Icon(
             // TODO: think about animating these icons
@@ -53,8 +58,8 @@ fun ToggleFollowPodcastIconButton(
                 else -> Icons.Default.Add
             },
             contentDescription = when {
-                isFollowed -> stringResource(R.string.cd_unfollow)
-                else -> stringResource(R.string.cd_follow)
+                isFollowed -> stringResource(R.string.cd_following)
+                else -> stringResource(R.string.cd_not_following)
             },
             tint = animateColorAsState(
                 when {

Jetcaster/app/src/main/res/values/strings.xml

@@ -47,5 +47,7 @@
     <string name="cd_play">Play</string>
     <string name="cd_unfollow">Unfollow</string>
     <string name="cd_follow">Follow</string>
+    <string name="cd_following">Following</string>
+    <string name="cd_not_following">Not following</string>
 
 </resources>