Packages Modal - Further Fixes for Modal Trap (#13172)

* Fixes to focus trap within the modal

* Removing duplicate code

* Adding focus to previous element

* changed hardcoded color to existing less variable

Co-authored-by: Michael <michael@crossingpaths.be>

src/Umbraco.Web.UI.Client/src/common/directives/components/umblightbox.directive.js

@@ -131,6 +131,14 @@
             scope.close = function() {
                 if(scope.onClose) {
                     scope.onClose();
+                    focusLockService.removeInertAttribute();
+
+                    if(previousElement){
+                          setTimeout(function(){ 
+                            previousElement.focus();
+                            previousElement = null;
+                          }, 200);
+                    }
                 }
             };
 

src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less

@@ -465,6 +465,12 @@
     border-color: @ui-action-discreet-border-hover;
 }
 
+.umb-gallery__thumbnail:focus-visible,
+.umb-gallery__thumbnail:focus {
+  cursor: pointer;
+  border: 2px solid @ui-outline;
+}
+
 /* PACKAGE LIST */
 
 .umb-package-list {

src/Umbraco.Web.UI.Client/src/views/components/umb-lightbox.html

@@ -1,4 +1,4 @@
-<div class="umb-lightbox">
+<div class="umb-lightbox" ng-attr-umb-focus-lock="true">
 
     <div class="umb-lightbox__backdrop" ng-click="close()" hotkey="esc"></div>
 

src/Umbraco.Web.UI.Client/src/views/packages/views/repo.controller.js

@@ -185,14 +185,14 @@
         function closeLightbox() {
             vm.lightbox.show = false;
             vm.lightbox = null;
-
+            
             if(previousElement){
-
                 setTimeout(function(){ 
                     previousElement.focus();
                     previousElement = null;
                   }, 100) 
             }
+            document.activeElement.blur();
         }