fix(data-table): improve expandable accessibility (#2086)

Author: metonym

src/DataTable/DataTable.svelte

@@ -354,14 +354,21 @@
               <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 : [];
 
                   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={() => {