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 (#2086)

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

16
src/DataTable/DataTable.svelte
View file

@ -354,6 +354,10 @@
<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 : [];
@ -361,7 +365,10 @@
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>
@ -476,6 +483,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"}
@ -492,7 +500,10 @@
}); });
}} }}
> >
<ChevronRight class="bx--table-expand__svg" /> <ChevronRight
aria-hidden="true"
class="bx--table-expand__svg"
/>
</button> </button>
{/if} {/if}
</TableCell> </TableCell>
@ -560,6 +571,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={() => {