mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +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
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 : [];
@ -357,7 +359,7 @@
dispatch("click:header--expand", { expanded });
}}
>
<ChevronRight class="bx--table-expand__svg" />
<ChevronRight aria-hidden="true" class="bx--table-expand__svg" />
</button>
{/if}
</th>
@ -470,6 +472,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"}
@ -486,7 +489,7 @@
});
}}
>
<ChevronRight class="bx--table-expand__svg" />
<ChevronRight aria-hidden="true" class="bx--table-expand__svg" />
</button>
{/if}
</TableCell>
@ -550,6 +553,7 @@
{#if expandable}
<tr
id={`expandable-row-${row.id}`}
data-child-row
class:bx--expandable-row={true}
on:mouseenter={() => {