Highlight the focused element when using keyboard

src/Fancybox/Fancybox.js

@@ -228,6 +228,7 @@ class Fancybox extends Base {
     Object.entries({
       class: "fancybox__container",
       role: "dialog",
+      tabIndex: "-1",
       "aria-modal": "true",
       "aria-hidden": "true",
       "aria-label": this.localize("{{MODAL}}"),
@@ -637,7 +638,7 @@ class Fancybox extends Base {
         return;
       }
 
-      this.ignoreFocusChange = true;
+      Fancybox.ignoreFocusChange = true;
 
       try {
         if (node.setActive) {
@@ -652,7 +653,7 @@ class Fancybox extends Base {
         }
       } catch (e) {}
 
-      this.ignoreFocusChange = false;
+      Fancybox.ignoreFocusChange = false;
     };
 
     const FOCUSABLE_ELEMENTS = [
@@ -671,7 +672,7 @@ class Fancybox extends Base {
       '[tabindex]:not([tabindex^="-"]):not([disabled]):not([aria-hidden])',
     ];
 
-    if (this.ignoreFocusChange) {
+    if (Fancybox.ignoreFocusChange) {
       return;
     }
 
@@ -691,10 +692,8 @@ class Fancybox extends Base {
 
     const allFocusableElems = Array.from(this.$container.querySelectorAll(FOCUSABLE_ELEMENTS));
 
-    let enabledElems = [];
-
+    let enabledElems = [this.$container];
     let $firstEl;
-    let $firstBtn;
 
     for (let node of allFocusableElems) {
       const isInsideSlide = $currentSlide.contains(node);
@@ -711,8 +710,6 @@ class Fancybox extends Base {
 
         if (node.hasAttribute("autoFocus") || (!$firstEl && isInsideSlide)) {
           $firstEl = node;
-        } else if (node.matches(".fancybox__button--close")) {
-          $firstBtn = node;
         }
       } else {
         node.dataset.origTabindex =
@@ -724,17 +721,16 @@ class Fancybox extends Base {
 
     if (enabledElems.indexOf(document.activeElement) > -1) {
       this.lastFocus = document.activeElement;
-
       return;
     }
 
     if (!event) {
-      setFocusOn($firstEl || $firstBtn || enabledElems[0]);
+      setFocusOn($firstEl || enabledElems[0]);
       return;
     }
 
     if (!$currentSlide.contains(document.activeElement)) {
-      if (this.lastFocus === enabledElems[0]) {
+      if (this.lastFocus === enabledElems[1]) {
         setFocusOn(enabledElems[enabledElems.length - 1]);
       } else {
         let idx = enabledElems.indexOf(this.lastFocus);

src/Fancybox/scss/_variables.scss

@@ -31,7 +31,8 @@ $fancybox-container-padding: env(safe-area-inset-top, 0px) env(safe-area-inset-r
 
 $fancybox-backdrop-bg: var(--fancybox-bg, rgba(24, 24, 27, 0.92)) !default;
 
-$fancybox-accent-color: var(--fancybox-accent-color, rgba(1, 210, 232, 0.94)) !default;
+$fancybox-accent-color: rgba(1, 210, 232, 0.94) !default;
+$fancybox-focus-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--fancybox-accent-color, rgba(1, 210, 232, 0.94)) !default;
 
 $fancybox-spinner-color: var(--fancybox-color, currentColor) !default;
 $fancybox-spinner-width: 50px !default;

src/Fancybox/scss/base.scss

@@ -20,6 +20,7 @@ body.compensate-for-scrollbar {
   flex-direction: column;
 
   color: $fancybox-container-color;
+  --fancybox-accent-color: #{$fancybox-accent-color};
   -webkit-tap-highlight-color: transparent;
 
   overflow: hidden;
@@ -34,11 +35,11 @@ body.compensate-for-scrollbar {
   }
 
   & :focus {
-    outline: thin dotted;
+    outline: none;
   }
 
-  body.is-using-mouse & :focus {
-    outline: none;
+  body:not(.is-using-mouse) & :focus {
+    box-shadow: $fancybox-focus-shadow;
   }
 
   --carousel-button-width: 48px;
@@ -144,6 +145,11 @@ body.compensate-for-scrollbar {
   z-index: 20;
 
   @include fancybox-breakpoint(content);
+
+  & :focus:not(.carousel__button.is-close) {
+    outline: thin dotted;
+    box-shadow: none;
+  }
 }
 
 .fancybox__caption {
@@ -207,7 +213,7 @@ body.compensate-for-scrollbar {
 /* Close button located inside content area */
 .fancybox__content > .carousel__button.is-close {
   position: absolute;
-  top: -36px;
+  top: -40px;
   right: 0;
 
   color: var(--fancybox-color, #fff);