..F....... [ZBX-20049] implemented keyboard control for info icons

20 files changed, 605 insertions, 267 deletions

diff --git a/ChangeLog.d/bugfix/ZBX-20049 b/ChangeLog.d/bugfix/ZBX-20049
new file mode 100755
index 00000000000..b9d1263e0b8
--- /dev/null
+++ b/ChangeLog.d/bugfix/ZBX-20049
@@ -0,0 +1 @@
+..F....... [ZBX-20049] implemented keyboard control for info icons (acikuns, ashubin)
diff --git a/sass/stylesheets/sass/components/service/_info.scss b/sass/stylesheets/sass/components/service/_info.scss
index 461030216f1..2215c70a092 100644
--- a/sass/stylesheets/sass/components/service/_info.scss
+++ b/sass/stylesheets/sass/components/service/_info.scss
@@ -30,22 +30,6 @@
 			&:not(:last-child) {
 				margin-right: 10px;
 			}
-
-			.icon-description {
-				margin: 0 0 -5px 5px;
-				vertical-align: baseline;
-				border-radius: 2px;
-
-				&:link,
-				&:hover,
-				&:focus {
-					border-bottom: none;
-				}
-
-				&:focus {
-					box-shadow: 0 0 0 2px $btn-border-focus-color;
-				}
-			}
 		}
 	}
 
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index f498ff4b536..d34784bfc0f 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -450,10 +450,10 @@ $arrow-fill-up-down: #FFFFFF;
 }
 
 $var-icons: (
-	maintenance: url($sprite-path) no-repeat -357px -802px,
-	depend-up: url($sprite-path) no-repeat -361px -729px,
-	depend-down: url($sprite-path) no-repeat -361px -765px,
-	ackn: url($sprite-path) no-repeat -357px -693px
+	maintenance: -359px -803px,
+	depend-up: -359px -731px,
+	depend-down: -359px -766px,
+	ackn: -357px -693px
 );
 
 // Dynamically generated classes:
@@ -463,10 +463,8 @@ $var-icons: (
 //  .icon-ackn
 @each $var-icons, $bgimage in $var-icons {
 	.icon-#{$var-icons} {
-		margin: 0 18px 0 0;
 		&::before {
-			background: $bgimage;
-			@extend %var-icons;
+			background-position: $bgimage;
 		}
 	}
 }
@@ -934,8 +932,12 @@ a.link-action {
 				}
 			}
 
