From a85483d96afaf0b8c32c9f19baa7e55f7ad1dd2f Mon Sep 17 00:00:00 2001
From: Mahmoud Zino <74062808+Mahmoud-zino@users.noreply.github.com>
Date: Wed, 8 Nov 2023 00:58:39 +0100
Subject: [PATCH] Bugfix/table cells interactive focusable (#2194)

---
 .changeset/rich-squids-decide.md                        | 5 +++++
 packages/skeleton/src/lib/components/Table/Table.svelte | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/rich-squids-decide.md

diff --git a/.changeset/rich-squids-decide.md b/.changeset/rich-squids-decide.md
new file mode 100644
index 000000000..b250a87d2
--- /dev/null
+++ 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
index 995f75271..7a2308ff5 100644
--- a/packages/skeleton/src/lib/components/Table/Table.svelte
+++ b/packages/skeleton/src/lib/components/Table/Table.svelte
@@ -68,7 +68,7 @@
 	<table
 		class="{classesTable}"
 		class:table-interactive={interactive}
-		role="grid"
+		role={interactive ? "grid" : "table"}
 		use:tableA11y
 	>
 		<!-- on:keydown={(e) => onTableKeydown(elemTable, e)} -->
@@ -76,7 +76,7 @@
 		<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>