mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(data-table): improve expandable accessibility

Browse source
This commit is contained in:
Eric Liu 2025-01-19 16:19:45 -08:00
commit 92ae85eb00
1 changed files with 6 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/DataTable/DataTable.svelte
View file

@ -350,6 +350,8 @@
<button <button
type="button" type="button"
class:bx--table-expand__button={true} 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={() => { on:click={() => {
expanded = !expanded; expanded = !expanded;
expandedRowIds = expanded ? expandableRowIds : []; expandedRowIds = expanded ? expandableRowIds : [];
@ -357,7 +359,7 @@
dispatch("click:header--expand", { expanded }); dispatch("click:header--expand", { expanded });
}} }}
> >
<ChevronRight class="bx--table-expand__svg" /> <ChevronRight aria-hidden="true" class="bx--table-expand__svg" />
</button> </button>
{/if} {/if}
</th> </th>
@ -470,6 +472,7 @@
<button <button
type="button" type="button"
class:bx--table-expand__button={true} class:bx--table-expand__button={true}
aria-controls={`expandable-row-${row.id}`}
aria-label={expandedRows[row.id] aria-label={expandedRows[row.id]
? "Collapse current row" ? "Collapse current row"
: "Expand current row"} : "Expand current row"}
@ -486,7 +489,7 @@
}); });
}} }}
> >
<ChevronRight class="bx--table-expand__svg" /> <ChevronRight aria-hidden="true" class="bx--table-expand__svg" />
</button> </button>
{/if} {/if}
</TableCell> </TableCell>
@ -550,6 +553,7 @@
{#if expandable} {#if expandable}
<tr <tr
id={`expandable-row-${row.id}`}
data-child-row data-child-row
class:bx--expandable-row={true} class:bx--expandable-row={true}
on:mouseenter={() => { on:mouseenter={() => {