-			.icon-maintenance::before {
-				background-position: -360px -804px;
+			.icon-depend-up::before {
+				background-position: -361px -731px,
+			}
+
+			.icon-depend-down::before {
+				background-position: -361px -767px
 			}
 
 			.icon-wzrd-action {
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index d7351f0d14a..a429ede5843 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -374,10 +374,10 @@ $arrow-fill-up-down: #000000;
 }
 
 $var-icons: (
-	maintenance: url($sprite-path) no-repeat -203px -802px,
-	depend-up: url($sprite-path) no-repeat -208px -729px,
-	depend-down: url($sprite-path) no-repeat -208px -765px,
-	ackn: url($sprite-path) no-repeat -203px -693px
+	maintenance: -205px -803px,
+	depend-up: -206px -731px,
+	depend-down: -206px -766px,
+	ackn: -203px -693px
 );
 
 // Dynamically generated classes:
@@ -387,10 +387,8 @@ $var-icons: (
 //  .icon-ackn
 @each $var-icons, $bgimage in $var-icons {
 	.icon-#{$var-icons} {
-		margin: 0 18px 0 0;
 		&::before {
-			background: $bgimage;
-			@extend %var-icons;
+			background-position: $bgimage;
 		}
 	}
 }
@@ -819,8 +817,16 @@ a.link-action {
 
 			box-shadow: inset 0 -1px 0 0 $table-border-color;
 
-			.icon-maintenance::before {
-				background-position: -206px -804px;
+			.icon-depend-up::before {
+				background-position: -208px -731px;
+			}
+
+			.icon-depend-down::before {
+				background-position: -208px -767px;
+			}
+
+			.icon-wzrd-action {
+				background: transparent url($sprite-path) no-repeat -318px -624px;
 			}
 
 			.icon-wzrd-action {
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index adee26791e3..2c4ca616981 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -324,6 +324,18 @@ form {
 		}
 	}
 
+	td {
+		.icon-maintenance {
+			margin: 0 0 -3px 4px;
+		}
+
+		.icon-depend-up,
+		.icon-depend-down,
+		.icon-ackn {
+			margin: 0 4px -3px 0;
+		}
+	}
+
 	&.compact-view {
 		tr {
 			&[class*='flh-'] {
@@ -444,6 +456,7 @@ form {
 				&::after {
 					margin: 0;
 					line-height: 14px;
+					top: 0;
 				}
 
 				&:last-of-type {
@@ -451,11 +464,6 @@ form {
 				}
 			}
 
-			[class*='icon-depend-'] {
-				width: 12px;
-				margin-right: 0;
-			}
-
 			.rel-container {
 				span {
 					margin: 0;
@@ -483,19 +491,30 @@ form {
 			}
 
 			.icon-maintenance {
-				position: relative;
-				display: inline-block;
 				height: 12px;
 				width: 12px;
-				margin: 3px 1px 2px 2px !important;
+				margin: 3px 1px 2px 4px;
 
 				&::before {
 					height: 12px;
 					width: 12px;
-					background-position: -48px -804px;
+					background-position: -49px -805px;
 				}
 			}
 
+			.icon-depend-up,
+			.icon-depend-down {
+				width: 12px;
+			}
+
+			.icon-depend-up::before {
+				background-position: -49px -731px;
+			}
+
+			.icon-depend-down::before {
+				background-position: -49px -767px;
+			}
+
 			.icon-wzrd-action {
 				background: url($sprite-path) no-repeat -6px -624px;
 				height: 12px;
@@ -2532,34 +2551,43 @@ button[disabled] {
 }
 
 $var-icons: (
-	depend-up: url($sprite-path) no-repeat -49px -729px,
-	depend-down: url($sprite-path) no-repeat -49px -765px,
-	ackn: url($sprite-path) no-repeat -45px -693px
+	maintenance: url($sprite-path) no-repeat -47px -803px,
+	depend-up: url($sprite-path) no-repeat -47px -731px,
+	depend-down: url($sprite-path) no-repeat -47px -767px,
+	ackn: url($sprite-path) no-repeat -47px -694px
 );
 
 // Dynamically generated classes:
+//  .icon-maintenance
 //  .icon-depend-up
 //  .icon-depend-down
 //  .icon-ackn
 @each $var-icons, $bgimage in $var-icons {
 	.icon-#{$var-icons} {
-		margin: 0 18px 0 0;
+		position: relative;
+		display: inline-block;
+		width: 16px;
+		height: 16px;
+		border-radius: 2px;
 
 		&::before {
-			background: $bgimage;
 			@extend %var-icons;
+			background: $bgimage;
+			width: 14px;
+			height: 14px;
+			left: 1px;
+			top: 1px;
 		}
-	}
-}
 
-.icon-maintenance {
-	display: inline-block;
-	width: 18px;
-	height: 13px;
+		&:link,
+		&:hover,
+		&:focus {
+			border-bottom: none;
+		}
 
-	&::before {
-		background: url($sprite-path) no-repeat -46px -802px;
-		@extend %var-icons;
+		&:focus {
+			box-shadow: 0 0 0 2px $btn-border-focus-color;
+		}
 	}
 }
 
@@ -2664,6 +2692,16 @@ $form-icon-btn: (
 	cursor: pointer;
 	margin: -12px 0 -4px;
 
+	&:link,
+	&:hover,
+	&:focus {
+		border-bottom: 1px solid;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 2px $btn-border-focus-color;
+	}
+
 	&::before {
 		content: '';
 		display: inline-block;
@@ -2674,6 +2712,22 @@ $form-icon-btn: (
 		height: 14px;
 		background: url($sprite-path) no-repeat -47px -659px;
 	}
+
+	&.status-red {
+		&:link,
+		&:hover,
+		&:focus {
+			border-color: darken(desaturate($alt-red, 10%), 9%);
+		}
+	}
+
+	&.status-yellow {
+		&:link,
+		&:hover,
+		&:focus {
+			border-color: darken(desaturate($alt-yellow, 9%), 20%);
+		}
+	}
 }
 
 // Installation.
@@ -5308,6 +5362,19 @@ svg {
 	}
 }
 
+.icon-invisible {
+	&:link,
+	&:hover,
+	&:focus {
+		border-bottom: none;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 2px $btn-border-focus-color;
+		border-radius: 2px;
+	}
+}
+
 button {
 	&.icon-action-command,
 	&.icon-action-close,
@@ -5437,7 +5504,19 @@ button {
 }
 
 .icon-description {
-	margin: 0 0 0 5px;
+	margin: 0 0 -5px 5px;
+	vertical-align: baseline;
+	border-radius: 2px;
+
+	&:link,
+	&:hover,
+	&:focus {
+		border-bottom: none;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 2px $btn-border-focus-color;
+	}
 
 	&::after {
 		content: '?';
@@ -5492,6 +5571,16 @@ button {
 		font-weight: bold;
 		color: $btn-font-color;
 	}
+
+	&:link,
+	&:hover,
+	&:focus {
+		border-bottom: none;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 2px $btn-border-focus-color;
+	}
 }
 
 #expressions_list .ui-sortable-helper {
diff --git a/ui/assets/styles/blue-theme.css b/ui/assets/styles/blue-theme.css
index f9c4ed4714f..99c0297e918 100644
--- a/ui/assets/styles/blue-theme.css
+++ b/ui/assets/styles/blue-theme.css
@@ -2263,14 +2263,6 @@ div.dashboard-grid-widget-tophosts z-bar-gauge {
     line-height: 18px; }
     .service-info .service-info-value .service-info-value-sla:not(:last-child) {
       margin-right: 10px; }
-    .service-info .service-info-value .service-info-value-sla .icon-description {
-      margin: 0 0 -5px 5px;
-      vertical-align: baseline;
-      border-radius: 2px; }
-      .service-info .service-info-value .service-info-value-sla .icon-description:link, .service-info .service-info-value .service-info-value-sla .icon-description:hover, .service-info .service-info-value .service-info-value-sla .icon-description:focus {
-        border-bottom: none; }
-      .service-info .service-info-value .service-info-value-sla .icon-description:focus {
-        box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
   .service-info .service-name {
     padding-bottom: 5px;
     font-size: 1.5em; }
@@ -2829,6 +2821,12 @@ form.is-loading {
     .list-table .action-container .separator {
       flex-shrink: 0;
       margin-right: 4px; }
+  .list-table td .icon-maintenance {
+    margin: 0 0 -3px 4px; }
+  .list-table td .icon-depend-up,
+  .list-table td .icon-depend-down,
+  .list-table td .icon-ackn {
+    margin: 0 4px -3px 0; }
   .list-table.compact-view tr[class*='flh-']:not(.row-selected):not(:hover) td {
     color: #1f2c33; }
     .list-table.compact-view tr[class*='flh-']:not(.row-selected):not(:hover) td sup,
@@ -2878,12 +2876,10 @@ form.is-loading {
       vertical-align: middle; }
       .list-table.compact-view td [class*='icon-']::after {
         margin: 0;
-        line-height: 14px; }
+        line-height: 14px;
+        top: 0; }
       .list-table.compact-view td [class*='icon-']:last-of-type {
         margin-right: 0; }
-    .list-table.compact-view td [class*='icon-depend-'] {
-      width: 12px;
-      margin-right: 0; }
     .list-table.compact-view td .rel-container span {
       margin: 0; }
     .list-table.compact-view td .tag {
@@ -2902,15 +2898,20 @@ form.is-loading {
         .list-table.compact-view td .tag {
           max-width: 133px; } }
     .list-table.compact-view td .icon-maintenance {
-      position: relative;
-      display: inline-block;
       height: 12px;
       width: 12px;
-      margin: 3px 1px 2px 2px !important; }
+      margin: 3px 1px 2px 4px; }
       .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
-        background-position: -48px -804px; }
+        background-position: -49px -805px; }
+    .list-table.compact-view td .icon-depend-up,
+    .list-table.compact-view td .icon-depend-down {
+      width: 12px; }
+    .list-table.compact-view td .icon-depend-up::before {
+      background-position: -49px -731px; }
+    .list-table.compact-view td .icon-depend-down::before {
+      background-position: -49px -767px; }
     .list-table.compact-view td .icon-wzrd-action {
       background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px;
       height: 12px;
@@ -4196,27 +4197,73 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
   display: inline-block;
   margin: 0 14px 0 0; }
 
+.icon-maintenance {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-maintenance::before {
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -803px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-maintenance:link, .icon-maintenance:hover, .icon-maintenance:focus {
+    border-bottom: none; }
+  .icon-maintenance:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
+
 .icon-depend-up {
-  margin: 0 18px 0 0; }
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-depend-up::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -729px; }
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -731px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-depend-up:link, .icon-depend-up:hover, .icon-depend-up:focus {
+    border-bottom: none; }
+  .icon-depend-up:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
 
 .icon-depend-down {
-  margin: 0 18px 0 0; }
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-depend-down::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -765px; }
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -767px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-depend-down:link, .icon-depend-down:hover, .icon-depend-down:focus {
+    border-bottom: none; }
+  .icon-depend-down:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
 
 .icon-ackn {
-  margin: 0 18px 0 0; }
-  .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -45px -693px; }
-
-.icon-maintenance {
+  position: relative;
   display: inline-block;
-  width: 18px;
-  height: 13px; }
-  .icon-maintenance::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -46px -802px; }
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-ackn::before {
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -694px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-ackn:link, .icon-ackn:hover, .icon-ackn:focus {
+    border-bottom: none; }
+  .icon-ackn:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
 
 .icon-tree-top-bottom, .icon-tree-top-bottom-right, .icon-tree-top-right, .icon-tree-empty {
   margin: 0 12px 0 0; }
@@ -4257,7 +4304,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
     opacity: 1;
     background-color: transparent; }
 
-.icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before, .icon-maintenance::before {
+.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
   display: inline-block;
   width: 18px;
   height: 18px;
@@ -4275,6 +4322,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
   height: 11px;
   cursor: pointer;
   margin: -12px 0 -4px; }
+  .icon-info:link, .icon-info:hover, .icon-info:focus {
+    border-bottom: 1px solid; }
+  .icon-info:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
   .icon-info::before {
     content: '';
     display: inline-block;
@@ -4284,6 +4335,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
     width: 14px;
     height: 14px;
     background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -659px; }
+  .icon-info.status-red:link, .icon-info.status-red:hover, .icon-info.status-red:focus {
+    border-color: #d23d3d; }
+  .icon-info.status-yellow:link, .icon-info.status-yellow:hover, .icon-info.status-yellow:focus {
+    border-color: #e79e0b; }
 
 .setup-container {
   background-color: #ffffff;
@@ -6162,6 +6217,12 @@ svg {
     background-image: url("../img/icon-sprite.svg?20211222");
     background-repeat: no-repeat; }
 
+.icon-invisible:link, .icon-invisible:hover, .icon-invisible:focus {
+  border-bottom: none; }
+.icon-invisible:focus {
+  box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35);
+  border-radius: 2px; }
+
 button.icon-action-command, button.icon-action-close, button.icon-action-msg, button.icon-action-msgs, button.icon-action-severity-up, button.icon-action-severity-down, button.icon-action-severity-changed, button.icon-action-message, button.icon-action-ack, button.icon-problem-generated, button.icon-problem-recovery, button.icon-actions-number-gray, button.icon-actions-number-yellow, button.icon-actions-number-red {
   background: none;
   border: none;
@@ -6241,7 +6302,13 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
   background-position: -524px -245px; }
 
 .icon-description {
-  margin: 0 0 0 5px; }
+  margin: 0 0 -5px 5px;
+  vertical-align: baseline;
+  border-radius: 2px; }
+  .icon-description:link, .icon-description:hover, .icon-description:focus {
+    border-bottom: none; }
+  .icon-description:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
   .icon-description::after {
     content: '?';
     color: #ffffff; }
@@ -6281,6 +6348,10 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
     font-size: 10px;
     font-weight: bold;
     color: #ffffff; }
+  .icon-help-hint:link, .icon-help-hint:hover, .icon-help-hint:focus {
+    border-bottom: none; }
+  .icon-help-hint:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
 
 #expressions_list .ui-sortable-helper {
   display: table; }
diff --git a/ui/assets/styles/dark-theme.css b/ui/assets/styles/dark-theme.css
index e2c516ce3bd..627d110137a 100644
--- a/ui/assets/styles/dark-theme.css
+++ b/ui/assets/styles/dark-theme.css
@@ -2276,14 +2276,6 @@ div.dashboard-grid-widget-tophosts z-bar-gauge {
     line-height: 18px; }
     .service-info .service-info-value .service-info-value-sla:not(:last-child) {
       margin-right: 10px; }
-    .service-info .service-info-value .service-info-value-sla .icon-description {
-      margin: 0 0 -5px 5px;
-      vertical-align: baseline;
-      border-radius: 2px; }
-      .service-info .service-info-value .service-info-value-sla .icon-description:link, .service-info .service-info-value .service-info-value-sla .icon-description:hover, .service-info .service-info-value .service-info-value-sla .icon-description:focus {
-        border-bottom: none; }
-      .service-info .service-info-value .service-info-value-sla .icon-description:focus {
-        box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
   .service-info .service-name {
     padding-bottom: 5px;
     font-size: 1.5em; }
@@ -2842,6 +2834,12 @@ form.is-loading {
     .list-table .action-container .separator {
       flex-shrink: 0;
       margin-right: 4px; }
+  .list-table td .icon-maintenance {
+    margin: 0 0 -3px 4px; }
+  .list-table td .icon-depend-up,
+  .list-table td .icon-depend-down,
+  .list-table td .icon-ackn {
+    margin: 0 4px -3px 0; }
   .list-table.compact-view tr[class*='flh-']:not(.row-selected):not(:hover) td {
     color: #000000; }
     .list-table.compact-view tr[class*='flh-']:not(.row-selected):not(:hover) td sup,
@@ -2889,12 +2887,10 @@ form.is-loading {
       vertical-align: middle; }
       .list-table.compact-view td [class*='icon-']::after {
         margin: 0;
-        line-height: 14px; }
+        line-height: 14px;
+        top: 0; }
       .list-table.compact-view td [class*='icon-']:last-of-type {
         margin-right: 0; }
-    .list-table.compact-view td [class*='icon-depend-'] {
-      width: 12px;
-      margin-right: 0; }
     .list-table.compact-view td .rel-container span {
       margin: 0; }
     .list-table.compact-view td .tag {
@@ -2913,15 +2909,20 @@ form.is-loading {
         .list-table.compact-view td .tag {
           max-width: 133px; } }
     .list-table.compact-view td .icon-maintenance {
-      position: relative;
-      display: inline-block;
       height: 12px;
       width: 12px;
-      margin: 3px 1px 2px 2px !important; }
+      margin: 3px 1px 2px 4px; }
       .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
-        background-position: -48px -804px; }
+        background-position: -49px -805px; }
+    .list-table.compact-view td .icon-depend-up,
+    .list-table.compact-view td .icon-depend-down {
+      width: 12px; }
+    .list-table.compact-view td .icon-depend-up::before {
+      background-position: -49px -731px; }
+    .list-table.compact-view td .icon-depend-down::before {
+      background-position: -49px -767px; }
     .list-table.compact-view td .icon-wzrd-action {
       background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px;
       height: 12px;
@@ -4207,27 +4208,73 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
   display: inline-block;
   margin: 0 14px 0 0; }
 
+.icon-maintenance {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-maintenance::before {
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -803px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-maintenance:link, .icon-maintenance:hover, .icon-maintenance:focus {
+    border-bottom: none; }
+  .icon-maintenance:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
+
 .icon-depend-up {
-  margin: 0 18px 0 0; }
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-depend-up::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -729px; }
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -731px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-depend-up:link, .icon-depend-up:hover, .icon-depend-up:focus {
+    border-bottom: none; }
+  .icon-depend-up:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
 
 .icon-depend-down {
-  margin: 0 18px 0 0; }
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-depend-down::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -765px; }
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -767px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-depend-down:link, .icon-depend-down:hover, .icon-depend-down:focus {
+    border-bottom: none; }
+  .icon-depend-down:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
 
 .icon-ackn {
-  margin: 0 18px 0 0; }
-  .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -45px -693px; }
-
-.icon-maintenance {
+  position: relative;
   display: inline-block;
-  width: 18px;
-  height: 13px; }
-  .icon-maintenance::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -46px -802px; }
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-ackn::before {
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -694px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-ackn:link, .icon-ackn:hover, .icon-ackn:focus {
+    border-bottom: none; }
+  .icon-ackn:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
 
 .icon-tree-top-bottom, .icon-tree-top-bottom-right, .icon-tree-top-right, .icon-tree-empty {
   margin: 0 12px 0 0; }
@@ -4268,7 +4315,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
     opacity: 1;
     background-color: transparent; }
 
-.icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before, .icon-maintenance::before {
+.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
   display: inline-block;
   width: 18px;
   height: 18px;
@@ -4286,6 +4333,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
   height: 11px;
   cursor: pointer;
   margin: -12px 0 -4px; }
+  .icon-info:link, .icon-info:hover, .icon-info:focus {
+    border-bottom: 1px solid; }
+  .icon-info:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
   .icon-info::before {
     content: '';
     display: inline-block;
@@ -4295,6 +4346,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
     width: 14px;
     height: 14px;
     background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -659px; }
+  .icon-info.status-red:link, .icon-info.status-red:hover, .icon-info.status-red:focus {
+    border-color: #d23d3d; }
+  .icon-info.status-yellow:link, .icon-info.status-yellow:hover, .icon-info.status-yellow:focus {
+    border-color: #e79e0b; }
 
 .setup-container {
   background-color: #2b2b2b;
@@ -6173,6 +6228,12 @@ svg {
     background-image: url("../img/icon-sprite.svg?20211222");
     background-repeat: no-repeat; }
 
+.icon-invisible:link, .icon-invisible:hover, .icon-invisible:focus {
+  border-bottom: none; }
+.icon-invisible:focus {
+  box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35);
+  border-radius: 2px; }
+
 button.icon-action-command, button.icon-action-close, button.icon-action-msg, button.icon-action-msgs, button.icon-action-severity-up, button.icon-action-severity-down, button.icon-action-severity-changed, button.icon-action-message, button.icon-action-ack, button.icon-problem-generated, button.icon-problem-recovery, button.icon-actions-number-gray, button.icon-actions-number-yellow, button.icon-actions-number-red {
   background: none;
   border: none;
@@ -6252,7 +6313,13 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
   background-position: -524px -245px; }
 
 .icon-description {
-  margin: 0 0 0 5px; }
+  margin: 0 0 -5px 5px;
+  vertical-align: baseline;
+  border-radius: 2px; }
+  .icon-description:link, .icon-description:hover, .icon-description:focus {
+    border-bottom: none; }
+  .icon-description:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
   .icon-description::after {
     content: '?';
     color: #2b2b2b; }
@@ -6292,6 +6359,10 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
     font-size: 10px;
     font-weight: bold;
     color: #f2f2f2; }
+  .icon-help-hint:link, .icon-help-hint:hover, .icon-help-hint:focus {
+    border-bottom: none; }
+  .icon-help-hint:focus {
+    box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); }
 
 #expressions_list .ui-sortable-helper {
   display: table; }
diff --git a/ui/assets/styles/hc-dark.css b/ui/assets/styles/hc-dark.css
index 4ae662ecba3..eaa72cb0577 100644
--- a/ui/assets/styles/hc-dark.css
+++ b/ui/assets/styles/hc-dark.css
@@ -2252,14 +2252,6 @@ div.dashboard-grid-widget-tophosts z-bar-gauge {
     line-height: 18px; }
     .service-info .service-info-value .service-info-value-sla:not(:last-child) {
       margin-right: 10px; }
-    .service-info .service-info-value .service-info-value-sla .icon-description {
-      margin: 0 0 -5px 5px;
-      vertical-align: baseline;
-      border-radius: 2px; }
-      .service-info .service-info-value .service-info-value-sla .icon-description:link, .service-info .service-info-value .service-info-value-sla .icon-description:hover, .service-info .service-info-value .service-info-value-sla .icon-description:focus {
-        border-bottom: none; }
-      .service-info .service-info-value .service-info-value-sla .icon-description:focus {
-        box-shadow: 0 0 0 2px #ffffff; }
   .service-info .service-name {
     padding-bottom: 5px;
     font-size: 1.5em; }
@@ -2818,6 +2810,12 @@ form.is-loading {
     .list-table .action-container .separator {
       flex-shrink: 0;
       margin-right: 4px; }
+  .list-table td .icon-maintenance {
+    margin: 0 0 -3px 4px; }
+  .list-table td .icon-depend-up,
+  .list-table td .icon-depend-down,
+  .list-table td .icon-ackn {
+    margin: 0 4px -3px 0; }
   .list-table.compact-view .link-action {
     color: #ffffff; }
     .list-table.compact-view .link-action.red {
@@ -2844,12 +2842,10 @@ form.is-loading {
       vertical-align: middle; }
       .list-table.compact-view td [class*='icon-']::after {
         margin: 0;
-        line-height: 14px; }
+        line-height: 14px;
+        top: 0; }
       .list-table.compact-view td [class*='icon-']:last-of-type {
         margin-right: 0; }
-    .list-table.compact-view td [class*='icon-depend-'] {
-      width: 12px;
-      margin-right: 0; }
     .list-table.compact-view td .rel-container span {
       margin: 0; }
     .list-table.compact-view td .tag {
@@ -2868,15 +2864,20 @@ form.is-loading {
         .list-table.compact-view td .tag {
           max-width: 133px; } }
     .list-table.compact-view td .icon-maintenance {
-      position: relative;
-      display: inline-block;
       height: 12px;
       width: 12px;
-      margin: 3px 1px 2px 2px !important; }
+      margin: 3px 1px 2px 4px; }
       .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
-        background-position: -48px -804px; }
+        background-position: -49px -805px; }
+    .list-table.compact-view td .icon-depend-up,
+    .list-table.compact-view td .icon-depend-down {
+      width: 12px; }
+    .list-table.compact-view td .icon-depend-up::before {
+      background-position: -49px -731px; }
+    .list-table.compact-view td .icon-depend-down::before {
+      background-position: -49px -767px; }
     .list-table.compact-view td .icon-wzrd-action {
       background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px;
       height: 12px;
@@ -4162,27 +4163,73 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
   display: inline-block;
   margin: 0 14px 0 0; }
 
+.icon-maintenance {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-maintenance::before {
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -803px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-maintenance:link, .icon-maintenance:hover, .icon-maintenance:focus {
+    border-bottom: none; }
+  .icon-maintenance:focus {
+    box-shadow: 0 0 0 2px #ffffff; }
+
 .icon-depend-up {
-  margin: 0 18px 0 0; }
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-depend-up::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -729px; }
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -731px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-depend-up:link, .icon-depend-up:hover, .icon-depend-up:focus {
+    border-bottom: none; }
+  .icon-depend-up:focus {
+    box-shadow: 0 0 0 2px #ffffff; }
 
 .icon-depend-down {
-  margin: 0 18px 0 0; }
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-depend-down::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -765px; }
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -767px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-depend-down:link, .icon-depend-down:hover, .icon-depend-down:focus {
+    border-bottom: none; }
+  .icon-depend-down:focus {
+    box-shadow: 0 0 0 2px #ffffff; }
 
 .icon-ackn {
-  margin: 0 18px 0 0; }
-  .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -45px -693px; }
-
-.icon-maintenance {
+  position: relative;
   display: inline-block;
-  width: 18px;
-  height: 13px; }
-  .icon-maintenance::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -46px -802px; }
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-ackn::before {
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -694px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-ackn:link, .icon-ackn:hover, .icon-ackn:focus {
+    border-bottom: none; }
+  .icon-ackn:focus {
+    box-shadow: 0 0 0 2px #ffffff; }
 
 .icon-tree-top-bottom, .icon-tree-top-bottom-right, .icon-tree-top-right, .icon-tree-empty {
   margin: 0 12px 0 0; }
@@ -4223,7 +4270,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
     opacity: 1;
     background-color: transparent; }
 
-.icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before, .icon-maintenance::before {
+.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
   display: inline-block;
   width: 18px;
   height: 18px;
@@ -4241,6 +4288,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
   height: 11px;
   cursor: pointer;
   margin: -12px 0 -4px; }
+  .icon-info:link, .icon-info:hover, .icon-info:focus {
+    border-bottom: 1px solid; }
+  .icon-info:focus {
+    box-shadow: 0 0 0 2px #ffffff; }
   .icon-info::before {
     content: '';
     display: inline-block;
@@ -4250,6 +4301,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
     width: 14px;
     height: 14px;
     background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -659px; }
+  .icon-info.status-red:link, .icon-info.status-red:hover, .icon-info.status-red:focus {
+    border-color: #d23d3d; }
+  .icon-info.status-yellow:link, .icon-info.status-yellow:hover, .icon-info.status-yellow:focus {
+    border-color: #e79e0b; }
 
 .setup-container {
   background-color: #000000;
@@ -6119,6 +6174,12 @@ svg {
     background-image: url("../img/icon-sprite.svg?20211222");
     background-repeat: no-repeat; }
 
+.icon-invisible:link, .icon-invisible:hover, .icon-invisible:focus {
+  border-bottom: none; }
+.icon-invisible:focus {
+  box-shadow: 0 0 0 2px #ffffff;
+  border-radius: 2px; }
+
 button.icon-action-command, button.icon-action-close, button.icon-action-msg, button.icon-action-msgs, button.icon-action-severity-up, button.icon-action-severity-down, button.icon-action-severity-changed, button.icon-action-message, button.icon-action-ack, button.icon-problem-generated, button.icon-problem-recovery, button.icon-actions-number-gray, button.icon-actions-number-yellow, button.icon-actions-number-red {
   background: none;
   border: none;
@@ -6198,7 +6259,13 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
   background-position: -524px -245px; }
 
 .icon-description {
-  margin: 0 0 0 5px; }
+  margin: 0 0 -5px 5px;
+  vertical-align: baseline;
+  border-radius: 2px; }
+  .icon-description:link, .icon-description:hover, .icon-description:focus {
+    border-bottom: none; }
+  .icon-description:focus {
+    box-shadow: 0 0 0 2px #ffffff; }
   .icon-description::after {
     content: '?';
     color: #000000; }
@@ -6238,6 +6305,10 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
     font-size: 10px;
     font-weight: bold;
     color: #333333; }
+  .icon-help-hint:link, .icon-help-hint:hover, .icon-help-hint:focus {
+    border-bottom: none; }
+  .icon-help-hint:focus {
+    box-shadow: 0 0 0 2px #ffffff; }
 
 #expressions_list .ui-sortable-helper {
   display: table; }
@@ -6935,25 +7006,17 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
 .dashboard.dashboard-is-edit-mode .dashboard-grid-widget-placeholder > div {
   background-color: #1f1f1f !important; }
 
-.icon-maintenance {
-  margin: 0 18px 0 0; }
-  .icon-maintenance::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -357px -802px; }
+.icon-maintenance::before {
+  background-position: -359px -803px; }
 
-.icon-depend-up {
-  margin: 0 18px 0 0; }
-  .icon-depend-up::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -361px -729px; }
+.icon-depend-up::before {
+  background-position: -359px -731px; }
 
-.icon-depend-down {
-  margin: 0 18px 0 0; }
-  .icon-depend-down::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -361px -765px; }
+.icon-depend-down::before {
+  background-position: -359px -766px; }
 
-.icon-ackn {
-  margin: 0 18px 0 0; }
-  .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -357px -693px; }
+.icon-ackn::before {
+  background-position: -357px -693px; }
 
 .icon-cal {
   background: transparent url("../img/icon-sprite.svg?20211222") no-repeat -354px -834px; }
@@ -7241,8 +7304,10 @@ z-select button.focusable:focus,
   .list-table.compact-view td.na-bg::after, .list-table.compact-view td.normal-bg::after, .list-table.compact-view td.info-bg::after, .list-table.compact-view td.warning-bg::after, .list-table.compact-view td.average-bg::after, .list-table.compact-view td.high-bg::after, .list-table.compact-view td.disaster-bg::after {
     top: 1px;
     transform: scale(0.8); }
-  .list-table.compact-view td .icon-maintenance::before {
-    background-position: -360px -804px; }
+  .list-table.compact-view td .icon-depend-up::before {
+    background-position: -361px -731px; }
+  .list-table.compact-view td .icon-depend-down::before {
+    background-position: -361px -767px; }
   .list-table.compact-view td .icon-wzrd-action {
     background: transparent url("../img/icon-sprite.svg?20211222") no-repeat -318px -624px; }
 
diff --git a/ui/assets/styles/hc-light.css b/ui/assets/styles/hc-light.css
index 67509a8bd5d..ae2577367ae 100644
--- a/ui/assets/styles/hc-light.css
+++ b/ui/assets/styles/hc-light.css
@@ -2252,14 +2252,6 @@ div.dashboard-grid-widget-tophosts z-bar-gauge {
     line-height: 18px; }
     .service-info .service-info-value .service-info-value-sla:not(:last-child) {
       margin-right: 10px; }
-    .service-info .service-info-value .service-info-value-sla .icon-description {
-      margin: 0 0 -5px 5px;
-      vertical-align: baseline;
-      border-radius: 2px; }
-      .service-info .service-info-value .service-info-value-sla .icon-description:link, .service-info .service-info-value .service-info-value-sla .icon-description:hover, .service-info .service-info-value .service-info-value-sla .icon-description:focus {
-        border-bottom: none; }
-      .service-info .service-info-value .service-info-value-sla .icon-description:focus {
-        box-shadow: 0 0 0 2px #000000; }
   .service-info .service-name {
     padding-bottom: 5px;
     font-size: 1.5em; }
@@ -2818,6 +2810,12 @@ form.is-loading {
     .list-table .action-container .separator {
       flex-shrink: 0;
       margin-right: 4px; }
+  .list-table td .icon-maintenance {
+    margin: 0 0 -3px 4px; }
+  .list-table td .icon-depend-up,
+  .list-table td .icon-depend-down,
+  .list-table td .icon-ackn {
+    margin: 0 4px -3px 0; }
   .list-table.compact-view .link-action {
     color: #000000; }
     .list-table.compact-view .link-action.red {
@@ -2844,12 +2842,10 @@ form.is-loading {
       vertical-align: middle; }
       .list-table.compact-view td [class*='icon-']::after {
         margin: 0;
-        line-height: 14px; }
+        line-height: 14px;
+        top: 0; }
       .list-table.compact-view td [class*='icon-']:last-of-type {
         margin-right: 0; }
-    .list-table.compact-view td [class*='icon-depend-'] {
-      width: 12px;
-      margin-right: 0; }
     .list-table.compact-view td .rel-container span {
       margin: 0; }
     .list-table.compact-view td .tag {
@@ -2868,15 +2864,20 @@ form.is-loading {
         .list-table.compact-view td .tag {
           max-width: 133px; } }
     .list-table.compact-view td .icon-maintenance {
-      position: relative;
-      display: inline-block;
       height: 12px;
       width: 12px;
-      margin: 3px 1px 2px 2px !important; }
+      margin: 3px 1px 2px 4px; }
       .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
-        background-position: -48px -804px; }
+        background-position: -49px -805px; }
+    .list-table.compact-view td .icon-depend-up,
+    .list-table.compact-view td .icon-depend-down {
+      width: 12px; }
+    .list-table.compact-view td .icon-depend-up::before {
+      background-position: -49px -731px; }
+    .list-table.compact-view td .icon-depend-down::before {
+      background-position: -49px -767px; }
     .list-table.compact-view td .icon-wzrd-action {
       background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px;
       height: 12px;
@@ -4162,27 +4163,73 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
   display: inline-block;
   margin: 0 14px 0 0; }
 
+.icon-maintenance {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-maintenance::before {
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -803px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-maintenance:link, .icon-maintenance:hover, .icon-maintenance:focus {
+    border-bottom: none; }
+  .icon-maintenance:focus {
+    box-shadow: 0 0 0 2px #000000; }
+
 .icon-depend-up {
-  margin: 0 18px 0 0; }
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-depend-up::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -729px; }
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -731px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-depend-up:link, .icon-depend-up:hover, .icon-depend-up:focus {
+    border-bottom: none; }
+  .icon-depend-up:focus {
+    box-shadow: 0 0 0 2px #000000; }
 
 .icon-depend-down {
-  margin: 0 18px 0 0; }
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-depend-down::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -765px; }
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -767px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-depend-down:link, .icon-depend-down:hover, .icon-depend-down:focus {
+    border-bottom: none; }
+  .icon-depend-down:focus {
+    box-shadow: 0 0 0 2px #000000; }
 
 .icon-ackn {
-  margin: 0 18px 0 0; }
-  .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -45px -693px; }
-
-.icon-maintenance {
+  position: relative;
   display: inline-block;
-  width: 18px;
-  height: 13px; }
-  .icon-maintenance::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -46px -802px; }
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-ackn::before {
+    background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -694px;
+    width: 14px;
+    height: 14px;
+    left: 1px;
+    top: 1px; }
+  .icon-ackn:link, .icon-ackn:hover, .icon-ackn:focus {
+    border-bottom: none; }
+  .icon-ackn:focus {
+    box-shadow: 0 0 0 2px #000000; }
 
 .icon-tree-top-bottom, .icon-tree-top-bottom-right, .icon-tree-top-right, .icon-tree-empty {
   margin: 0 12px 0 0; }
@@ -4223,7 +4270,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
     opacity: 1;
     background-color: transparent; }
 
-.icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before, .icon-maintenance::before {
+.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
   display: inline-block;
   width: 18px;
   height: 18px;
@@ -4241,6 +4288,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
   height: 11px;
   cursor: pointer;
   margin: -12px 0 -4px; }
+  .icon-info:link, .icon-info:hover, .icon-info:focus {
+    border-bottom: 1px solid; }
+  .icon-info:focus {
+    box-shadow: 0 0 0 2px #000000; }
   .icon-info::before {
     content: '';
     display: inline-block;
@@ -4250,6 +4301,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
     width: 14px;
     height: 14px;
     background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -659px; }
+  .icon-info.status-red:link, .icon-info.status-red:hover, .icon-info.status-red:focus {
+    border-color: #d23d3d; }
+  .icon-info.status-yellow:link, .icon-info.status-yellow:hover, .icon-info.status-yellow:focus {
+    border-color: #e79e0b; }
 
 .setup-container {
   background-color: #ffffff;
@@ -6119,6 +6174,12 @@ svg {
     background-image: url("../img/icon-sprite.svg?20211222");
     background-repeat: no-repeat; }
 
+.icon-invisible:link, .icon-invisible:hover, .icon-invisible:focus {
+  border-bottom: none; }
+.icon-invisible:focus {
+  box-shadow: 0 0 0 2px #000000;
+  border-radius: 2px; }
+
 button.icon-action-command, button.icon-action-close, button.icon-action-msg, button.icon-action-msgs, button.icon-action-severity-up, button.icon-action-severity-down, button.icon-action-severity-changed, button.icon-action-message, button.icon-action-ack, button.icon-problem-generated, button.icon-problem-recovery, button.icon-actions-number-gray, button.icon-actions-number-yellow, button.icon-actions-number-red {
   background: none;
   border: none;
@@ -6198,7 +6259,13 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
   background-position: -524px -245px; }
 
 .icon-description {
-  margin: 0 0 0 5px; }
+  margin: 0 0 -5px 5px;
+  vertical-align: baseline;
+  border-radius: 2px; }
+  .icon-description:link, .icon-description:hover, .icon-description:focus {
+    border-bottom: none; }
+  .icon-description:focus {
+    box-shadow: 0 0 0 2px #000000; }
   .icon-description::after {
     content: '?';
     color: #ffffff; }
@@ -6238,6 +6305,10 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
     font-size: 10px;
     font-weight: bold;
     color: #ffffff; }
+  .icon-help-hint:link, .icon-help-hint:hover, .icon-help-hint:focus {
+    border-bottom: none; }
+  .icon-help-hint:focus {
+    box-shadow: 0 0 0 2px #000000; }
 
 #expressions_list .ui-sortable-helper {
   display: table; }
@@ -6910,25 +6981,17 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
 .dashboard.dashboard-is-edit-mode .dashboard-grid-iterator.ui-resizable-resizing .dashboard-grid-iterator-mask, .dashboard.dashboard-is-edit-mode .dashboard-grid-iterator.ui-draggable-dragging .dashboard-grid-iterator-mask {
   border: 0; }
 
-.icon-maintenance {
-  margin: 0 18px 0 0; }
-  .icon-maintenance::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -203px -802px; }
+.icon-maintenance::before {
+  background-position: -205px -803px; }
 
-.icon-depend-up {
-  margin: 0 18px 0 0; }
-  .icon-depend-up::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -208px -729px; }
+.icon-depend-up::before {
+  background-position: -206px -731px; }
 
-.icon-depend-down {
-  margin: 0 18px 0 0; }
-  .icon-depend-down::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -208px -765px; }
+.icon-depend-down::before {
+  background-position: -206px -766px; }
 
-.icon-ackn {
-  margin: 0 18px 0 0; }
-  .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -203px -693px; }
+.icon-ackn::before {
+  background-position: -203px -693px; }
 
 .icon-cal {
   background: transparent url("../img/icon-sprite.svg?20211222") no-repeat -201px -834px; }
@@ -7175,8 +7238,12 @@ z-select button.focusable:focus,
   .list-table.compact-view td.na-bg::after, .list-table.compact-view td.normal-bg::after, .list-table.compact-view td.info-bg::after, .list-table.compact-view td.warning-bg::after, .list-table.compact-view td.average-bg::after, .list-table.compact-view td.high-bg::after, .list-table.compact-view td.disaster-bg::after {
     top: 1px;
     transform: scale(0.8); }
-  .list-table.compact-view td .icon-maintenance::before {
-    background-position: -206px -804px; }
+  .list-table.compact-view td .icon-depend-up::before {
+    background-position: -208px -731px; }
+  .list-table.compact-view td .icon-depend-down::before {
+    background-position: -208px -767px; }
+  .list-table.compact-view td .icon-wzrd-action {
+    background: transparent url("../img/icon-sprite.svg?20211222") no-repeat -318px -624px; }
   .list-table.compact-view td .icon-wzrd-action {
     background: transparent url("../img/icon-sprite.svg?20211222") no-repeat -165px -624px; }
 
diff --git a/ui/include/html.inc.php b/ui/include/html.inc.php
index b6d990296e0..2ec15414837 100644
--- a/ui/include/html.inc.php
+++ b/ui/include/html.inc.php
@@ -920,10 +920,10 @@ function makeInformationList($info_icons) {
  *
  * @param string $message
  *
- * @return CSpan
+ * @return CLink
  */
 function makeInformationIcon($message) {
-	return (new CSpan())
+	return (new CLink())
 		->addClass(ZBX_STYLE_ICON_INFO)
 		->addClass(ZBX_STYLE_STATUS_GREEN)
 		->setHint($message, ZBX_STYLE_HINTBOX_WRAP);
@@ -936,7 +936,7 @@ function makeInformationIcon($message) {
  * @param string $name         Name of the maintenance.
  * @param string $description  Description of the maintenance.
  *
- * @return CSpan
+ * @return CLink
  */
 function makeMaintenanceIcon($type, $name, $description) {
 	$hint = $name.' ['.($type
@@ -947,9 +947,8 @@ function makeMaintenanceIcon($type, $name, $description) {
 		$hint .= "\n".$description;
 	}
 
-	return (new CSpan())
+	return (new CLink())
 		->addClass(ZBX_STYLE_ICON_MAINTENANCE)
-		->addClass(ZBX_STYLE_CURSOR_POINTER)
 		->setHint($hint);
 }
 
@@ -960,7 +959,7 @@ function makeMaintenanceIcon($type, $name, $description) {
  * @param string $icon_data[]['suppress_until']    Time until the problem is suppressed.
  * @param string $icon_data[]['maintenance_name']  Name of the maintenance.
  *
- * @return CSpan
+ * @return CLink
  */
 function makeSuppressedProblemIcon(array $icon_data) {
 	$suppress_until = max(zbx_objectValues($icon_data, 'suppress_until'));
@@ -968,9 +967,8 @@ function makeSuppressedProblemIcon(array $icon_data) {
 	CArrayHelper::sort($icon_data, ['maintenance_name']);
 	$maintenance_names = implode(', ', zbx_objectValues($icon_data, 'maintenance_name'));
 
-	return (new CSpan())
+	return (new CLink())
 		->addClass(ZBX_STYLE_ICON_INVISIBLE)
-		->addClass(ZBX_STYLE_CURSOR_POINTER)
 		->setHint(
 			_s('Suppressed till: %1$s', ($suppress_until < strtotime('tomorrow'))
 				? zbx_date2str(TIME_FORMAT, $suppress_until)
@@ -1031,12 +1029,11 @@ function makeActionIcon(array $icon_data): CTag {
  *
  * @param string $description
  *
- * @return CSpan
+ * @return CLink
  */
 function makeDescriptionIcon($description) {
-	return (new CSpan())
+	return (new CLink())
 		->addClass(ZBX_STYLE_ICON_DESCRIPTION)
-		->addClass(ZBX_STYLE_CURSOR_POINTER)
 		->setHint(zbx_str2links($description), ZBX_STYLE_HINTBOX_WRAP);
 }
 
@@ -1045,10 +1042,10 @@ function makeDescriptionIcon($description) {
  *
  * @param string $error
  *
- * @return CSpan
+ * @return CLink
  */
 function makeErrorIcon($error) {
-	return (new CSpan())
+	return (new CLink())
 		->addClass(ZBX_STYLE_ICON_INFO)
 		->addClass(ZBX_STYLE_STATUS_RED)
 		->setHint($error, ZBX_STYLE_HINTBOX_WRAP." ".ZBX_STYLE_RED);
@@ -1059,38 +1056,23 @@ function makeErrorIcon($error) {
  *
  * @param string|array|CTag $help_text
  *
- * @return CSpan
+ * @return CLink
  */
-function makeHelpIcon($help_text): CSpan {
-	return (new CSpan())
+function makeHelpIcon($help_text): CLink {
+	return (new CLink())
 		->addClass(ZBX_STYLE_ICON_HELP_HINT)
-		->addClass(ZBX_STYLE_CURSOR_POINTER)
 		->setHint($help_text, ZBX_STYLE_HINTBOX_WRAP);
 }
 
 /**
- * Renders an unknown icon like grey [i] with error message
- *
- * @param string $error
- *
- * @return CSpan
- */
-function makeUnknownIcon($error) {
-	return (new CSpan())
-		->addClass(ZBX_STYLE_ICON_INFO)
-		->addClass(ZBX_STYLE_STATUS_DARK_GREY)
-		->setHint($error, ZBX_STYLE_HINTBOX_WRAP." ".ZBX_STYLE_RED);
-}
-
-/**
  * Renders a warning icon like yellow [i] with error message
  *
  * @param string $error
  *
- * @return CSpan
+ * @return CLink
  */
 function makeWarningIcon($error) {
-	return (new CSpan())
+	return (new CLink())
 		->addClass(ZBX_STYLE_ICON_INFO)
 		->addClass(ZBX_STYLE_STATUS_YELLOW)
 		->setHint($error, ZBX_STYLE_HINTBOX_WRAP);
diff --git a/ui/include/triggers.inc.php b/ui/include/triggers.inc.php
index fb192822f12..cbd0727866e 100644
--- a/ui/include/triggers.inc.php
+++ b/ui/include/triggers.inc.php
@@ -2407,7 +2407,7 @@ function makeTriggerDependencies(array $dependencies, $freeze_on_click = true) {
 				$table->addRow($description);
 			}
 
-			$result[] = (new CSpan())
+			$result[] = (new CLink())
 				->addClass($class)
 				->addClass(ZBX_STYLE_CURSOR_POINTER)
 				->setHint($table, '', $freeze_on_click);
diff --git a/ui/tests/selenium/common/testFormApiTokens.php b/ui/tests/selenium/common/testFormApiTokens.php
index 506ca0b0580..f7ad216078b 100644
--- a/ui/tests/selenium/common/testFormApiTokens.php
+++ b/ui/tests/selenium/common/testFormApiTokens.php
@@ -151,7 +151,7 @@ class testFormApiTokens extends CWebTest {
 		$this->checkAuthToken($auth_token, null);
 
 		// Check the hintbox text in the Auth token field.
-		$auth_token->query('xpath:./span[@data-hintbox]')->one()->click();
+		$auth_token->query('xpath:./a[@data-hintbox]')->one()->click();
 		$hintbox_text = $this->query('xpath://div[@class="overlay-dialogue"]')->one()->waitUntilVisible()->getText();
 		$this->assertEquals('Make sure to copy the auth token as you won\'t be able to view it after the page is closed.',
 				$hintbox_text);
@@ -220,7 +220,7 @@ class testFormApiTokens extends CWebTest {
 
 				// Check warning in case if token is already expired.
 				if (CTestArrayHelper::get($data, 'already_expired')) {
-					$form->getField('Expires at:')->query('xpath:./span[@data-hintbox]')->one()->click();
+					$form->getField('Expires at:')->query('xpath:./a[@data-hintbox]')->one()->click();
 					$hintbox_text = $this->query('xpath://div[@class="overlay-dialogue"]')->one()->waitUntilVisible()->getText();
 					$this->assertEquals('The token has expired. Please update the expiry date to use the token.', $hintbox_text);
 
diff --git a/ui/tests/selenium/testFormAdministrationGeneralGUI.php b/ui/tests/selenium/testFormAdministrationGeneralGUI.php
index 9d4ae587ca2..046d1ea6c16 100644
--- a/ui/tests/selenium/testFormAdministrationGeneralGUI.php
+++ b/ui/tests/selenium/testFormAdministrationGeneralGUI.php
@@ -90,7 +90,7 @@ class testFormAdministrationGeneralGUI extends testFormAdministrationGeneral {
 			$this->assertEquals($limit, $this->query('id', $id)->one()->getAttribute('maxlength'));
 		}
 
-		$this->query('xpath://span[@class="icon-info status-red"]')->one()->click();
+		$this->query('xpath://a[@class="icon-info status-red"]')->one()->click();
 		$this->assertEquals(
 			'You are not able to choose some of the languages,'.
 				' because locales for them are not installed on the web server.',
diff --git a/ui/tests/selenium/testFormTrigger.php b/ui/tests/selenium/testFormTrigger.php
index ee013be2e5c..365fe081418 100644
--- a/ui/tests/selenium/testFormTrigger.php
+++ b/ui/tests/selenium/testFormTrigger.php
@@ -910,14 +910,14 @@ class testFormTrigger extends CLegacyWebTest {
 				}
 				if (isset($constructor['elementError'])) {
 					$count = CTestArrayHelper::get($constructor, 'element_count', 1);
-					$this->assertEquals($count, $this->query('xpath://span[@class="icon-info status-red"]')->all()->count());
+					$this->assertEquals($count, $this->query('xpath://a[@class="icon-info status-red"]')->all()->count());
 					$text = $this->query('xpath://tr[1]//div[@class="hint-box"]')->one()->getText();
 					foreach ($constructor['errors'] as $error) {
 						$this->assertStringContainsString($error, $text);
 					}
 				}
 				else {
-					$this->zbxTestAssertElementNotPresentXpath('//span[@class="icon-info status-red"]');
+					$this->zbxTestAssertElementNotPresentXpath('//a[@class="icon-info status-red"]');
 				}
 			}
 		}
diff --git a/ui/tests/selenium/testFormTriggerPrototype.php b/ui/tests/selenium/testFormTriggerPrototype.php
index 5eb7aef2cb8..4d28a7d2bd0 100644
--- a/ui/tests/selenium/testFormTriggerPrototype.php
+++ b/ui/tests/selenium/testFormTriggerPrototype.php
@@ -866,14 +866,14 @@ class testFormTriggerPrototype extends CLegacyWebTest {
 
 				if (isset($constructor['elementError'])) {
 					$count = CTestArrayHelper::get($constructor, 'element_count', 1);
-					$this->assertEquals($count, $this->query('xpath://span[@class="icon-info status-red"]')->all()->count());
+					$this->assertEquals($count, $this->query('xpath://a[@class="icon-info status-red"]')->all()->count());
 					$text = $this->query('xpath://tr[1]//div[@class="hint-box"]')->one()->getText();
 					foreach ($constructor['errors'] as $error) {
 						$this->assertStringContainsString($error, $text);
 					}
 				}
 				else {
-					$this->zbxTestAssertElementNotPresentXpath('//span[@class="icon-info status-red"]');
+					$this->zbxTestAssertElementNotPresentXpath('//a[@class="icon-info status-red"]');
 				}
 			}
 		}
diff --git a/ui/tests/selenium/testLanguage.php b/ui/tests/selenium/testLanguage.php
index 69b9f3a9596..77bbae3562c 100644
--- a/ui/tests/selenium/testLanguage.php
+++ b/ui/tests/selenium/testLanguage.php
@@ -96,7 +96,7 @@ class testLanguage extends CWebTest {
 		$this->checkLanguage($data['message'], $data['page_title'], $data['body_lang'], $data['defaultdb_lang']);
 
 		// Red info icon check.
-		$this->query('xpath://span[@class="icon-info status-red"]')->one()->click();
+		$this->query('xpath://a[@class="icon-info status-red"]')->one()->click();
 		$this->assertEquals($data['info'], $this->query('class:red')->one()->getText());
 
 		// After logout, warning message and login menu has system language.
@@ -168,7 +168,7 @@ class testLanguage extends CWebTest {
 		$form = $this->query('name:user_form')->one()->asForm();
 
 		// Red info icon check.
-		$this->query('xpath://span[@class="icon-info status-red"]')->one()->click();
+		$this->query('xpath://a[@class="icon-info status-red"]')->one()->click();
 		$this->assertEquals($data['info'], $this->query('class:red')->one()->getText());
 
 		// Change user language to different from System.
diff --git a/ui/tests/selenium/testPageLatestData.php b/ui/tests/selenium/testPageLatestData.php
index 66ed600618d..236cd680b43 100644
--- a/ui/tests/selenium/testPageLatestData.php
+++ b/ui/tests/selenium/testPageLatestData.php
@@ -247,7 +247,7 @@ class testPageLatestData extends CWebTest {
 		$form->fill(['Hosts' => 'Available host in maintenance']);
 		$form->submit();
 
-		$this->query('xpath://span['.CXPathHelper::fromClass('icon-maintenance').']')->waitUntilClickable()->one()->click();
+		$this->query('xpath://a['.CXPathHelper::fromClass('icon-maintenance').']')->waitUntilClickable()->one()->click();
 		$hint = $this->query('xpath://div[@data-hintboxid]')->asOverlayDialog()->waitUntilPresent()->all()->last()->getText();
 		$hint_text = "Maintenance for Host availability widget [Maintenance with data collection]\n".
 				"Maintenance for checking Show hosts in maintenance option in Host availability widget";
diff --git a/ui/tests/selenium/testPageProblems.php b/ui/tests/selenium/testPageProblems.php
index 546603f8261..d39c35e6268 100644
--- a/ui/tests/selenium/testPageProblems.php
+++ b/ui/tests/selenium/testPageProblems.php
@@ -673,7 +673,7 @@ class testPageProblems extends CLegacyWebTest {
 		$this->zbxTestAssertElementText('//div[@class="table-stats"]', 'Displaying 1 of 1 found');
 
 		// Click on suppression icon and check text in hintbox.
-		$this->zbxTestClickXpathWait('//tbody/tr/td[8]/div/span[contains(@class, "icon-invisible")]');
+		$this->zbxTestClickXpathWait('//tbody/tr/td[8]/div/a[contains(@class, "icon-invisible")]');
 		$this->zbxTestAssertElementText('//div[@data-hintboxid]', 'Suppressed till: 12:17 Maintenance: Maintenance for suppression test');
 	}
 }
diff --git a/ui/tests/selenium/testPageTriggerDescription.php b/ui/tests/selenium/testPageTriggerDescription.php
index 2a2e6ac2be4..8aacb0b85b7 100644
--- a/ui/tests/selenium/testPageTriggerDescription.php
+++ b/ui/tests/selenium/testPageTriggerDescription.php
@@ -93,7 +93,7 @@ class testPageTriggerDescription extends CWebTest {
 		$row = $table->findRow('Problem', $data['Trigger name'], true);
 
 		if (CTestArrayHelper::get($data, 'description', false)) {
-			$row->query('xpath:.//span[contains(@class, "icon-description")]')->one()->click();
+			$row->query('xpath:.//a[contains(@class, "icon-description")]')->one()->click();
 			$overlay = $this->query('xpath://div[@class="overlay-dialogue"]')->asOverlayDialog()->one()->waitUntilReady();
 			$this->assertEquals($data['description'], $overlay->getText());
 
diff --git a/ui/tests/selenium/testPasswordComplexity.php b/ui/tests/selenium/testPasswordComplexity.php
index 86f508ddbb9..3447783708b 100644
--- a/ui/tests/selenium/testPasswordComplexity.php
+++ b/ui/tests/selenium/testPasswordComplexity.php
@@ -121,7 +121,7 @@ class testPasswordComplexity extends CWebTest {
 
 		foreach ($hintboxes as $hintbox) {
 			// Summon the hint-box.
-			$form->query('xpath://label[text()='.zbx_dbstr($hintbox['field']).']//span')->one()->click();
+			$form->query('xpath://label[text()='.zbx_dbstr($hintbox['field']).']//a')->one()->click();
 			$hint = $form->query('xpath://div[@class="overlay-dialogue"]')->waitUntilPresent();
 
 			// Assert text.
@@ -1082,7 +1082,7 @@ class testPasswordComplexity extends CWebTest {
 
 		if (array_key_exists('hint', $data)) {
 			// Summon hint-box and assert text accordingly to password complexity settings, then close hint-box.
-			$user_form->query('xpath://label[text()="Password"]//span')->one()->click();
+			$user_form->query('xpath://label[text()="Password"]//a')->one()->click();
 			$hint = $user_form->query('xpath://div[@class="overlay-dialogue"]')->waitUntilPresent();
 			$this->assertEquals($data['hint'], $hint->one()->getText());
 			$hint->one()->query('xpath:.//button[@class="overlay-close-btn"]')->one()->click();
@@ -1090,7 +1090,7 @@ class testPasswordComplexity extends CWebTest {
 		}
 		else {
 			// If password can be 1 symbol long and doesn't have any complexity rules hint is not shown at all.
-			$this->assertFalse($user_form->query('xpath://label[text()="Password"]//span')->exists());
+			$this->assertFalse($user_form->query('xpath://label[text()="Password"]//a')->exists());
 		}
 
 		$user_form->fill([