GOVUKAPP-1037: User removes all topics (#159)

* Display empty selected topics message * Add onclick to feedback prompt widget semantics to ensure correct talkback announcement
alphagov · Dec 23, 2024 · b52e2e7 · b52e2e7
1 parent cb22129
commit b52e2e7
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 8 deletions.
diff --git a/feature/settings/src/main/kotlin/uk/govuk/app/settings/ui/FeedbackPromptWidget.kt b/feature/settings/src/main/kotlin/uk/govuk/app/settings/ui/FeedbackPromptWidget.kt
@@ -6,6 +6,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.onClick
 import androidx.compose.ui.tooling.preview.Preview
 import uk.govuk.app.design.ui.component.HomeNavigationCard
 import uk.govuk.app.design.ui.theme.GovUkTheme
@@ -26,6 +27,7 @@ fun FeedbackPromptWidget(
             .focusable()
             .clearAndSetSemantics {
                 contentDescription = altText
+                onClick(label = null, action = null)
             },
         isSelected = true
     )

diff --git a/feature/topics/src/main/kotlin/uk/govuk/app/topics/ui/widget/TopicsWidget.kt b/feature/topics/src/main/kotlin/uk/govuk/app/topics/ui/widget/TopicsWidget.kt
@@ -4,6 +4,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -16,6 +17,7 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.hilt.navigation.compose.hiltViewModel
 import uk.govuk.app.design.ui.component.BodyBoldLabel
+import uk.govuk.app.design.ui.component.BodyRegularLabel
 import uk.govuk.app.design.ui.component.CompactButton
 import uk.govuk.app.design.ui.component.Title3BoldLabel
 import uk.govuk.app.design.ui.theme.GovUkTheme
@@ -89,15 +91,24 @@ private fun TopicsWidgetContent(
             }
         }
 
-        TopicsGrid(
-            topics = topics,
-        ) { modifier, topic ->
-            TopicVerticalCard(
-                icon = topic.icon,
-                title = topic.title,
-                onClick = { onTopicClick(topic.ref, topic.title) },
-                modifier = modifier
+        if (topics.isEmpty()) {
+            BodyRegularLabel(
+                text = stringResource(R.string.empty_topics),
+                modifier = Modifier
+                    .align(Alignment.CenterHorizontally)
+                    .padding(vertical = GovUkTheme.spacing.small)
             )
+        } else {
+            TopicsGrid(
+                topics = topics,
+            ) { modifier, topic ->
+                TopicVerticalCard(
+                    icon = topic.icon,
+                    title = topic.title,
+                    onClick = { onTopicClick(topic.ref, topic.title) },
+                    modifier = modifier
+                )
+            }
         }
 
         if (displayShowAll) {
@@ -160,4 +171,19 @@ private fun TopicsWidgetPreview() {
             onAllClick = { }
         )
     }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun TopicsWidgetEmptyTopicsPreview() {
+    GovUkTheme {
+        TopicsWidgetContent(
+            topics = emptyList(),
+            isCustomised = true,
+            displayShowAll = true,
+            onTopicClick = { _, _ -> },
+            onEditClick = { },
+            onAllClick = { }
+        )
+    }
 }
diff --git a/feature/topics/src/main/res/values/strings.xml b/feature/topics/src/main/res/values/strings.xml
@@ -21,6 +21,7 @@
     <string name="skipButton">Skip</string>
     <string name="removed_alt_text">Removed</string>
     <string name="selected_alt_text">Selected</string>
+    <string name="empty_topics">No topics selected</string>
 
     <!-- Topic names -->
     <string name="benefits">Benefits</string>