From e37a036a8843f8b2fdea1ec6c42609017a1c39a7 Mon Sep 17 00:00:00 2001
From: Adam Borowski <adam@adamboro.com>
Date: Tue, 3 Nov 2020 18:18:30 +0100
Subject: [PATCH] feat: focus trap for overlays in non-AMP

---
 includes/class-newspack-popups-model.php |  2 +-
 package-lock.json                        | 13 ++++++++++++
 package.json                             |  1 +
 src/view/index.js                        | 25 ++++++++++++++++++++++++
 4 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/includes/class-newspack-popups-model.php b/includes/class-newspack-popups-model.php
index f5b529942..f7bd70a09 100644
--- a/includes/class-newspack-popups-model.php
+++ b/includes/class-newspack-popups-model.php
@@ -799,7 +799,7 @@ function ( $evts ) use ( $popup, $body, $element_id ) {
 
 		ob_start();
 		?>
-		<amp-layout <?php echo self::get_access_attrs( $popup ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>" role="button" tabindex="0" id="<?php echo esc_attr( $element_id ); ?>">
+		<amp-layout data-amp-delay="<?php echo esc_html( self::get_delay( $popup ) ); ?>" <?php echo self::get_access_attrs( $popup ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>" role="button" tabindex="0" id="<?php echo esc_attr( $element_id ); ?>">
 			<div class="newspack-popup-wrapper" style="<?php echo esc_attr( self::container_style( $popup ) ); ?>">
 				<div class="newspack-popup">
 					<?php if ( ! empty( $popup['title'] ) && $display_title ) : ?>
diff --git a/package-lock.json b/package-lock.json
index 4c0ed636d..ef872c553 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13620,6 +13620,14 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "focus-trap": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.1.4.tgz",
+      "integrity": "sha512-jgNc+O8UkGsUpdhNXkyonwlw4i707+ESAWv1vCbyd8+29db5/Wv1BkJImDczfEWMu9O635FvM5ABOjeyqNQpEQ==",
+      "requires": {
+        "tabbable": "^5.1.3"
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -27886,6 +27894,11 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "tabbable": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.1.3.tgz",
+      "integrity": "sha512-jqR3rOgeyNlYWDWoyjNTWuHk3+FObu3Fw4e0zjeOLBicI74TT/wGrvSbJUaFVs7FMfiY0Ee8CKM7QaJwVMT4YA=="
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
diff --git a/package.json b/package.json
index 2b554a729..b2cc548e0 100755
--- a/package.json
+++ b/package.json
@@ -123,6 +123,7 @@
     "@wordpress/dom-ready": "^2.9.0",
     "@wordpress/element": "^2.11.0",
     "@wordpress/i18n": "^3.9.0",
+    "focus-trap": "^6.1.4",
     "newspack-components": "^1.0.5",
     "qs": "^6.9.1"
   }
diff --git a/src/view/index.js b/src/view/index.js
index 3a36767ad..0d9f33198 100644
--- a/src/view/index.js
+++ b/src/view/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { createFocusTrap } from 'focus-trap';
+
 /**
  * WordPress dependencies
  */
@@ -89,6 +94,25 @@ const manageForms = container => {
 	} );
 };
 
+const manageOverlays = () => {
+	[ ...document.querySelectorAll( '.newspack-lightbox' ) ].forEach( element => {
+		const wrapper = element.querySelector( '.newspack-popup-wrapper' );
+		if ( wrapper ) {
+			const observer = new MutationObserver( mutationsList => {
+				[ ...mutationsList ].forEach( mutation => {
+					const isHidden = mutation.target.hasAttribute( 'amp-access-hide' );
+					const delayValue = mutation.target.getAttribute( 'data-amp-delay' );
+					if ( ! isHidden && delayValue ) {
+						// Timeout for the animation.
+						setTimeout( () => createFocusTrap( wrapper ).activate(), parseInt( delayValue ) + 500 );
+					}
+				} );
+			} );
+			observer.observe( element, { attributes: true, subtree: false } );
+		}
+	} );
+};
+
 if ( typeof window !== 'undefined' ) {
 	domReady( () => {
 		manageAnalytics();
@@ -99,5 +123,6 @@ if ( typeof window !== 'undefined' ) {
 		campaignArray.forEach( campaign => {
 			manageForms( campaign );
 		} );
+		manageOverlays();
 	} );
 }