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

16 files changed, 557 insertions, 196 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/base/_colors.scss b/sass/stylesheets/sass/base/_colors.scss
index 65d603dce45..5e9f9b51e9f 100644
--- a/sass/stylesheets/sass/base/_colors.scss
+++ b/sass/stylesheets/sass/base/_colors.scss
@@ -154,6 +154,7 @@ $btn-form-font-color: #1f2c33 !default;
 $btn-form-bg-color: $form-bg-color !default;
 $btn-form-hover-color: #e8f5ff !default;
 $btn-form-border-color: $form-border-color !default;
+$btn-border-focus-color: rgba(#1e87e3, .35) !default;
 
 $btn-disabled-font-color: #acbbc2 !default;
 $btn-disabled-bg-color: #ebebeb !default;
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index ecd33b9eed7..f37e7a1f3e6 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -440,23 +440,21 @@ $diff-removed-bg-color: transparent;
 }
 
 $var-icons: (
-	maint: 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:
-//  .icon-maint
+//  .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;
 		&::before {
-			background: $bgimage;
-			@extend %var-icons;
+			background-position: $bgimage;
 		}
 	}
 }
@@ -934,8 +932,12 @@ a.link-action {
 				}
 			}
 
-			.icon-maint::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 c43aabe3d8f..6193a5539cb 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -367,23 +367,21 @@ $diff-removed-bg-color: transparent;
 }
 
 $var-icons: (
-	maint: 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:
-//  .icon-maint
+//  .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;
 		&::before {
-			background: $bgimage;
-			@extend %var-icons;
+			background-position: $bgimage;
 		}
 	}
 }
