..F....... [ZBX-20678] fixed focusing and keyboard functionality for host in Geomap widget

* commit '484bf2db7b74b10efc0c28469221cfce16493edb':
  ..F....... [ZBX-20678] fixed focusing and keyboard functionality for host in Geomap widget

7 files changed, 62 insertions, 4 deletions

diff --git a/ChangeLog.d/bugfix/ZBX-20678 b/ChangeLog.d/bugfix/ZBX-20678
new file mode 100644
index 00000000000..79b0972d126
--- /dev/null
+++ b/ChangeLog.d/bugfix/ZBX-20678
@@ -0,0 +1 @@
+..F....... [ZBX-20678] fixed focusing and keyboard functionality for host in Geomap widget (rdetlavs)
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index a8b64a57301..054dcd93a69 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -6568,6 +6568,11 @@ z-select,
 	height: 30px;
 	width: 30px;
 }
+.leaflet-marker-icon:focus {
+	box-shadow: 0 0 0 2px $btn-border-focus-color;
+	border-radius: 2px;
+	outline: none;
+}
 .marker-cluster span {
 	line-height: 30px;
 }
diff --git a/ui/assets/styles/blue-theme.css b/ui/assets/styles/blue-theme.css
index cfbbcdc20f2..22001e0cd19 100644
--- a/ui/assets/styles/blue-theme.css
+++ b/ui/assets/styles/blue-theme.css
@@ -6980,3 +6980,8 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
 .leaflet-container {
   height: 100%;
   z-index: 1; }
+
+.leaflet-marker-icon:focus {
+  box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35);
+  border-radius: 2px;
+  outline: none; }
diff --git a/ui/assets/styles/dark-theme.css b/ui/assets/styles/dark-theme.css
index c10a02e0e61..5ed43818bf6 100644
--- a/ui/assets/styles/dark-theme.css
+++ b/ui/assets/styles/dark-theme.css
@@ -6992,6 +6992,11 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
   height: 100%;
   z-index: 1; }
 
+.leaflet-marker-icon:focus {
+  box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35);
+  border-radius: 2px;
+  outline: none; }
+
 .sidebar.is-compact:not(.is-opened) .form-search .search-icon {
   opacity: .75; }
 
diff --git a/ui/assets/styles/hc-dark.css b/ui/assets/styles/hc-dark.css
index e8c243e8f37..9208d0312de 100644
--- a/ui/assets/styles/hc-dark.css
+++ b/ui/assets/styles/hc-dark.css
@@ -6938,6 +6938,11 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
   height: 100%;
   z-index: 1; }
 
+.leaflet-marker-icon:focus {
+  box-shadow: 0 0 0 2px #ffffff;
+  border-radius: 2px;
+  outline: none; }
+
 .sidebar .logo:focus .sidebar-logo {
   box-shadow: 0 0 0 2px #000000; }
 .sidebar button:focus {
diff --git a/ui/assets/styles/hc-light.css b/ui/assets/styles/hc-light.css
index 74d92a1d53e..b00b15d57bc 100644
--- a/ui/assets/styles/hc-light.css
+++ b/ui/assets/styles/hc-light.css
@@ -6938,6 +6938,11 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
   height: 100%;
   z-index: 1; }
 
+.leaflet-marker-icon:focus {
+  box-shadow: 0 0 0 2px #000000;
+  border-radius: 2px;
+  outline: none; }
+
 .sidebar .logo:focus .sidebar-logo {
   box-shadow: 0 0 0 2px #ffffff; }
 .sidebar button:focus {
diff --git a/ui/js/widgets/class.widget.geomap.js b/ui/js/widgets/class.widget.geomap.js
index 7149f5bb4d8..600093bc471 100644
--- a/ui/js/widgets/class.widget.geomap.js
+++ b/ui/js/widgets/class.widget.geomap.js
@@ -181,32 +181,57 @@ class CWidgetGeoMap extends CWidget {
 
 			node.hintBoxItem = hintBox.createBox(e, node, content, '', true, style, container.parentNode);
 
+			const cluster_bounds = cluster.originalEvent.target.getBoundingClientRect();
+			const hintbox_bounds = this._target.getBoundingClientRect();
+
+			let x = cluster_bounds.left + cluster_bounds.width / 2 - hintbox_bounds.left;
+			let y = cluster_bounds.top - hintbox_bounds.top - 10;
+
 			node.hintBoxItem.position({
 				of: node.hintBoxItem,
 				my: 'center bottom',
-				at: `left+${cluster.containerPoint.x}px top+${cluster.containerPoint.y+15}px`,
+				at: `left+${x}px top+${y}px`,
 				collision: 'fit'
 			});
+
+			Overlay.prototype.recoverFocus.call({'$dialogue': node.hintBoxItem});
+			Overlay.prototype.containFocus.call({'$dialogue': node.hintBoxItem});
 		});
 
-		this._markers.on('click', (e) => {
+		this._markers.on('click keypress', (e) => {
 			const node = e.originalEvent.srcElement;
 			if ('hintBoxItem' in node) {
 				return;
 			}
 
+			if (e.type === 'keypress') {
+				if (e.originalEvent.key !== ' ' && e.originalEvent.key !== 'Enter') {
+					return;
+				}
+				e.originalEvent.preventDefault();
+			}
+
 			const container = this._map._container;
 			const content = this.makePopupContent([e.layer.feature]);
 			const style = 'left: 0px; top: 0px;';
 
 			node.hintBoxItem = hintBox.createBox(e, node, content, '', true, style, container.parentNode);
 
+			const marker_bounds = e.originalEvent.target.getBoundingClientRect();
+			const hintbox_bounds = this._target.getBoundingClientRect();
+
+			let x = marker_bounds.left + marker_bounds.width / 2 - hintbox_bounds.left;
+			let y = marker_bounds.top - hintbox_bounds.top - 10;
+
 			node.hintBoxItem.position({
 				of: node.hintBoxItem,
 				my: 'center bottom',
-				at: `left+${e.containerPoint.x}px top+${e.containerPoint.y-10}px`,
+				at: `left+${x}px top+${y}px`,
 				collision: 'fit'
 			});
+
+			Overlay.prototype.recoverFocus.call({'$dialogue': node.hintBoxItem});
+			Overlay.prototype.containFocus.call({'$dialogue': node.hintBoxItem});
 		});
 
 		this._map.getContainer().addEventListener('cluster.dblclick', (e) => {
@@ -275,7 +300,14 @@ class CWidgetGeoMap extends CWidget {
 		});
 
 		// Transform 'clusterclick' event as 'cluster.click' and 'cluster.dblclick' events.
-		clusters.on('clusterclick', (c) => {
+		clusters.on('clusterclick clusterkeypress', (c) => {
+			if (c.type === 'clusterkeypress') {
+				if (c.originalEvent.key !== ' ' && c.originalEvent.key !== 'Enter') {
+					return;
+				}
+				c.originalEvent.preventDefault();
+			}
+
 			if ('event_click' in clusters) {
 				clearTimeout(clusters.event_click);
 				delete clusters.event_click;