Merge pull request #8 from ezenzen/css_squad_branch_zenzen_II

General Variables- and Accessibility-Fixes 2.2_focus-mixin

src/UI/templates/default/Button/button.less

@@ -1,6 +1,6 @@
 .btn {
 	font-size: @il-button-font-size;
-	.il-tab-focus();
+	.il-focus();
 }
 
 //This is legacy for the old forms implementation. Can be removed as soon as the old implementation is removed.

src/UI/templates/default/Link/link.less

@@ -1,5 +1,5 @@
 .il-link{
-	.il-tab-focus();
+	.il-focus();
 }
 
 

src/UI/templates/default/MainControls/mainbar.less

@@ -7,7 +7,11 @@
 		line-height: @il-mainbar-btn-label-size * @line-height-large;
 		&:focus,
 		&:active {
-			box-shadow: none;
+			box-shadow: none; 
+		}
+		&:focus-visible {
+			border: 2px solid @il-focus-color;
+			outline: none;
 		}
 	}
 	.bulky-label {

templates/default/delos.css

@@ -1123,6 +1123,11 @@ a:focus {
 a:focus {
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
+  outline: none;
+  outline-offset: 0px;
+}
+a:focus:focus-visible {
+  outline: 2px solid #0078D7;
 }
 figure {
   margin: 0;
@@ -2713,6 +2718,13 @@ input[type="radio"]:focus,
 input[type="checkbox"]:focus {
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
+  outline: none;
+  outline-offset: 0px;
+}
+input[type="file"]:focus:focus-visible,
+input[type="radio"]:focus:focus-visible,
+input[type="checkbox"]:focus:focus-visible {
+  outline: 2px solid #0078D7;
 }
 output {
   display: block;
@@ -3192,6 +3204,16 @@ select[multiple].input-lg {
 .btn.active.focus {
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
+  outline: none;
+  outline-offset: 0px;
+}
+.btn:focus:focus-visible,
+.btn:active:focus:focus-visible,
+.btn.active:focus:focus-visible,
+.btn.focus:focus-visible,
+.btn:active.focus:focus-visible,
+.btn.active.focus:focus-visible {
+  outline: 2px solid #0078D7;
 }
 .btn:hover,
 .btn:focus,
@@ -9645,6 +9667,13 @@ footer {
 .il-maincontrols-metabar .link-bulky:active {
   box-shadow: none;
 }
+.il-maincontrols-mainbar .btn-bulky:focus-visible,
+.il-maincontrols-metabar .btn-bulky:focus-visible,
+.il-maincontrols-mainbar .link-bulky:focus-visible,
+.il-maincontrols-metabar .link-bulky:focus-visible {
+  border: 2px solid #0078D7;
+  outline: none;
+}
 .il-maincontrols-mainbar .bulky-label,
 .il-maincontrols-metabar .bulky-label {
   white-space: normal;
@@ -11345,50 +11374,6 @@ the il- variable in your less code and not the boostrap variable in your less co
     display: none;
   }
 }
-:focus-visible {
-  outline: 2px solid #0078D7;
-  outline-offset: 0px;
-}
-a:focus {
-  outline-offset: 0px;
-}
-a:focus-visible {
-  outline: 2px solid #0078D7;
-}
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
-  outline-offset: 0px;
-}
-input[type="file"]:focus-visible,
-input[type="radio"]:focus-visible,
-input[type="checkbox"]:focus-visible {
-  outline: 2px solid #0078D7;
-}
-.btn:focus,
-.btn:active:focus,
-.btn.active:focus,
-.btn.focus,
-.btn:active.focus,
-.btn.active.focus {
-  outline-offset: 0px;
-}
-.btn:focus-visible,
-.btn:active:focus-visible,
-.btn.active:focus-visible,
-.btn.focus-visible,
-.btn:active.focus-visible,
-.btn.active.focus-visible {
-  outline: 2px solid #0078D7;
-}
-.btn-bulky:focus-visible,
-.link-bulky:focus-visible {
-  border: 2px solid #0078D7;
-  outline: none !important;
-}
-#tinymce:focus-visible {
-  outline: none !important;
-}
 /* flex grid support start */
 .row-flex {
   display: -webkit-box;
@@ -12122,6 +12107,7 @@ a.il_ItemProperty:hover {
 span.il_ItemAlertProperty {
   color: #B54F00;
 }
+/* Table Links */
 /* --- description text ---*/
 div.il_Description,
 td.il_Description {
@@ -12453,6 +12439,7 @@ a.light:visited {
 a.light:hover {
   color: black;
 }
+/* Messages */
 /* ------------------ blind image - spacer gif --------------
    please use this style class always when using this blind image */
 img.spacer {
@@ -13297,6 +13284,9 @@ img.il_ExplorerIcon {
   height: 20px;
   width: 20px;
 }
+.ilExplorerContainer {
+  padding: 2px 0 6px 0;
+}
 .ilExplorerContainer .jstree-default .jstree-anchor {
   height: auto;
 }

templates/default/delos.less

@@ -124,7 +124,7 @@ All parts that aren't checked yet are actually marked with "rtl-review"
 @import "less/multi-line-cap.less";
 
 // tab focus ilias mixin
-@import "less/tab-focus-mixin.less";
+@import "less/focus-mixin.less";
 
 /* flex grid support start */
 

templates/default/less/Services/UIComponent/Explorer2/delos.less

@@ -215,6 +215,10 @@ img.il_ExplorerIcon {
 	width: 20px;
 }
 
+.ilExplorerContainer {
+    padding: 2px 0 6px 0;
+}
+
 .ilExplorerContainer .jstree-default .jstree-anchor {
 	height: auto;
 }

templates/default/less/focus-mixin.less

@@ -0,0 +1,23 @@
+// In order not to manually overwrite the focus in all places, the following bootstrap focus mixin is overwritten ilias/libs/bower/bower_components/bootstrap/less/mixins/tab-focus.less.
+
+.tab-focus() {
+    // WebKit-specific. Other browsers will keep their default outline style.
+    // (Initially tried to also force default via `outline: initial`,
+    // but that seems to erroneously remove the outline in Firefox altogether.)
+    outline: none;
+    outline-offset: 0px;
+    &:focus-visible {
+        outline: @il-focus-outline;
+    }
+  }
+
+.il-focus(){
+	&:focus-visible{
+		outline: @il-focus-outline;
+		outline-offset: 0px;
+	}
+
+	&:active,&.engaged{
+		outline: none;
+	}
+}