Merge pull request #21445 from wordpress-mobile/issue/21444-personali…

…zation-accessibility Personalization accessibility
wordpress-mobile · Nov 13, 2024 · bf81edf · bf81edf
2 parents 700baba + e5d90e9
commit bf81edf
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/.../src/main/java/org/wordpress/android/ui/mysite/personalization/PersonalizationActivity.kt b/.../src/main/java/org/wordpress/android/ui/mysite/personalization/PersonalizationActivity.kt
@@ -6,6 +6,7 @@ import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.Image
 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
@@ -45,6 +46,7 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -247,15 +249,27 @@ fun DashboardCardStateRow(
     onCardToggled: (cardType: CardType, enabled: Boolean) -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Column(modifier = modifier.fillMaxWidth()) {
+    val title = stringResource(id = cardState.title)
+    val label = stringResource(id = R.string.personalization_screen_card_accessibility_label, title)
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .clickable(onClickLabel = label) {
+                onCardToggled(cardState.cardType, !cardState.enabled)
+            }
+            .semantics(
+                mergeDescendants = true,
+            ) { },
+    ) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(
                     start = 16.dp,
                     end = 16.dp
                 ),
-            verticalAlignment = Alignment.CenterVertically
+            verticalAlignment = Alignment.CenterVertically,
         ) {
             Column(
                 modifier = Modifier
@@ -279,7 +293,10 @@ fun DashboardCardStateRow(
                     onCardToggled(cardState.cardType, it)
                 },
                 modifier = Modifier
-                    .weight(.1f),
+                    .clickable(onClickLabel = label) {
+                        onCardToggled(cardState.cardType, !cardState.enabled)
+                    }
+                    .weight(.1f)
             )
         }
         HorizontalDivider(
@@ -318,7 +335,7 @@ fun ShortcutStateRow(
         ) {
             Image(
                 painter = painterResource(id = state.icon),
-                contentDescription = null, // Add appropriate content description
+                contentDescription = uiStringText(state.label),
                 contentScale = ContentScale.Fit,
                 modifier = Modifier
                     .size(24.dp)
@@ -347,7 +364,8 @@ fun ShortcutStateRow(
                     painter = painterResource(id = actionIcon),
                     tint = actionIconTint,
                     contentDescription = stringResource(
-                        R.string.personalization_screen_shortcuts_add_or_remove_shortcut_button
+                        R.string.personalization_screen_shortcuts_accessibility_label,
+                        uiStringText(state.label)
                     ),
                 )
             }

diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml
@@ -4846,7 +4846,8 @@ translators: %s: Select control option value e.g: "Auto, 25%". -->
     <string name="personalization_screen_activity_log_card_description">Recent actions taken on your site.</string>
     <string name="personalization_screen_next_steps_card_title" translatable="false">@string/quick_start_sites</string>
     <string name="personalization_screen_next_steps_card_description">Learn how to make the most of your site with the app.</string>
-    <string name="personalization_screen_shortcuts_add_or_remove_shortcut_button">Add or Remove shortcuts</string>
+    <string name="personalization_screen_card_accessibility_label">Toggle %s card</string>
+    <string name="personalization_screen_shortcuts_accessibility_label">Toggle %s shortcut</string>
 
     <string name="my_site_dashboard_no_cards_message_title">All cards are hidden</string>
     <string name="my_site_dashboard_no_cards_message_description">Tap the personalise button to show more cards.</string>