lightgallery 2.4.0 → 2.5.0-beta.3

package/scss/_lg-theme-default.scss

@@ -241,3 +241,19 @@ body:not(.lg-from-hash) {
         }
     }
 }
+
+.lg-icon {
+    &:focus-visible {
+        color: #fff;
+        border-radius: 3px;
+        outline: 1px dashed rgba(255, 255, 255, 0.6);
+    }
+}
+.lg-toolbar {
+    .lg-icon {
+        &:focus-visible {
+            border-radius: 8px;
+            outline-offset: -5px;
+        }
+    }
+}

package/vue/LightGalleryVue.common.js

@@ -5871,6 +5871,7 @@ var lightGalleryCoreSettings = {
   loop: true,
   escKey: true,
   keyPress: true,
+  trapFocus: true,
   controls: true,
   slideEndAnimation: true,
   hideControlOnEnd: false,
@@ -6509,6 +6510,7 @@ function $LG(selector) {
 
 
 
+
 var defaultDynamicOptions = ['src', 'sources', 'subHtml', 'subHtmlUrl', 'html', 'video', 'poster', 'slideName', 'responsive', 'srcset', 'sizes', 'iframe', 'downloadUrl', 'download', 'width', 'facebookShareUrl', 'tweetText', 'iframeTitle', 'twitterShareUrl', 'pinterestShareUrl', 'pinterestText', 'fbHtml', 'disqusIdentifier', 'disqusUrl']; // Convert html data-attribute to camalcase
 
 function convertToData(attr) {
@@ -6688,6 +6690,14 @@ var utils = {
 
     return "<div class=\"lg-video-cont ".concat(videoClass, "\" style=\"").concat(videoContStyle, "\">\n                <div class=\"lg-video-play-button\">\n                <svg\n                    viewBox=\"0 0 20 20\"\n                    preserveAspectRatio=\"xMidYMid\"\n                    focusable=\"false\"\n                    aria-labelledby=\"").concat(playVideoString, "\"\n                    role=\"img\"\n                    class=\"lg-video-play-icon\"\n                >\n                    <title>").concat(playVideoString, "</title>\n                    <polygon class=\"lg-video-play-icon-inner\" points=\"1,0 20,10 1,20\"></polygon>\n                </svg>\n                <svg class=\"lg-video-play-icon-bg\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle></svg>\n                <svg class=\"lg-video-play-icon-circle\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle>\n                </svg>\n            </div>\n            ").concat(dummyImg || '', "\n            <img class=\"lg-object lg-video-poster\" src=\"").concat(_poster, "\" />\n        </div>");
   },
+  getFocusableElements: function getFocusableElements(container) {
+    var elements = container.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
+    var visibleElements = [].filter.call(elements, function (element) {
+      var style = window.getComputedStyle(element);
+      return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    return visibleElements;
+  },
 
   /**
    * @desc Create dynamic elements array from gallery items when dynamic option is false
@@ -7242,7 +7252,6 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       // prevent accidental double execution
       if (this.lgOpened) return;
       this.lgOpened = true;
-      this.outer.get().focus();
       this.outer.removeClass('lg-hide-items'); // Add display block, but still has opacity 0
 
       this.$container.addClass('lg-show');
@@ -7308,7 +7317,12 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
           _this5.$backdrop.addClass('in');
 
           _this5.$container.addClass('lg-show-in');
-        }, 10); // lg-visible class resets gallery opacity to 1
+        }, 10);
+        setTimeout(function () {
+          if (_this5.settings.trapFocus && document.body === _this5.settings.container) {
+            _this5.trapFocus();
+          }
+        }, _this5.settings.backdropDuration + 50); // lg-visible class resets gallery opacity to 1
 
         if (!_this5.zoomFromOrigin || !transform) {
           setTimeout(function () {
@@ -8636,15 +8650,49 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
         $element.off("click.lgcustom-item-".concat($element.attr('data-lg-id')));
       }
     }
+  }, {
+    key: "trapFocus",
+    value: function trapFocus() {
+      var _this26 = this;
+
+      this.$container.get().focus();
+      $LG(window).on("keydown.lg.global".concat(this.lgId), function (e) {
+        if (!_this26.lgOpened) {
+          return;
+        }
+
+        var isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+
+        if (!isTabPressed) {
+          return;
+        }
+
+        var focusableEls = lg_utils.getFocusableElements(_this26.$container.get());
+        var firstFocusableEl = focusableEls[0];
+        var lastFocusableEl = focusableEls[focusableEls.length - 1];
+
+        if (e.shiftKey) {
+          if (document.activeElement === firstFocusableEl) {
+            lastFocusableEl.focus();
+            e.preventDefault();
+          }
+        } else {
+          if (document.activeElement === lastFocusableEl) {
+            firstFocusableEl.focus();
+            e.preventDefault();
+          }
+        }
+      });
+    }
   }, {
     key: "manageCloseGallery",
     value: function manageCloseGallery() {
-      var _this26 = this;
+      var _this27 = this;
 
       if (!this.settings.closable) return;
       var mousedown = false;
       this.getElementById('lg-close').on('click.lg', function () {
-        _this26.closeGallery();
+        _this27.closeGallery();
       });
 
       if (this.settings.closeOnTap) {
@@ -8653,7 +8701,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
         this.outer.on('mousedown.lg', function (e) {
           var target = $LG(e.target);
 
-          if (_this26.isSlideElement(target)) {
+          if (_this27.isSlideElement(target)) {
             mousedown = true;
           } else {
             mousedown = false;
@@ -8665,9 +8713,9 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
         this.outer.on('mouseup.lg', function (e) {
           var target = $LG(e.target);
 
-          if (_this26.isSlideElement(target) && mousedown) {
-            if (!_this26.outer.hasClass('lg-dragging')) {
-              _this26.closeGallery();
+          if (_this27.isSlideElement(target) && mousedown) {
+            if (!_this27.outer.hasClass('lg-dragging')) {
+              _this27.closeGallery();
             }
           }
         });
@@ -8688,7 +8736,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "closeGallery",
     value: function closeGallery(force) {
-      var _this27 = this;
+      var _this28 = this;
 
       if (!this.lgOpened || !this.settings.closable && !force) {
         return 0;
@@ -8737,32 +8785,32 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       this.$container.removeClass('lg-show-in'); // Once the closign animation is completed and gallery is invisible
 
       setTimeout(function () {
-        if (_this27.zoomFromOrigin && transform) {
-          _this27.outer.removeClass('lg-zoom-from-image');
+        if (_this28.zoomFromOrigin && transform) {
+          _this28.outer.removeClass('lg-zoom-from-image');
         }
 
-        _this27.$container.removeClass('lg-show'); // Need to remove inline opacity as it is used in the stylesheet as well
+        _this28.$container.removeClass('lg-show'); // Need to remove inline opacity as it is used in the stylesheet as well
 
 
-        _this27.$backdrop.removeAttr('style').css('transition-duration', _this27.settings.backdropDuration + 'ms');
+        _this28.$backdrop.removeAttr('style').css('transition-duration', _this28.settings.backdropDuration + 'ms');
 
-        _this27.outer.removeClass("lg-closing ".concat(_this27.settings.startClass));
+        _this28.outer.removeClass("lg-closing ".concat(_this28.settings.startClass));
 
-        _this27.getSlideItem(_this27.index).removeClass('lg-start-end-progress');
+        _this28.getSlideItem(_this28.index).removeClass('lg-start-end-progress');
 
-        _this27.$inner.empty();
+        _this28.$inner.empty();
 
-        if (_this27.lgOpened) {
-          _this27.LGel.trigger(lGEvents.afterClose, {
-            instance: _this27
+        if (_this28.lgOpened) {
+          _this28.LGel.trigger(lGEvents.afterClose, {
+            instance: _this28
           });
         }
 
-        if (_this27.outer.get()) {
-          _this27.outer.get().blur();
+        if (_this28.$container.get()) {
+          _this28.$container.get().blur();
         }
 
-        _this27.lgOpened = false;
+        _this28.lgOpened = false;
       }, removeTimeout + 100);
       return removeTimeout + 100;
     }
@@ -8848,21 +8896,21 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this28 = this;
+      var _this29 = this;
 
       var closeTimeout = this.closeGallery(true);
       setTimeout(function () {
-        _this28.destroyModules(true);
+        _this29.destroyModules(true);
 
-        if (!_this28.settings.dynamic) {
-          _this28.invalidateItems();
+        if (!_this29.settings.dynamic) {
+          _this29.invalidateItems();
         }
 
-        $LG(window).off(".lg.global".concat(_this28.lgId));
+        $LG(window).off(".lg.global".concat(_this29.lgId));
 
-        _this28.LGel.off('.lg');
+        _this29.LGel.off('.lg');
 
-        _this28.$container.remove();
+        _this29.$container.remove();
       }, closeTimeout);
       return closeTimeout;
     }