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

(cherry picked from commit c881fa9e7d)

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 ){

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;
         }
     }
 

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;
+    }
+  }
 }