From 460aca5b013d5c50aeed4f208ef8ea967d69fe9e Mon Sep 17 00:00:00 2001 From: Ben Thomson Date: Fri, 10 Apr 2020 01:50:00 +0800 Subject: [PATCH] Reset outline to default - roll back #4895 (#5035) Replaces #4965. Rolls back #4895. Fixes #4964. Partially fixes #4819. The previous attempts to add a stylised "focus" ring, while with the best intentions, did not take into account how "outline" normally works for people using visual aids. Most high contrast software will effect the outline if its available (ie. make it bolder or more prevalant), thus the "outline" property is paramount to maintaining accessibility. The previous changes also present issues with elements using box-shadows already, and again, on high contrast, box-shadows are no longer rendered. This change will bring back the outline property for focus, but with an addition to allow a blue highlight for Firefox, would should keep it in "parity" with WebKit. Refs: - https://a11yproject.com/posts/never-remove-css-outlines/ - http://www.outlinenone.com - https://stackoverflow.com/questions/52589391/css-box-shadow-vs-outline --- modules/backend/assets/css/october.css | 4 ++-- modules/backend/assets/less/layout/mainmenu.less | 1 - modules/system/assets/css/styles.css | 2 +- .../system/assets/ui/less/global.mixins.utility.css | 0 .../system/assets/ui/less/global.mixins.utility.less | 9 ++++++--- modules/system/assets/ui/less/site.normalize.less | 10 ---------- modules/system/assets/ui/storm.css | 7 +++---- 7 files changed, 12 insertions(+), 21 deletions(-) create mode 100644 modules/system/assets/ui/less/global.mixins.utility.css diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index cfe543c40..53e7ed673 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -664,7 +664,7 @@ nav#layout-mainmenu a {text-decoration:none} nav#layout-mainmenu a:focus {background:transparent} nav#layout-mainmenu ul {margin:0;padding:0;list-style:none;float:left;white-space:nowrap;overflow:hidden} nav#layout-mainmenu ul li {color:rgba(255,255,255,0.6);display:inline-block;vertical-align:top;position:relative;margin-right:30px} -nav#layout-mainmenu ul li a {display:inline-block;font-size:14px;color:inherit;outline:none;padding:14px 0 10px} +nav#layout-mainmenu ul li a {display:inline-block;font-size:14px;color:inherit;padding:14px 0 10px} nav#layout-mainmenu ul li a:hover {background-color:transparent} nav#layout-mainmenu ul li a:active, nav#layout-mainmenu ul li a:focus {text-decoration:none;color:rgba(255,255,255,0.6)} @@ -771,7 +771,7 @@ nav#layout-mainmenu.navbar-mode-collapse .menu-toggle {display:inline-block;colo .mainmenu-collapsed >div ul.mainmenu-nav li:first-child {margin-left:0} .mainmenu-collapsed >div ul {margin:0;padding:5px 0 15px 15px;overflow:hidden} .mainmenu-collapsed >div ul li {color:rgba(255,255,255,0.6);display:inline-block;vertical-align:top;position:relative;margin-right:30px} -.mainmenu-collapsed >div ul li a {display:inline-block;font-size:14px;color:inherit;outline:none} +.mainmenu-collapsed >div ul li a {display:inline-block;font-size:14px;color:inherit} .mainmenu-collapsed >div ul li a:hover {background-color:transparent} .mainmenu-collapsed >div ul li a:active, .mainmenu-collapsed >div ul li a:focus {text-decoration:none;color:rgba(255,255,255,0.6)} diff --git a/modules/backend/assets/less/layout/mainmenu.less b/modules/backend/assets/less/layout/mainmenu.less index 4e399cf44..5d3492c26 100644 --- a/modules/backend/assets/less/layout/mainmenu.less +++ b/modules/backend/assets/less/layout/mainmenu.less @@ -20,7 +20,6 @@ body.mainmenu-open { display: inline-block; font-size: @font-size-base; color: inherit; - outline: none; &:hover { background-color: transparent; diff --git a/modules/system/assets/css/styles.css b/modules/system/assets/css/styles.css index f65f3bc8f..11318749e 100644 --- a/modules/system/assets/css/styles.css +++ b/modules/system/assets/css/styles.css @@ -89,7 +89,7 @@ textarea {background-image:none} a {color:#0181b9;text-decoration:none} a:hover, a:focus {color:#001721;text-decoration:underline} -a:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} +a:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color} img {vertical-align:middle} .img-responsive {display:block;max-width:100%;height:auto} .img-rounded {-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px} diff --git a/modules/system/assets/ui/less/global.mixins.utility.css b/modules/system/assets/ui/less/global.mixins.utility.css new file mode 100644 index 000000000..e69de29bb diff --git a/modules/system/assets/ui/less/global.mixins.utility.less b/modules/system/assets/ui/less/global.mixins.utility.less index e767d5113..4da6c82f1 100644 --- a/modules/system/assets/ui/less/global.mixins.utility.less +++ b/modules/system/assets/ui/less/global.mixins.utility.less @@ -26,9 +26,12 @@ .tab-focus() { // Default outline: thin dotted; + outline-offset: 0px; + + // Firefox + outline: 4px auto Highlight; // WebKit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; + outline: 4px auto -webkit-focus-ring-color; } // Center-align a block level element @@ -128,4 +131,4 @@ .responsive-invisibility() { display: none !important; -} \ No newline at end of file +} diff --git a/modules/system/assets/ui/less/site.normalize.less b/modules/system/assets/ui/less/site.normalize.less index 5cda25032..d40b1a822 100644 --- a/modules/system/assets/ui/less/site.normalize.less +++ b/modules/system/assets/ui/less/site.normalize.less @@ -1,13 +1,3 @@ -/*! Make focus ring standard on every browser */ - -// See github issue https://github.com/octobercms/october/issues/4892 - -&:focus { - outline: none; - -webkit-box-shadow: inset 0 1px 2px rgba(27,31,35,.075), 0 0 0 0.2em rgba(3,102,214,.3); - box-shadow: inset 0 1px 2px rgba(27,31,35,.075), 0 0 0 0.2em rgba(3,102,214,.3); -} - /*! normalize.css v3.0.0 | MIT License | git.io/normalize */ // diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index c52bc7218..50a4f7c2e 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -1,4 +1,3 @@ -:focus {outline:none;-webkit-box-shadow:inset 0 1px 2px rgba(27,31,35,.075),0 0 0 .2em rgba(3,102,214,.3);box-shadow:inset 0 1px 2px rgba(27,31,35,.075),0 0 0 .2em rgba(3,102,214,.3)} html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} body {margin:0} article, @@ -90,7 +89,7 @@ textarea {background-image:none} a {color:#0181b9;text-decoration:none} a:hover, a:focus {color:#001721;text-decoration:underline} -a:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} +a:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color} img {vertical-align:middle} .img-responsive {display:block;max-width:100%;height:auto} .img-rounded {-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px} @@ -467,7 +466,7 @@ address {margin-bottom:20px;font-style:normal;line-height:1.42857143} .btn {display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:8px 19.5px;font-size:14px;line-height:1.42857143;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .btn:focus, .btn:active:focus, -.btn.active:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} +.btn.active:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color} .btn:hover, .btn:focus {color:#fff;text-decoration:none} .btn:active, @@ -3690,7 +3689,7 @@ select[multiple], select[size] {height:auto} input[type="file"]:focus, input[type="radio"]:focus, -input[type="checkbox"]:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} +input[type="checkbox"]:focus {outline:thin dotted;outline-offset:0;outline:4px auto Highlight;outline:4px auto -webkit-focus-ring-color} output {display:block;padding-top:9px;font-size:14px;line-height:1.42857143;color:#385487} .form-control {display:block;width:100%;height:38px;padding:8px 13px 9px;font-size:14px;line-height:1.42857143;color:#385487;background-color:#fff;background-image:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s} .form-control:focus {border-color:#d1d6d9;outline:0}