Merge pull request #5359 from matuzalemsteles/issue-5332

fix: fixes overlay errors when closing Modal and the page is inaccessible when closed by Overlay with isModal enabled
liferay · Feb 7, 2023 · 5b00bcb · 5b00bcb
2 parents b5c42f7 + 653fc4e
commit 5b00bcb
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 27 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -195,7 +195,7 @@ module.exports = {
 		},
 		'./packages/clay-shared/src/': {
 			branches: 20,
-			functions: 15,
+			functions: 14,
 			lines: 36,
 			statements: 39,
 		},

diff --git a/packages/clay-modal/src/Modal.tsx b/packages/clay-modal/src/Modal.tsx
@@ -4,7 +4,7 @@
  */
 
 import {ClayPortal, IPortalBaseProps} from '@clayui/shared';
-import {hideOthers} from 'aria-hidden';
+import {suppressOthers} from 'aria-hidden';
 import classNames from 'classnames';
 import React, {useEffect, useMemo, useRef} from 'react';
 import warning from 'warning';
@@ -128,7 +128,7 @@ const ClayModal = ({
 	useEffect(() => {
 		if (modalElementRef.current && show) {
 			// Hide everything from ARIA except the Modal Body
-			return hideOthers(modalElementRef.current);
+			return suppressOthers(modalElementRef.current);
 		}
 	}, [show]);
 

diff --git a/packages/clay-modal/src/__tests__/__snapshots__/IncrementalInteractions.tsx.snap b/packages/clay-modal/src/__tests__/__snapshots__/IncrementalInteractions.tsx.snap
@@ -24,7 +24,7 @@ exports[`ModalProvider -> IncrementalInteractions renders a modal when dispatchi
     <div
       aria-hidden="true"
       class="modal-backdrop fade show"
-      data-aria-hidden="true"
+      data-suppressed="true"
     />
     <div
       class="fade modal d-block show"
@@ -96,7 +96,7 @@ exports[`ModalProvider -> IncrementalInteractions renders a modal when dispatchi
     <button
       aria-hidden="true"
       class="btn btn-primary"
-      data-aria-hidden="true"
+      data-suppressed="true"
       data-testid="button"
       type="button"
     >
@@ -105,7 +105,7 @@ exports[`ModalProvider -> IncrementalInteractions renders a modal when dispatchi
   </div>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-suppressed="true"
   />
 </body>
 `;
diff --git a/packages/clay-modal/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-modal/src/__tests__/__snapshots__/index.tsx.snap
@@ -8,7 +8,7 @@ exports[`ClayModal renders 1`] = `
     <div
       aria-hidden="true"
       class="modal-backdrop fade show"
-      data-aria-hidden="true"
+      data-suppressed="true"
     />
     <div
       class="fade modal d-block show"
@@ -80,7 +80,7 @@ exports[`ClayModal renders 1`] = `
   </div>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-suppressed="true"
   />
 </body>
 `;
@@ -93,7 +93,7 @@ exports[`ClayModal renders Header w/ low-level API 1`] = `
     <div
       aria-hidden="true"
       class="modal-backdrop fade show"
-      data-aria-hidden="true"
+      data-suppressed="true"
     />
     <div
       class="fade modal d-block show"
@@ -149,7 +149,7 @@ exports[`ClayModal renders Header w/ low-level API 1`] = `
   </div>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-suppressed="true"
   />
 </body>
 `;
@@ -162,7 +162,7 @@ exports[`ClayModal renders a body component with url 1`] = `
     <div
       aria-hidden="true"
       class="modal-backdrop fade show"
-      data-aria-hidden="true"
+      data-suppressed="true"
     />
     <div
       class="fade modal d-block show"
@@ -191,7 +191,7 @@ exports[`ClayModal renders a body component with url 1`] = `
   </div>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-suppressed="true"
   />
 </body>
 `;
@@ -204,7 +204,7 @@ exports[`ClayModal renders a footer component with buttons 1`] = `
     <div
       aria-hidden="true"
       class="modal-backdrop fade show"
-      data-aria-hidden="true"
+      data-suppressed="true"
     />
     <div
       class="fade modal d-block show"
@@ -259,7 +259,7 @@ exports[`ClayModal renders a footer component with buttons 1`] = `
   </div>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-suppressed="true"
   />
 </body>
 `;
@@ -272,7 +272,7 @@ exports[`ClayModal renders with Header 1`] = `
     <div
       aria-hidden="true"
       class="modal-backdrop fade show"
-      data-aria-hidden="true"
+      data-suppressed="true"
     />
     <div
       class="fade modal d-block show"
@@ -317,7 +317,7 @@ exports[`ClayModal renders with Header 1`] = `
   </div>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-suppressed="true"
   />
 </body>
 `;
@@ -330,7 +330,7 @@ exports[`ClayModal renders with center 1`] = `
     <div
       aria-hidden="true"
       class="modal-backdrop fade show"
-      data-aria-hidden="true"
+      data-suppressed="true"
     />
     <div
       class="fade modal d-block show"
@@ -350,7 +350,7 @@ exports[`ClayModal renders with center 1`] = `
   </div>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-suppressed="true"
   />
 </body>
 `;
@@ -363,7 +363,7 @@ exports[`ClayModal renders with size 1`] = `
     <div
       aria-hidden="true"
       class="modal-backdrop fade show"
-      data-aria-hidden="true"
+      data-suppressed="true"
     />
     <div
       class="fade modal d-block show"
@@ -383,7 +383,7 @@ exports[`ClayModal renders with size 1`] = `
   </div>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-suppressed="true"
   />
 </body>
 `;
@@ -396,7 +396,7 @@ exports[`ClayModal renders with status 1`] = `
     <div
       aria-hidden="true"
       class="modal-backdrop fade show"
-      data-aria-hidden="true"
+      data-suppressed="true"
     />
     <div
       class="fade modal d-block show"
@@ -416,7 +416,7 @@ exports[`ClayModal renders with status 1`] = `
   </div>
   <div
     aria-hidden="true"
-    data-aria-hidden="true"
+    data-suppressed="true"
   />
 </body>
 `;
diff --git a/packages/clay-shared/src/Overlay.tsx b/packages/clay-shared/src/Overlay.tsx
@@ -26,6 +26,8 @@ type Props = {
 	triggerRef: React.RefObject<HTMLElement>;
 };
 
+const overlayStack: Array<React.RefObject<Element>> = [];
+
 /**
  * Overlay component is used for components like dialog and modal.
  * For example, Autocomplete, DatePicker, ColorPicker, DropDown are components
@@ -46,6 +48,15 @@ export function Overlay({
 }: Props) {
 	const unsuppressCallbackRef = useRef<Undo | null>(null);
 
+	const onHide = useCallback(
+		(action: 'escape' | 'blur') => {
+			if (overlayStack[overlayStack.length - 1] === menuRef) {
+				onClose(action);
+			}
+		},
+		[onClose]
+	);
+
 	useEvent(
 		'focus',
 		useCallback(
@@ -56,21 +67,24 @@ export function Overlay({
 					triggerRef.current &&
 					!triggerRef.current.contains(event.target as Node)
 				) {
-					onClose('blur');
+					onHide('blur');
 				}
 			},
-			[onClose]
+			[onHide]
 		),
 		isOpen,
 		true,
-		[isOpen, onClose]
+		[isOpen, onHide]
 	);
 
 	useEvent(
 		'keydown',
 		useCallback(
 			(event: KeyboardEvent) => {
-				if (event.key === Keys.Esc) {
+				if (
+					event.key === Keys.Esc &&
+					overlayStack[overlayStack.length - 1] === menuRef
+				) {
 					event.stopImmediatePropagation();
 					event.preventDefault();
 
@@ -99,12 +113,32 @@ export function Overlay({
 	useInteractOutside({
 		isDisabled: isOpen ? !isCloseOnInteractOutside : true,
 		onInteract: () => {
-			onClose('blur');
+			onHide('blur');
+		},
+		onInteractStart: (event) => {
+			if (overlayStack[overlayStack.length - 1] === menuRef && isModal) {
+				event.stopPropagation();
+				event.preventDefault();
+			}
 		},
 		ref: portalRef ?? menuRef,
 		triggerRef,
 	});
 
+	useEffect(() => {
+		if (isOpen) {
+			overlayStack.push(menuRef);
+		}
+
+		return () => {
+			const index = overlayStack.indexOf(menuRef);
+
+			if (index >= 0) {
+				overlayStack.splice(index, 1);
+			}
+		};
+	}, [isOpen, menuRef]);
+
 	useEffect(() => {
 		if (menuRef.current && isOpen) {
 			const elements = suppress

diff --git a/packages/clay-shared/src/useInteractOutside.tsx b/packages/clay-shared/src/useInteractOutside.tsx
@@ -8,6 +8,7 @@ import React, {useEffect, useRef} from 'react';
 type Props = {
 	isDisabled?: boolean;
 	onInteract?: (event: Event) => void;
+	onInteractStart?: (event: Event) => void;
 	ref: React.RefObject<HTMLElement>;
 	triggerRef: React.RefObject<HTMLElement>;
 };
@@ -19,6 +20,7 @@ type Props = {
 export function useInteractOutside({
 	isDisabled = false,
 	onInteract,
+	onInteractStart,
 	ref,
 	triggerRef,
 }: Props) {
@@ -39,6 +41,9 @@ export function useInteractOutside({
 
 		const onPointerDown = (event: Event) => {
 			if (isValidEvent(event, ref, triggerRef) && state.onInteract) {
+				if (onInteractStart) {
+					onInteractStart(event);
+				}
 				state.isPointerDown = true;
 			}
 		};