From 0c6b3b53ddc29423548d77adb37d6f6083fed131 Mon Sep 17 00:00:00 2001
From: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com>
Date: Wed, 27 Nov 2024 21:50:36 +0530
Subject: [PATCH]  Refactor keyboard grid navigation for JSDialog dropdowns

- Made `KeyboardGridNavigation` callable directly from JSDialog dropdowns, removing the need for explicit bindings.
- Separated grid and list selection logic into dedicated files.
- Streamlined navigation logic to handle only navigation, simplifying callback management.
 -Refactored navigation to focus solely on movement logic, removing selection handling.
- Simplified callback management by decoupling selection logic, improving maintainability.

Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com>
Change-Id: I8e34ddaf44a79eecf57a428f7ed90c6a399d93c2
---
 .../jsdialog/Util.KeyboardGridNavigation.ts   | 34 +++++++------------
 .../control/jsdialog/Widget.ColorPicker.ts    | 17 +++++-----
 2 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/browser/src/control/jsdialog/Util.KeyboardGridNavigation.ts b/browser/src/control/jsdialog/Util.KeyboardGridNavigation.ts
index bb1a6cca8518..f7c73eb49a39 100644
--- a/browser/src/control/jsdialog/Util.KeyboardGridNavigation.ts
+++ b/browser/src/control/jsdialog/Util.KeyboardGridNavigation.ts
@@ -19,18 +19,8 @@ function handleKeyboardNavigation(
 	event: KeyboardEvent,
 	currentElement: HTMLElement,
 	parentContainer: HTMLElement,
-	handleSelection?: any,
-	builder?: any,
-	widgetData?: any,
 ) {
 	switch (event.key) {
-		case 'Enter':
-		case ' ':
-			if (handleSelection && !(currentElement instanceof HTMLSelectElement)) {
-				handleSelection(currentElement, builder, widgetData);
-				event.preventDefault();
-			}
-			break;
 		case 'ArrowRight':
 			moveFocus(parentContainer, currentElement, 'next', 'horizontal');
 			event.preventDefault();
@@ -93,6 +83,16 @@ function moveFocus(
 		} else {
 			targetRow--;
 		}
+
+		// If the target column does not exist in the target row, move to the last column in the target row
+		const elementsInTargetRow = focusableElements.filter(
+			(el) => getRowColumn(el)[0] === targetRow,
+		);
+		if (elementsInTargetRow.length > 0) {
+			if (targetColumn >= elementsInTargetRow.length) {
+				targetColumn = elementsInTargetRow.length - 1;
+			}
+		}
 	}
 
 	const targetElement = focusableElements.find(
@@ -103,10 +103,10 @@ function moveFocus(
 	if (targetElement) {
 		targetElement.focus();
 	} else {
-		// Determine the element to pass to FindFocusableElement based on axis and direction
+		// Handle edge cases by moving to adjacent sibling elements if no exact match is found
 		const potentialCurrentElement =
 			axis === 'vertical' ? parentContainer : currentElement;
-		// if vertical or
+
 		const nextElement =
 			direction === 'next'
 				? JSDialog.FindFocusableElement(
@@ -130,12 +130,7 @@ function getRowColumn(element: HTMLElement): [number, number] {
 	return [row, column];
 }
 
-JSDialog.KeyboardGridNavigation = function (
-	container: HTMLElement,
-	selectionHandler?: any,
-	builder?: any,
-	widgetData?: any,
-) {
+JSDialog.KeyboardGridNavigation = function (container: HTMLElement) {
 	container.addEventListener('keydown', (event: KeyboardEvent) => {
 		const activeElement = document.activeElement as HTMLElement;
 		if (!JSDialog.IsTextInputField(activeElement)) {
@@ -143,9 +138,6 @@ JSDialog.KeyboardGridNavigation = function (
 				event,
 				activeElement,
 				activeElement.parentElement,
-				selectionHandler,
-				builder,
-				widgetData,
 			);
 		}
 	});
diff --git a/browser/src/control/jsdialog/Widget.ColorPicker.ts b/browser/src/control/jsdialog/Widget.ColorPicker.ts
index 47b26a8facbe..ac0374228f1f 100644
--- a/browser/src/control/jsdialog/Widget.ColorPicker.ts
+++ b/browser/src/control/jsdialog/Widget.ColorPicker.ts
@@ -117,6 +117,15 @@ function createColor(
 			widgetData, // Pass the widget data
 		);
 	});
+	color.addEventListener('keydown', (event: KeyboardEvent) => {
+		if (event.code === 'Enter') {
+			handleColorSelection(
+				event.target as HTMLElement, // The clicked element
+				builder, // Pass the builder object
+				widgetData, // Pass the widget data
+			);
+		}
+	});
 	return color;
 }
 
@@ -377,14 +386,6 @@ JSDialog.colorPicker = function (
 		);
 	});
 
-	// Apply keyboard navigation to the color picker widget
-	JSDialog.KeyboardGridNavigation(
-		container,
-		handleColorSelection,
-		builder,
-		data,
-	);
-
 	JSDialog.MakeFocusCycle(container);
 
 	return false;