@@ -811,8 +809,16 @@ a.link-action {
 
 			box-shadow: inset 0 -1px 0 0 $table-border-color;
 
-			.icon-maint::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 701caa71484..2d451b56bed 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -307,6 +307,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-'] {
@@ -427,6 +439,7 @@ form {
 				&::after {
 					margin: 0;
 					line-height: 14px;
+					top: 0;
 				}
 
 				&:last-of-type {
@@ -434,11 +447,6 @@ form {
 				}
 			}
 
-			[class*='icon-depend-'] {
-				width: 12px;
-				margin-right: 0;
-			}
-
 			.rel-container {
 				span {
 					margin: 0;
@@ -465,12 +473,11 @@ form {
 				}
 			}
 
-			.icon-maint {
-				position: relative;
-				display: inline-block;
+			.icon-maintenance {
 				height: 12px;
 				width: 12px;
-				margin: 3px 1px 2px 2px !important;
+				margin: 3px 1px 2px 4px;
+
 
 				&::before {
 					height: 12px;
@@ -479,6 +486,19 @@ form {
 				}
 			}
 
+			.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;
@@ -2605,23 +2625,43 @@ button[disabled] {
 }
 
 $var-icons: (
-	maint: url($sprite-path) no-repeat -46px -802px,
-	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-maint
+//  .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;
+		}
+
+		&:link,
+		&:hover,
+		&:focus {
+			border-bottom: none;
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 2px $btn-border-focus-color;
 		}
 	}
 }
@@ -2730,6 +2770,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;
@@ -2740,6 +2790,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.
@@ -5657,7 +5723,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: '?';
diff --git a/ui/assets/styles/blue-theme.css b/ui/assets/styles/blue-theme.css
index 5e401129dbc..6628040cb8c 100644
--- a/ui/assets/styles/blue-theme.css
+++ b/ui/assets/styles/blue-theme.css
@@ -2273,6 +2273,12 @@ form.is-loading {
       margin-right: 4px; }
     .list-table .action-container [class*='icon-'] {
       flex-shrink: 0; }
+  .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,
@@ -2322,12 +2328,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 {
@@ -2345,16 +2349,21 @@ form.is-loading {
       @media screen and (min-width: 1600px) {
         .list-table.compact-view td .tag {
           max-width: 133px; } }
-    .list-table.compact-view td .icon-maint {
-      position: relative;
-      display: inline-block;
+    .list-table.compact-view td .icon-maintenance {
       height: 12px;
       width: 12px;
-      margin: 3px 1px 2px 2px !important; }
-      .list-table.compact-view td .icon-maint::before {
+      margin: 3px 1px 2px 4px; }
+      .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
         background-position: -48px -804px; }
+    .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?20200407") no-repeat -6px -624px;
       height: 12px;
@@ -3693,25 +3702,77 @@ z-select[disabled] button,
   display: inline-block;
   margin: 0 14px 0 0; }
 
-.icon-maint {
-  margin: 0 18px 0 0; }
-  .icon-maint::before {
-    background: url("../img/icon-sprite.svg?20200407") no-repeat -46px -802px; }
+.icon-maintenance {
+  margin: 0 18px 0 0;
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-maintenance::before {
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  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?20200407") no-repeat -49px -729px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  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?20200407") no-repeat -49px -765px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  margin: 0 18px 0 0;
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20200407") no-repeat -45px -693px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
@@ -3752,7 +3813,7 @@ z-select[disabled] button,
     opacity: 1;
     background-color: transparent; }
 
-.icon-maint::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
+.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
   display: inline-block;
   width: 18px;
   height: 18px;
@@ -3770,6 +3831,10 @@ z-select[disabled] button,
   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;
@@ -3779,6 +3844,10 @@ z-select[disabled] button,
     width: 14px;
     height: 14px;
     background: url("../img/icon-sprite.svg?20200407") 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;
@@ -5861,7 +5930,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; }
diff --git a/ui/assets/styles/dark-theme.css b/ui/assets/styles/dark-theme.css
index 2b3c23c6c87..7f8b21f0135 100644
--- a/ui/assets/styles/dark-theme.css
+++ b/ui/assets/styles/dark-theme.css
@@ -2286,6 +2286,12 @@ form.is-loading {
       margin-right: 4px; }
     .list-table .action-container [class*='icon-'] {
       flex-shrink: 0; }
+  .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,
@@ -2333,12 +2339,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 {
@@ -2356,16 +2360,21 @@ form.is-loading {
       @media screen and (min-width: 1600px) {
         .list-table.compact-view td .tag {
           max-width: 133px; } }
-    .list-table.compact-view td .icon-maint {
-      position: relative;
-      display: inline-block;
+    .list-table.compact-view td .icon-maintenance {
       height: 12px;
       width: 12px;
-      margin: 3px 1px 2px 2px !important; }
-      .list-table.compact-view td .icon-maint::before {
+      margin: 3px 1px 2px 4px; }
+      .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
         background-position: -48px -804px; }
+    .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?20200407") no-repeat -6px -624px;
       height: 12px;
@@ -3704,25 +3713,77 @@ z-select[disabled] button,
   display: inline-block;
   margin: 0 14px 0 0; }
 
-.icon-maint {
-  margin: 0 18px 0 0; }
-  .icon-maint::before {
-    background: url("../img/icon-sprite.svg?20200407") no-repeat -46px -802px; }
+.icon-maintenance {
+  margin: 0 18px 0 0;
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-maintenance::before {
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  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?20200407") no-repeat -49px -729px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  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?20200407") no-repeat -49px -765px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  margin: 0 18px 0 0;
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20200407") no-repeat -45px -693px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
@@ -3763,7 +3824,7 @@ z-select[disabled] button,
     opacity: 1;
     background-color: transparent; }
 
-.icon-maint::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
+.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
   display: inline-block;
   width: 18px;
   height: 18px;
@@ -3781,6 +3842,10 @@ z-select[disabled] button,
   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;
@@ -3790,6 +3855,10 @@ z-select[disabled] button,
     width: 14px;
     height: 14px;
     background: url("../img/icon-sprite.svg?20200407") 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;
@@ -5872,7 +5941,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; }
diff --git a/ui/assets/styles/hc-dark.css b/ui/assets/styles/hc-dark.css
index fa1593d33b5..b3a2761bd74 100644
--- a/ui/assets/styles/hc-dark.css
+++ b/ui/assets/styles/hc-dark.css
@@ -2260,6 +2260,12 @@ form.is-loading {
       margin-right: 4px; }
     .list-table .action-container [class*='icon-'] {
       flex-shrink: 0; }
+  .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 {
@@ -2286,12 +2292,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 {
@@ -2309,16 +2313,21 @@ form.is-loading {
       @media screen and (min-width: 1600px) {
         .list-table.compact-view td .tag {
           max-width: 133px; } }
-    .list-table.compact-view td .icon-maint {
-      position: relative;
-      display: inline-block;
+    .list-table.compact-view td .icon-maintenance {
       height: 12px;
       width: 12px;
-      margin: 3px 1px 2px 2px !important; }
-      .list-table.compact-view td .icon-maint::before {
+      margin: 3px 1px 2px 4px; }
+      .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
         background-position: -48px -804px; }
+    .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?20200407") no-repeat -6px -624px;
       height: 12px;
@@ -3657,25 +3666,77 @@ z-select[disabled] button,
   display: inline-block;
   margin: 0 14px 0 0; }
 
-.icon-maint {
-  margin: 0 18px 0 0; }
-  .icon-maint::before {
-    background: url("../img/icon-sprite.svg?20200407") no-repeat -46px -802px; }
+.icon-maintenance {
+  margin: 0 18px 0 0;
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-maintenance::before {
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  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?20200407") no-repeat -49px -729px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  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?20200407") no-repeat -49px -765px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  margin: 0 18px 0 0;
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20200407") no-repeat -45px -693px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
@@ -3716,7 +3777,7 @@ z-select[disabled] button,
     opacity: 1;
     background-color: transparent; }
 
-.icon-maint::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
+.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
   display: inline-block;
   width: 18px;
   height: 18px;
@@ -3734,6 +3795,10 @@ z-select[disabled] button,
   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;
@@ -3743,6 +3808,10 @@ z-select[disabled] button,
     width: 14px;
     height: 14px;
     background: url("../img/icon-sprite.svg?20200407") 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;
@@ -5816,7 +5885,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: #000000; }
@@ -6432,25 +6507,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-maint {
-  margin: 0 18px 0 0; }
-  .icon-maint::before {
-    background: url("../img/icon-sprite.svg?20200407") 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?20200407") 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?20200407") 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?20200407") no-repeat -357px -693px; }
+.icon-ackn::before {
+  background-position: -357px -693px; }
 
 .icon-cal {
   background: transparent url("../img/icon-sprite.svg?20200407") no-repeat -354px -834px; }
@@ -6739,8 +6806,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-maint::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?20200407") no-repeat -318px -624px; }
 
diff --git a/ui/assets/styles/hc-light.css b/ui/assets/styles/hc-light.css
index 2dde817c1ca..16098114212 100644
--- a/ui/assets/styles/hc-light.css
+++ b/ui/assets/styles/hc-light.css
@@ -2260,6 +2260,12 @@ form.is-loading {
       margin-right: 4px; }
     .list-table .action-container [class*='icon-'] {
       flex-shrink: 0; }
+  .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 {
@@ -2286,12 +2292,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 {
@@ -2309,16 +2313,21 @@ form.is-loading {
       @media screen and (min-width: 1600px) {
         .list-table.compact-view td .tag {
           max-width: 133px; } }
-    .list-table.compact-view td .icon-maint {
-      position: relative;
-      display: inline-block;
+    .list-table.compact-view td .icon-maintenance {
       height: 12px;
       width: 12px;
-      margin: 3px 1px 2px 2px !important; }
-      .list-table.compact-view td .icon-maint::before {
+      margin: 3px 1px 2px 4px; }
+      .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
         background-position: -48px -804px; }
+    .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?20200407") no-repeat -6px -624px;
       height: 12px;
@@ -3657,25 +3666,77 @@ z-select[disabled] button,
   display: inline-block;
   margin: 0 14px 0 0; }
 
-.icon-maint {
-  margin: 0 18px 0 0; }
-  .icon-maint::before {
-    background: url("../img/icon-sprite.svg?20200407") no-repeat -46px -802px; }
+.icon-maintenance {
+  margin: 0 18px 0 0;
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
+  .icon-maintenance::before {
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  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?20200407") no-repeat -49px -729px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  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?20200407") no-repeat -49px -765px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
+  margin: 0 18px 0 0;
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px; }
   .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20200407") no-repeat -45px -693px; }
+    background: url("../img/icon-sprite.svg?20200407") 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; }
@@ -3716,7 +3777,7 @@ z-select[disabled] button,
     opacity: 1;
     background-color: transparent; }
 
-.icon-maint::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
+.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before {
   display: inline-block;
   width: 18px;
   height: 18px;
@@ -3734,6 +3795,10 @@ z-select[disabled] button,
   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;
@@ -3743,6 +3808,10 @@ z-select[disabled] button,
     width: 14px;
     height: 14px;
     background: url("../img/icon-sprite.svg?20200407") 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;
@@ -5816,7 +5885,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; }
@@ -6407,25 +6482,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-maint {
-  margin: 0 18px 0 0; }
-  .icon-maint::before {
-    background: url("../img/icon-sprite.svg?20200407") 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?20200407") 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?20200407") 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?20200407") no-repeat -203px -693px; }
+.icon-ackn::before {
+  background-position: -203px -693px; }
 
 .icon-cal {
   background: transparent url("../img/icon-sprite.svg?20200407") no-repeat -201px -834px; }
@@ -6670,8 +6737,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-maint::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?20200407") no-repeat -318px -624px; }
   .list-table.compact-view td .icon-wzrd-action {
     background: transparent url("../img/icon-sprite.svg?20200407") no-repeat -165px -624px; }
 
diff --git a/ui/include/defines.inc.php b/ui/include/defines.inc.php
index a97ecd9001c..4074d26ae11 100644
--- a/ui/include/defines.inc.php
+++ b/ui/include/defines.inc.php
@@ -1806,7 +1806,7 @@ define('ZBX_STYLE_ICON_INFO', 'icon-info');
 define('ZBX_STYLE_ICON_INVISIBLE', 'icon-invisible');
 define('ZBX_STYLE_ICON_USER', 'icon-user');
 define('ZBX_STYLE_ICON_USER_GROUP', 'icon-user-group');
-define('ZBX_STYLE_ICON_MAINT', 'icon-maint');
+define('ZBX_STYLE_ICON_MAINTENANCE', 'icon-maintenance');
 define('ZBX_STYLE_ICON_WZRD_ACTION', 'icon-wzrd-action');
 define('ZBX_STYLE_ACTION_COMMAND', 'icon-action-command');
 define('ZBX_STYLE_ACTION_ICON_CLOSE', 'icon-action-close');
diff --git a/ui/include/html.inc.php b/ui/include/html.inc.php
index 1a2d98a2db8..06a700e96e2 100644
--- a/ui/include/html.inc.php
+++ b/ui/include/html.inc.php
@@ -907,10 +907,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);
@@ -923,7 +923,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
@@ -934,9 +934,8 @@ function makeMaintenanceIcon($type, $name, $description) {
 		$hint .= "\n".$description;
 	}
 
-	return (new CSpan())
-		->addClass(ZBX_STYLE_ICON_MAINT)
-		->addClass(ZBX_STYLE_CURSOR_POINTER)
+	return (new CLink())
+		->addClass(ZBX_STYLE_ICON_MAINTENANCE)
 		->setHint($hint);
 }
 
@@ -947,17 +946,16 @@ 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'));
+	$suppress_until = max(array_column($icon_data, 'suppress_until'));
 
 	CArrayHelper::sort($icon_data, ['maintenance_name']);
-	$maintenance_names = implode(', ', zbx_objectValues($icon_data, 'maintenance_name'));
+	$maintenance_names = implode(', ', array_column($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)
@@ -1018,12 +1016,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);
 }
 
@@ -1032,38 +1029,24 @@ 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);
 }
 
 /**
- * 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 96fe790c651..f5ba6a451a9 100644
--- a/ui/include/triggers.inc.php
+++ b/ui/include/triggers.inc.php
@@ -2580,7 +2580,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/testFormTrigger.php b/ui/tests/selenium/testFormTrigger.php
index fcb4535723b..38fb2199e9b 100644
--- a/ui/tests/selenium/testFormTrigger.php
+++ b/ui/tests/selenium/testFormTrigger.php
@@ -866,14 +866,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 1cd7dc7d922..af8f5b12b7a 100644
--- a/ui/tests/selenium/testFormTriggerPrototype.php
+++ b/ui/tests/selenium/testFormTriggerPrototype.php
@@ -865,14 +865,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/testPageProblems.php b/ui/tests/selenium/testPageProblems.php
index e6dd0bf99d6..b29a529e7fe 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());