From f3cbfb68f46f30c7d0e4090c90abc544748ebcfc Mon Sep 17 00:00:00 2001 From: ezenzen Date: Wed, 17 Mar 2021 11:05:24 +0100 Subject: [PATCH 1/2] General Variables- and Accessibility-Fixes 2.2_focus-mixin --- .../default/MainControls/mainbar.less | 6 +- templates/default/delos.css | 75 ++++++++----------- templates/default/less/tab-focus-mixin.less | 61 +++------------ 3 files changed, 48 insertions(+), 94 deletions(-) diff --git a/src/UI/templates/default/MainControls/mainbar.less b/src/UI/templates/default/MainControls/mainbar.less index 9ba35cc7e37f..0a0a0aa2fde0 100644 --- a/src/UI/templates/default/MainControls/mainbar.less +++ b/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 { diff --git a/templates/default/delos.css b/templates/default/delos.css index 320ff01d90c1..a5f7d6b9e14f 100644 --- a/templates/default/delos.css +++ b/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 { diff --git a/templates/default/less/tab-focus-mixin.less b/templates/default/less/tab-focus-mixin.less index 162abeba23c4..ac02077cb02c 100644 --- a/templates/default/less/tab-focus-mixin.less +++ b/templates/default/less/tab-focus-mixin.less @@ -1,7 +1,15 @@ -:focus-visible { - outline: @il-focus-outline; +// 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-tab-focus(){ &:focus-visible{ @@ -12,49 +20,4 @@ &:active,&.engaged{ outline: none; } -} - -a:focus { - outline-offset: 0px; - } -a:focus-visible { - outline: @il-focus-outline; -} - -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: @il-focus-outline; -} - -.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: @il-focus-outline; -} - -.btn-bulky:focus-visible, -.link-bulky:focus-visible { - border: 2px solid @il-focus-color; - outline: none !important; -} -#tinymce:focus-visible { - outline: none !important; -} +} \ No newline at end of file From c155839f9ee555753a12b32ff43e35a807fad621 Mon Sep 17 00:00:00 2001 From: ezenzen Date: Wed, 17 Mar 2021 15:25:11 +0100 Subject: [PATCH 2/2] General Variables- and Accessibility-Fixes 2.3 --- src/UI/templates/default/Button/button.less | 2 +- src/UI/templates/default/Link/link.less | 2 +- templates/default/delos.css | 3 +++ templates/default/delos.less | 2 +- .../default/less/Services/UIComponent/Explorer2/delos.less | 4 ++++ .../default/less/{tab-focus-mixin.less => focus-mixin.less} | 2 +- 6 files changed, 11 insertions(+), 4 deletions(-) rename templates/default/less/{tab-focus-mixin.less => focus-mixin.less} (97%) diff --git a/src/UI/templates/default/Button/button.less b/src/UI/templates/default/Button/button.less index 7591d6e2d6df..dd61e78b0b86 100644 --- a/src/UI/templates/default/Button/button.less +++ b/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. diff --git a/src/UI/templates/default/Link/link.less b/src/UI/templates/default/Link/link.less index 5ead8d7120c8..e3e3d69ccb10 100644 --- a/src/UI/templates/default/Link/link.less +++ b/src/UI/templates/default/Link/link.less @@ -1,5 +1,5 @@ .il-link{ - .il-tab-focus(); + .il-focus(); } diff --git a/templates/default/delos.css b/templates/default/delos.css index a5f7d6b9e14f..176ad4572c66 100644 --- a/templates/default/delos.css +++ b/templates/default/delos.css @@ -13284,6 +13284,9 @@ img.il_ExplorerIcon { height: 20px; width: 20px; } +.ilExplorerContainer { + padding: 2px 0 6px 0; +} .ilExplorerContainer .jstree-default .jstree-anchor { height: auto; } diff --git a/templates/default/delos.less b/templates/default/delos.less index 60dd2f162654..a69eb6093e2f 100644 --- a/templates/default/delos.less +++ b/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 */ diff --git a/templates/default/less/Services/UIComponent/Explorer2/delos.less b/templates/default/less/Services/UIComponent/Explorer2/delos.less index 2adbeca560f2..981b12155552 100644 --- a/templates/default/less/Services/UIComponent/Explorer2/delos.less +++ b/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; } diff --git a/templates/default/less/tab-focus-mixin.less b/templates/default/less/focus-mixin.less similarity index 97% rename from templates/default/less/tab-focus-mixin.less rename to templates/default/less/focus-mixin.less index ac02077cb02c..32809b9adf9d 100644 --- a/templates/default/less/tab-focus-mixin.less +++ b/templates/default/less/focus-mixin.less @@ -11,7 +11,7 @@ } } -.il-tab-focus(){ +.il-focus(){ &:focus-visible{ outline: @il-focus-outline; outline-offset: 0px;