Fixes tabbing-mode remains active after closing modal #9790 (#10074)

umbraco · Mar 30, 2021 · c881fa9 · c881fa9
1 parent 499e4f0
commit c881fa9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbfocuslock.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbfocuslock.directive.js
@@ -29,10 +29,6 @@
                     var defaultFocusedElement = getAutoFocusElement(focusableElements);
                     var firstFocusableElement = focusableElements[0];
                     var lastFocusableElement = focusableElements[focusableElements.length -1];
-
-                    // We need to add the tabbing-active class in order to highlight the focused button since the default style is
-                    // outline: none; set in the stylesheet specifically
-                    bodyElement.classList.add('tabbing-active');
 
                     // If there is no default focused element put focus on the first focusable element in the nodelist
                     if(defaultFocusedElement === null ){

diff --git a/src/Umbraco.Web.UI.Client/src/less/application/umb-outline.less b/src/Umbraco.Web.UI.Client/src/less/application/umb-outline.less
@@ -15,6 +15,7 @@
             right: 0;
             border-radius: 3px;
             box-shadow: 0 0 2px 0px @ui-outline, inset 0 0 2px 2px @ui-outline;
+            pointer-events: none;
         }
     }
 

diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -308,7 +308,14 @@ select[size] {
 input[type="file"],
 input[type="radio"],
 input[type="checkbox"] {
-  .umb-outline();
+  &:focus {
+    border-color: @inputBorderFocus;
+    outline: 0;
+
+    .tabbing-active & {
+      outline: 2px solid @ui-outline;
+    }
+  }
 }