From 92df5d9501407edae6bfe18a074f27e060666d39 Mon Sep 17 00:00:00 2001
From: Karl Butler <kbutler@carbonsix.digital>
Date: Thu, 13 Oct 2022 00:02:23 +0100
Subject: [PATCH] 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>
---
 .../common/directives/components/umblightbox.directive.js | 8 ++++++++
 .../src/less/components/umb-packages.less                 | 6 ++++++
 .../src/views/components/umb-lightbox.html                | 2 +-
 .../src/views/packages/views/repo.controller.js           | 4 ++--
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umblightbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umblightbox.directive.js
index 268d62723e..8a0d6875b2 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umblightbox.directive.js
+++ b/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);
+                    }
                 }
             };
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
index 7139720055..589a3bfe91 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
+++ b/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 {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-lightbox.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-lightbox.html
index 71e18769ab..16a02d0804 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-lightbox.html
+++ b/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>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.controller.js b/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.controller.js
index 8360663be6..95722debe4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.controller.js
+++ b/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();
         }