Bugfix/table cells interactive focusable (#2194)

skeletonlabs · Nov 7, 2023 · a85483d · a85483d
1 parent 54c5fba
commit a85483d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/rich-squids-decide.md b/.changeset/rich-squids-decide.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: table cells are not focusable when `interactive` is not set.
diff --git a/packages/skeleton/src/lib/components/Table/Table.svelte b/packages/skeleton/src/lib/components/Table/Table.svelte
@@ -68,15 +68,15 @@
 	<table
 		class="{classesTable}"
 		class:table-interactive={interactive}
-		role="grid"
+		role={interactive ? "grid" : "table"}
 		use:tableA11y
 	>
 		<!-- on:keydown={(e) => onTableKeydown(elemTable, e)} -->
 		<!-- Head -->
 		<thead class="table-head {regionHead}">
 			<tr>
 				{#each source.head as heading }
-					<th class="{regionHeadCell}">{@html heading}</th>
+					<th class="{regionHeadCell}" role="columnheader">{@html heading}</th>
 				{/each}
 			</tr>
 		</thead>
@@ -95,9 +95,9 @@
 						<!-- prettier-ignore -->
 						<td
 							class="{regionCell}"
-							role="gridcell"
+							role={interactive ? "gridcell" : "cell"}
 							aria-colindex={cellIndex + 1}
-							tabindex={cellIndex === 0 ? 0 : -1}
+							tabindex={cellIndex === 0 && interactive ? 0 : -1}
 						>
 							{@html Number(cell) === 0 ? cell : (cell ? cell : '-')}
 						</td>