From 5dddc1e74fb6eb11fee41a46c7a3ca118b4afe27 Mon Sep 17 00:00:00 2001
From: Cerdic <cedric@yterium.com>
Date: Thu, 15 Oct 2020 09:36:36 +0200
Subject: [PATCH] Add an option that force the focus to be inside the lity box
 when the user press tab to navigate in the page It was possible indeed to
 escape the box (at least on FF) by pressing tab key several times : after
 going through all the focusable elements of the box, the focus goes on
 browser navigation buttons (previous page, address bar field) before
 re-entering the page on the first focusable element of the page, which is not
 in the lity box any more As this is happening without a shift key the
 handleTabKey() doesn't fix it and then you have to go through all the page to
 reenter the box. As I'm not sure if this is the expected behavior, I added an
 option to activate the hard forced focus in the box, but maybe this is not
 needed and could be the default behavior?

---
 src/lity.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lity.js b/src/lity.js
index cfe5cbb..7b45cca 100644
--- a/src/lity.js
+++ b/src/lity.js
@@ -31,6 +31,7 @@
             inline: inlineHandler,
             iframe: iframeHandler
         },
+        forceFocusInside: false,
         template: '<div class="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabindex="-1"><div class="lity-wrap" data-lity-close role="document"><div class="lity-loader" aria-hidden="true">Loading...</div><div class="lity-container"><div class="lity-content"></div><button class="lity-close" type="button" aria-label="Close (Press escape to close)" data-lity-close>&times;</button></div></div></div>'
     };
 
@@ -266,6 +267,10 @@
             focusableElements.get(0).focus();
             e.preventDefault();
         }
+        if (focusedIndex === -1 && instance.options().forceFocusInside) {
+            focusableElements.get(0).focus();
+            e.preventDefault();
+        }
     }
 
     function resize() {