Add keyboard navigation for shapes and connectors

- Keyboard navigation for shapes and connectors in the dialog.
- Adjust the dialog structure to integrate seamlessly with the existing keyboard navigation patch.
- Allow the InsertShape function to accept dynamic row width by passing the number of elements per row from the calling function.
- This ensures the layout adapts dynamically based on the available space.
- This update enhances accessibility and provides greater flexibility in handling dynamic layouts.

Signed-off-by: Darshan-upadhyay1110 <[email protected]>
Change-Id: I9bba54f576dc92e472a8fba03d659d7df647bfd1

browser/css/toolbar.css

@@ -1483,6 +1483,8 @@ button.leaflet-control-search-next
 	position: static;
 	text-align: left;
 	display: flex;
+	max-width: 360px;
+	flex-wrap: wrap;
 }
 
 .insertshape-grid.insertconnectors .row {

browser/src/control/Control.Toolbar.js

@@ -538,12 +538,10 @@ var onShapeKeyDownFunction = function(event) {
 		closePopup();
 		app.map.focus();
 	}
-	event.stopPropagation();
 };
 
-function insertShapes(shapeType, grid = document.getElementsByClassName('insertshape-grid')[0]) {
+function insertShapes(shapeType, grid = document.getElementsByClassName('insertshape-grid')[0], width) {
 
-	var width = 10;
 	grid.classList.add(shapeType);
 
 	if (window.mode.isDesktop() || window.mode.isTablet())
@@ -562,10 +560,10 @@ function insertShapes(shapeType, grid = document.getElementsByClassName('inserts
 
 		var rows = Math.ceil(collection[s].length / width);
 		var idx = 0;
+		const row = document.createElement('div');
+		row.className = 'row';
+		grid.appendChild(row);
 		for (let r = 0; r < rows; r++) {
-			const row = document.createElement('div');
-			row.className = 'row';
-			grid.appendChild(row);
 
 			for (let c = 0; c < width; c++) {
 				if (idx >= collection[s].length) {
@@ -578,6 +576,7 @@ function insertShapes(shapeType, grid = document.getElementsByClassName('inserts
 				col.className = 'col w2ui-icon ' + shape.img;
 				col.dataset.uno = shape.uno;
 				col.tabIndex = 0;
+				col.setAttribute('index', r + ':' + c);
 				row.appendChild(col);
 			}
 
@@ -599,7 +598,7 @@ function getShapesPopupElements(closeCallback) {
 	const container = document.createElement('div');
 	container.appendChild(grid);
 
-	insertShapes('insertshapes', container.children[0]);
+	insertShapes('insertshapes', container.children[0], 10);
 
 	const wrapperContainer = document.createElement('div');
 
@@ -610,7 +609,6 @@ function getShapesPopupElements(closeCallback) {
 
 	const popUp = document.createElement('div');
 	popUp.id = 'insertshape-popup';
-	popUp.tabIndex = 0;
 	popUp.className = 'insertshape-pop ui-widget ui-corner-all';
 
 	wrapperContainer.appendChild(popUp);
@@ -633,7 +631,7 @@ function getConnectorsPopupElements(closeCallback) {
 
 	gridContainer.appendChild(grid);
 
-	insertShapes('insertconnectors', gridContainer.children[0]);
+	insertShapes('insertconnectors', gridContainer.children[0], 2);
 
 
 	const wrapperContainer = document.createElement('div');
@@ -643,7 +641,6 @@ function getConnectorsPopupElements(closeCallback) {
 
 	const popUp = document.createElement('div');
 	popUp.id = 'insertshape-popup';
-	popUp.tabIndex = 0;
 	popUp.className = 'insertshape-pop ui-widget ui-corner-all';
 
 	wrapperContainer.appendChild(wrapper);

browser/src/control/jsdialog/Util.Dropdown.js

@@ -28,7 +28,7 @@ JSDialog.OpenDropdown = function (id, popupParent, entries, innerCallback, popup
 		jsontype: 'dialog',
 		popupParent: popupParent,
 		popupAnchor: popupAnchor,
-		noDefaultKeyboardNavigation: false,
+		gridKeyboardNavigation: false,
 		cancellable: true,
 		children: [
 			{
@@ -65,12 +65,13 @@ JSDialog.OpenDropdown = function (id, popupParent, entries, innerCallback, popup
 					htmlId: entries[i].htmlId,
 					closeCallback: function () { JSDialog.CloseDropdown(id); }
 				};
+				json.gridKeyboardNavigation = true;
 			break;
 
 			case 'colorpicker':
 				entry = entries[i];
 				// for color picker we have a "KeyboardGridNavigation" function defined separately to handle custom cases
-				json.noDefaultKeyboardNavigation = true;
+				json.gridKeyboardNavigation = true;
 			break;
 
 			case 'action':

browser/src/control/jsdialog/Widget.DropDown.ts

@@ -22,7 +22,10 @@ JSDialog.Dropdown = function (
 ) {
 	builder.build(parentContainer, data.children, data.vertical === true);
 
-	if (!data.noDefaultKeyboardNavigation)
+	if (data.gridKeyboardNavigation) {
+		JSDialog.KeyboardGridNavigation(parentContainer);
+	} else {
 		JSDialog.KeyboardListNavigation(parentContainer);
+	}
 	return false;
 };