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

carbon-design-system · Jan 20, 2025 · 6dbdc7b · 6dbdc7b
1 parent eb1567a
commit 6dbdc7b
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
@@ -354,14 +354,16 @@
               <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 +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={() => {