Add background to focus (ILIAS-eLearning#4100)

* Add a border on a white background to focus * Fix Webdav View-Control * Line Break issue in mainbar on Small Screens when focused. * Fix issues from review
klees · Mar 17, 2022 · f33dc35 · f33dc35
1 parent 398dd0f
commit f33dc35
Show file tree

Hide file tree

Showing 17 changed files with 355 additions and 94 deletions.
diff --git a/Services/WebDAV/classes/mount_instructions/class.ilWebDAVMountInstructionsGUI.php b/Services/WebDAV/classes/mount_instructions/class.ilWebDAVMountInstructionsGUI.php
@@ -119,7 +119,7 @@ public function buildGUIFromGivenMountInstructions($a_mount_instructions, $a_ren
 
         // Add view control and legacy add the beginning of the array (so they will be rendered first)
         $header_comps = array(
-            $f->legacy("<div style='text-align: center'>"),
+            $f->legacy("<div class='webdav-view-control'>"),
             $view_control,
             $f->legacy("</div>"),
             $js_function_legacy);

diff --git a/src/UI/templates/default/Breadcrumbs/breadcrumbs.less b/src/UI/templates/default/Breadcrumbs/breadcrumbs.less
@@ -20,6 +20,13 @@
 			&:hover {
 				color: @il-standard-page-breadcrumbs-active-color;
 			}
+			&:focus {
+				border: @il-focus-outline-inner;
+
+				&::after {
+					content: none;
+				}
+			}
 		}
 
 		&>span+span:before {

diff --git a/src/UI/templates/default/Button/button.less b/src/UI/templates/default/Button/button.less
@@ -17,15 +17,12 @@ input.btn{
 .btn-default {
   .button-variant(@il-btn-standard-color; @il-btn-standard-bg; @il-btn-standard-border);
   &:focus-visible {
-    outline-offset: @il-focus-outline-offset;
+    position: relative;
   }
 }
 
 .btn-primary {
   .button-variant(@il-btn-primary-color; @il-btn-primary-bg; @il-btn-primary-border);
-  &:focus-visible {
-    outline-offset: @il-focus-outline-offset;
-  }
 }
 
 .btn, .btn.btn-tag{

diff --git a/src/UI/templates/default/Card/card.less b/src/UI/templates/default/Card/card.less
@@ -15,8 +15,16 @@
 		overflow: hidden;
 	}
 
-	.thumbnail{
+	&.thumbnail{
 		margin-bottom: 0px;
+
+		&:focus-within .il-card-repository-head {
+			z-index: 1;
+		}
+
+		a:focus-visible {
+			overflow: visible;
+		}
 	}
 	.card-highlight {
 		background: @il-card-highlight-bg;
@@ -98,6 +106,11 @@
 						margin-left: auto;
 						margin-right: auto;
 					}
+
+					&:focus-visible {
+						overflow: visible;
+						outline-offset: @il-focus-outline-inner-width + @il-focus-outline-outer-width - 1;
+					}
 				}
 			}
 		}

diff --git a/src/UI/templates/default/Item/item.less b/src/UI/templates/default/Item/item.less
@@ -14,6 +14,10 @@
 		.btn-link, a {
 			font-size: inherit;
 			line-height: @line-height-base;
+
+			&:focus-visible {
+				display: block;
+			}
 		}
 	}
 

diff --git a/src/UI/templates/default/MainControls/Slate/slate.less b/src/UI/templates/default/MainControls/Slate/slate.less
@@ -20,18 +20,18 @@
 		display: flex;
 		margin-bottom: @il-slate-content-spacing;
 		position: relative;
-		&.engaged:after,
-		&.disengaged:after {
+		&.engaged::before,
+		&.disengaged::before {
 				font-family: "il-icons";
 				font-size: @il-slate-bulky-glyph-size * 0.85;
 				position: absolute;
 				right: 10px;
 				top: 20px;
 		}
-		&.engaged:after {
+		&.engaged::before {
 				content: " \e604";
 		}
-		&.disengaged:after {
+		&.disengaged::before {
 				content: " \e606";
 		}
 		&:focus{

diff --git a/src/UI/templates/default/MainControls/mainbar.less b/src/UI/templates/default/MainControls/mainbar.less
@@ -22,11 +22,16 @@
 		line-height: @il-mainbar-btn-label-size * @line-height-large;
 		&:focus,
 		&:active {
-			box-shadow: none; 
+			box-shadow: none;
 		}
-		&:focus-visible {
-			border: 3px solid @il-focus-color;
+		&:focus-visible,
+		&:active:focus-visible {
+			border: @il-focus-outline-inner;
 			outline: none;
+
+			&::after {
+				content: none;
+			}
 		}
 	}
 	.bulky-label {