Skip to content

Commit

Permalink
fix: add rowgroup to tables
Browse files Browse the repository at this point in the history 
Lint re-formatting makes it look like a big change, but it's just the addition
of <div role="rowgroup"> elements around header row and data rows as described
here: https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/table/

Part of #4967.

Signed-off-by: Tim deBoer <git@tdeboer.ca>
  • Loading branch information
@deboer-tim
deboer-tim committed Nov 28, 2023
1 parent dd1ccda commit 1748e35
Showing 1 changed file with 55 additions and 51 deletions.
106 changes: 55 additions & 51 deletions packages/renderer/src/lib/table/Table.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,70 +123,74 @@ function setGridColumns() {

<div class="w-full" class:hidden="{data.length === 0}" role="table">
<!-- Table header -->
<div
class="grid grid-table gap-x-0.5 mx-5 h-7 sticky top-0 bg-charcoal-700 text-xs text-gray-600 font-bold uppercase z-[2]"
role="row">
<div class="whitespace-nowrap justify-self-start" role="columnheader"></div>
{#if row.info.selectable}
<div class="whitespace-nowrap place-self-center" role="columnheader">
<Checkbox
title="Toggle all"
bind:checked="{selectedAllCheckboxes}"
indeterminate="{selectedItemsNumber > 0 && !selectedAllCheckboxes}"
on:click="{event => toggleAll(event.detail)}" />
</div>
{/if}
{#each columns as column}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-interactive-supports-focus -->
<div
class="whitespace-nowrap {column.info.align === 'right'
? 'justify-self-end'
: column.info.align === 'center'
? 'justify-self-center'
: 'justify-self-start'} self-center"
on:click="{() => sort(column)}"
role="columnheader">
{column.title}{#if column.info.comparator}<i
class="fas pl-0.5"
class:fa-sort="{sortCol !== column}"
class:fa-sort-up="{sortCol === column && sortAscending}"
class:fa-sort-down="{sortCol === column && !sortAscending}"
class:text-charcoal-200="{sortCol !== column}"
aria-hidden="true"></i
>{/if}
</div>
{/each}
</div>
<!-- Table body -->
{#each data as object (object)}
<div role="rowgroup">
<div
class="grid grid-table gap-x-0.5 mx-5 h-12 bg-charcoal-800 hover:bg-zinc-700 rounded-lg mb-2"
animate:flip="{{ duration: 300 }}"
class="grid grid-table gap-x-0.5 mx-5 h-7 sticky top-0 bg-charcoal-700 text-xs text-gray-600 font-bold uppercase z-[2]"
role="row">
<div class="whitespace-nowrap justify-self-start" role="cell"></div>
<div class="whitespace-nowrap justify-self-start" role="columnheader"></div>
{#if row.info.selectable}
<div class="whitespace-nowrap place-self-center" role="cell">
<div class="whitespace-nowrap place-self-center" role="columnheader">
<Checkbox
title="Toggle {kind}"
bind:checked="{object.selected}"
disabled="{!row.info.selectable(object)}"
disabledTooltip="{row.info.disabledText}" />
title="Toggle all"
bind:checked="{selectedAllCheckboxes}"
indeterminate="{selectedItemsNumber > 0 && !selectedAllCheckboxes}"
on:click="{event => toggleAll(event.detail)}" />
</div>
{/if}
{#each columns as column}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-interactive-supports-focus -->
<div
class="whitespace-nowrap {column.info.align === 'right'
? 'justify-self-end'
: column.info.align === 'center'
? 'justify-self-center'
: 'justify-self-start'} self-center overflow-hidden max-w-full"
role="cell">
{#if column.info.renderer}
<svelte:component this="{column.info.renderer}" object="{object}" />
{/if}
: 'justify-self-start'} self-center"
on:click="{() => sort(column)}"
role="columnheader">
{column.title}{#if column.info.comparator}<i
class="fas pl-0.5"
class:fa-sort="{sortCol !== column}"
class:fa-sort-up="{sortCol === column && sortAscending}"
class:fa-sort-down="{sortCol === column && !sortAscending}"
class:text-charcoal-200="{sortCol !== column}"
aria-hidden="true"></i
>{/if}
</div>
{/each}
</div>
{/each}
</div>
<!-- Table body -->
<div role="rowgroup">
{#each data as object (object)}
<div
class="grid grid-table gap-x-0.5 mx-5 h-12 bg-charcoal-800 hover:bg-zinc-700 rounded-lg mb-2"
animate:flip="{{ duration: 300 }}"
role="row">
<div class="whitespace-nowrap justify-self-start" role="cell"></div>
{#if row.info.selectable}
<div class="whitespace-nowrap place-self-center" role="cell">
<Checkbox
title="Toggle {kind}"
bind:checked="{object.selected}"
disabled="{!row.info.selectable(object)}"
disabledTooltip="{row.info.disabledText}" />
</div>
{/if}
{#each columns as column}
<div
class="whitespace-nowrap {column.info.align === 'right'
? 'justify-self-end'
: column.info.align === 'center'
? 'justify-self-center'
: 'justify-self-start'} self-center overflow-hidden max-w-full"
role="cell">
{#if column.info.renderer}
<svelte:component this="{column.info.renderer}" object="{object}" />
{/if}
</div>
{/each}
</div>
{/each}
</div>
</div>

0 comments on commit 1748e35

Please sign in to comment.