From d0d84060cd3c6747a03a6874f60ececc6391e2f9 Mon Sep 17 00:00:00 2001
From: Cyrine Ben Romdhane <135605630+anicyne@users.noreply.github.com>
Date: Mon, 5 Aug 2024 08:34:36 +0200
Subject: [PATCH] Add keyboard navigation in table-stateless

Refs: #6567
---
 .../components/table-stateless/component.tsx  | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/table-stateless/component.tsx b/packages/components/src/components/table-stateless/component.tsx
index b1c61a7bb0..38898be190 100644
--- a/packages/components/src/components/table-stateless/component.tsx
+++ b/packages/components/src/components/table-stateless/component.tsx
@@ -1,5 +1,5 @@
 import type { JSX } from '@stencil/core';
-import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
 
 import type {
 	KoliBriTableCell,
@@ -55,6 +55,8 @@ export class KolTableStateless implements TableStatelessAPI {
 	private cellsToRenderTimeouts = new Map<HTMLElement, ReturnType<typeof setTimeout>>();
 	private dataToKeyMap = new Map<KoliBriTableDataType, string>();
 
+	private checkboxRefs: HTMLKolInputCheckboxElement[] = [];
+
 	@State()
 	private tableDivElementHasScrollbar = false;
 
@@ -136,6 +138,26 @@ export class KolTableStateless implements TableStatelessAPI {
 		validateTableSelection(this, value);
 	}
 
+	@Listen('keydown')
+	public handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+			const focusedElement = this.host?.shadowRoot?.activeElement as HTMLKolInputCheckboxElement;
+			let index = this.checkboxRefs.indexOf(focusedElement);
+			console.log(focusedElement);
+
+			if (focusedElement && this.checkboxRefs.includes(focusedElement))
+				if (event.key === 'ArrowDown') {
+					event.preventDefault();
+					index = (index + 1) % this.checkboxRefs.length;
+					this.checkboxRefs[index].focus();
+				} else if (event.key === 'ArrowUp') {
+					event.preventDefault();
+					index = (index - 1) % this.checkboxRefs.length;
+					this.checkboxRefs[index].focus();
+				}
+		}
+	}
+
 	public componentDidRender(): void {
 		this.checkDivElementScrollbar();
 	}
@@ -391,6 +413,7 @@ export class KolTableStateless implements TableStatelessAPI {
 		return (
 			<td key={`tbody-${rowIndex}-selection`} class="selection-cell">
 				<KolInputCheckboxTag
+					ref={(el) => el && this.checkboxRefs.push(el)}
 					_label={label}
 					_hideLabel
 					_checked={selected}