From fe3652212a69d4646ac733f1319d8560d6bbe100 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 19 Jan 2025 16:24:03 -0800
Subject: [PATCH] fix(data-table): improve `expandable` accessibility (#2086)

---
 src/DataTable/DataTable.svelte | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index c985a027..0519aaa8 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -354,6 +354,10 @@
               <button
                 type="button"
                 class:bx--table-expand__button={true}
+                aria-label={expanded ? "Collapse all rows" : "Expand all rows"}
+                aria-controls={expandableRowIds
+                  .map((id) => `expandable-row-${id}`)
+                  .join(" ")}
                 on:click={() => {
                   expanded = !expanded;
                   expandedRowIds = expanded ? expandableRowIds : [];
@@ -361,7 +365,10 @@
                   dispatch("click:header--expand", { expanded });
                 }}
               >
-                <ChevronRight class="bx--table-expand__svg" />
+                <ChevronRight
+                  aria-hidden="true"
+                  class="bx--table-expand__svg"
+                />
               </button>
             {/if}
           </th>
@@ -474,6 +481,7 @@
                 <button
                   type="button"
                   class:bx--table-expand__button={true}
+                  aria-controls={`expandable-row-${row.id}`}
                   aria-label={expandedRows[row.id]
                     ? "Collapse current row"
                     : "Expand current row"}
@@ -490,7 +498,10 @@
                     });
                   }}
                 >
-                  <ChevronRight class="bx--table-expand__svg" />
+                  <ChevronRight
+                    aria-hidden="true"
+                    class="bx--table-expand__svg"
+                  />
                 </button>
               {/if}
             </TableCell>
@@ -554,6 +565,7 @@
 
         {#if expandable}
           <tr
+            id={`expandable-row-${row.id}`}
             data-child-row
             class:bx--expandable-row={true}
             on:mouseenter={() => {