Add more context to list item tick icons

.design-system-version

@@ -1 +1 @@
-70.0.2
+70.0.5

app/jinja_filters.py

@@ -711,6 +711,7 @@ def map_list_collector_config(
 
         row_item = {
             "iconType": icon,
+            "iconVisuallyHiddenText": "Completed" if icon else None,
             "actions": actions,
             "id": list_item.get("list_item_id"),
             "rowTitleAttributes": {

tests/app/test_jinja_filters.py

@@ -534,6 +534,7 @@ def test_map_list_collector_config_no_actions():
             "rowItems": [
                 {
                     "actions": [],
+                    "iconVisuallyHiddenText": None,
                     "iconType": None,
                     "id": "one",
                     "rowTitleAttributes": {
@@ -548,6 +549,7 @@ def test_map_list_collector_config_no_actions():
             "rowItems": [
                 {
                     "actions": [],
+                    "iconVisuallyHiddenText": None,
                     "iconType": None,
                     "id": "two",
                     "rowTitleAttributes": {
@@ -605,6 +607,7 @@ def test_map_list_collector_config():
                             "url": "/primary/change",
                         }
                     ],
+                    "iconVisuallyHiddenText": None,
                     "iconType": None,
                     "id": "primary",
                     "rowTitleAttributes": {
@@ -633,6 +636,7 @@ def test_map_list_collector_config():
                         },
                     ],
                     "iconType": None,
+                    "iconVisuallyHiddenText": None,
                     "id": "nonprimary",
                     "rowTitleAttributes": {
                         "data-list-item-id": "nonprimary",
@@ -727,6 +731,7 @@ def test_map_list_collector_config_with_related_answers_and_answer_title():
                             "url": "/nonprimary/remove",
                         },
                     ],
+                    "iconVisuallyHiddenText": None,
                     "iconType": None,
                     "id": "VHoiow",
                     "rowTitle": "Name of UK company or branch",
@@ -1022,6 +1027,7 @@ def test_summary_item_config_with_list_collector():
                             "url": "remove_link_url",
                         },
                     ],
+                    "iconVisuallyHiddenText": None,
                     "iconType": None,
                     "id": "vmmPmD",
                     "rowTitle": "Company A",
@@ -1181,6 +1187,7 @@ def test_summary_item_config_with_list_collector_and_one_related_answer():
                             "url": "remove_link_url",
                         },
                     ],
+                    "iconVisuallyHiddenText": None,
                     "iconType": None,
                     "id": "vmmPmD",
                     "rowTitle": "Company A",
@@ -1282,5 +1289,59 @@ def test_summary_item_config_with_list_collector_and_one_related_answer():
     assert to_dict(expected) == to_dict(result)
 
 
+def test_map_list_collector_config_render_icon_set():
+    list_items = [
+        {
+            "item_title": "Mark Bloggs",
+            "list_item_id": "one",
+            "repeating_blocks": True,
+            "is_complete": True,
+        },
+        {
+            "item_title": "Joe Bloggs",
+            "list_item_id": "two",
+            "repeating_block": True,
+            "is_complete": False,
+        },
+    ]
+
+    output = map_list_collector_config(list_items, editable=True, render_icon=True)
+
+    expected = [
+        {
+            "rowItems": [
+                {
+                    "actions": [],
+                    "iconVisuallyHiddenText": "Completed",
+                    "iconType": "check",
+                    "id": "one",
+                    "rowTitleAttributes": {
+                        "data-list-item-id": "one",
+                        "data-qa": "list-item-1-label",
+                    },
+                    "rowTitle": "Mark Bloggs",
+                }
+            ]
+        },
+        {
+            "rowItems": [
+                {
+                    "actions": [],
+                    "iconVisuallyHiddenText": None,
+                    "iconType": None,
+                    "id": "two",
+                    "rowTitleAttributes": {
+                        "data-list-item-id": "two",
+                        "data-qa": "list-item-2-label",
+                    },
+                    "rowTitle": "Joe Bloggs",
+                }
+            ]
+        },
+    ]
+
+    assert output == expected
+
+
 def to_dict(obj):
     return json.loads(json.dumps(obj, default=lambda o: o.__dict__))

tests/functional/helpers.js

@@ -2,7 +2,11 @@ export const checkItemsInList = async (itemsExpected, listLabel) => {
   await $(listLabel(1)).waitForDisplayed();
 
   for (let i = 1; i <= itemsExpected.length; i++) {
-    await expect(await $(listLabel(i)).getText()).toEqual(itemsExpected[i - 1]);
+    let text = await $(listLabel(i)).getText();
+    if (text.includes("Completed")) {
+      text = text.replace("Completed\n", "");
+    }
+    $(text).isEqual(itemsExpected[i - 1]);
   }
 };
 

tests/functional/spec/features/repeating_blocks/list_collector_repeating_blocks.spec.js

@@ -96,7 +96,7 @@ describe("List Collector Repeating Blocks", () => {
       await $(AnyOtherCompaniesOrBranchesPage.listEditLink(2)).click();
       await $(EditCompanyPage.companyOrBranchName()).setValue("Government");
       await click(EditCompanyPage.submit());
-      await expect(await $(AnyOtherCompaniesOrBranchesPage.listLabel(2)).getText()).toBe("Government");
+      await checkItemsInList(["ONS", "GOV", "Government"], AnyOtherCompaniesOrBranchesPage.listLabel);
     });
 
     it("When the user clicks the remove link, Then the item selected is removed", async () => {
@@ -105,7 +105,6 @@ describe("List Collector Repeating Blocks", () => {
       await click(RemoveCompanyPage.submit());
       await checkItemsInList(["ONS", "MOD"], AnyOtherCompaniesOrBranchesPage.listLabel);
       await expect(await $(AnyOtherCompaniesOrBranchesPage.listLabel(2)).getText()).not.toContain("Government");
-      await expect(await $(AnyOtherCompaniesOrBranchesPage.listLabel(2)).getText()).toBe("MOD");
     });
 
     it("When a user has finished editing or removing from the list, Then they are still able to add additional companies", async () => {