[A11y] Increase touch target of list items nested in tables (#1174)

* Add bottom margin

* Add story with list in table

Author: sehyunidaaa

packages/components/src/templates/next/components/native/Table/Table.stories.tsx

@@ -2025,3 +2025,125 @@ export const NestedColumns: Story = {
     ],
   },
 }
+
+export const ListInTable: Story = {
+  args: {
+    attrs: {
+      caption: "Resources for the scheme",
+    },
+    content: [
+      {
+        type: "tableRow",
+        content: [
+          {
+            type: "tableHeader",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Category" }],
+              },
+            ],
+          },
+          {
+            type: "tableHeader",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Files for download" }],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: "tableRow",
+        content: [
+          {
+            type: "tableCell",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Files for everyone" }],
+              },
+            ],
+          },
+          {
+            type: "tableCell",
+            content: [
+              {
+                type: "paragraph",
+                content: [
+                  {
+                    type: "text",
+                    text: "Here are some files you can download:",
+                  },
+                ],
+              },
+              {
+                type: "unorderedList",
+                content: [
+                  {
+                    type: "listItem",
+                    content: [
+                      {
+                        type: "paragraph",
+                        content: [
+                          {
+                            type: "text",
+                            text: "<a href='https://google.com'>A long file name that's available for download [PDF, 2MB]</a>",
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    type: "listItem",
+                    content: [
+                      {
+                        type: "paragraph",
+                        content: [
+                          {
+                            type: "text",
+                            text: "<a href='https://google.com'>An even longer file name that's available for download [PDF, 2MB]</a>",
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    type: "listItem",
+                    content: [
+                      {
+                        type: "paragraph",
+                        content: [
+                          {
+                            type: "text",
+                            text: "<a href='https://google.com'>A long file name that's available for download [PDF, 2MB]</a>",
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    type: "listItem",
+                    content: [
+                      {
+                        type: "paragraph",
+                        content: [
+                          {
+                            type: "text",
+                            text: "<a href='https://google.com'>A very very very long file name that's available for download [PDF, 2MB]</a>",
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

packages/components/src/templates/next/components/native/Table/Table.tsx

@@ -9,7 +9,7 @@ import Paragraph from "../Paragraph"
 import UnorderedList from "../UnorderedList"
 
 const tableCellStyles = tv({
-  base: "max-w-40 break-words border border-base-divider-medium px-4 py-3 align-top [&_li]:my-0 [&_li]:pl-1 [&_ol]:mt-0 [&_ol]:ps-5 [&_ul]:mt-0 [&_ul]:ps-5",
+  base: "max-w-40 break-words border border-base-divider-medium px-4 py-3 align-top [&_li]:mb-4 [&_li]:mt-0 [&_li]:pl-1 [&_ol]:mt-0 [&_ol]:ps-5 [&_ul]:mt-0 [&_ul]:ps-5",
   variants: {
     isHeader: {
       true: "bg-base-canvas-backdrop [&_ol]:prose-label-md-medium [&_p]:prose-label-md-medium",