From 6dbdc7b5c00b97183d3ccba2c6dbba9d2320fa3d 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 | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index c985a02784..6292bd7125 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -354,6 +354,8 @@
               <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 +363,7 @@
                   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 +476,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 +493,7 @@
                     });
                   }}
                 >
-                  <ChevronRight class="bx--table-expand__svg" />
+                  <ChevronRight aria-hidden="true" class="bx--table-expand__svg" />
                 </button>
               {/if}
             </TableCell>
@@ -554,6 +557,7 @@
 
         {#if expandable}
           <tr
+            id={`expandable-row-${row.id}`}
             data-child-row
             class:bx--expandable-row={true}
             on:mouseenter={() => {