Accessiblity: Fix Help Center portal injection (#97370)

Co-authored-by: Kosta <[email protected]>
Automattic · Dec 12, 2024 · 1e7b768 · 1e7b768
1 parent bf61b60
commit 1e7b768
Showing 1 changed file with 15 additions and 18 deletions.
diff --git a/packages/help-center/src/components/help-center.tsx b/packages/help-center/src/components/help-center.tsx
@@ -6,7 +6,7 @@ import { initializeAnalytics } from '@automattic/calypso-analytics';
 import config from '@automattic/calypso-config';
 import { useGetSupportInteractions } from '@automattic/odie-client/src/data/use-get-support-interactions';
 import { useSelect } from '@wordpress/data';
-import { createPortal, useEffect, useRef } from '@wordpress/element';
+import { createPortal, useEffect } from '@wordpress/element';
 /**
  * Internal Dependencies
  */
@@ -23,16 +23,20 @@ import HelpCenterContainer from './help-center-container';
 import HelpCenterSmooch from './help-center-smooch';
 import { isUseHelpCenterExperienceEnabled } from './utils';
 import type { HelpCenterSelect } from '@automattic/data-stores';
+
 import '../styles.scss';
 
+const portalParent = document.createElement( 'div' );
+portalParent.className = 'help-center';
+portalParent.setAttribute( 'aria-modal', 'true' );
+portalParent.setAttribute( 'aria-labelledby', 'header-text' );
+
 const HelpCenter: React.FC< Container > = ( {
 	handleClose,
 	hidden,
 	currentRoute = window.location.pathname + window.location.search,
 	shouldUseHelpCenterExperience,
 } ) => {
-	const portalParent = useRef( document.createElement( 'div' ) ).current;
-
 	const { isHelpCenterShown, isMinimized } = useSelect( ( select ) => {
 		const helpCenterSelect: HelpCenterSelect = select( HELP_CENTER_STORE );
 		return {
@@ -54,24 +58,17 @@ const HelpCenter: React.FC< Container > = ( {
 		}
 	}, [ currentUser ] );
 
-	useActionHooks();
-
-	const openingCoordinates = useOpeningCoordinates( isHelpCenterShown, isMinimized );
-
 	useEffect( () => {
-		const classes = [ 'help-center' ];
-		portalParent.classList.add( ...classes );
-
-		portalParent.setAttribute( 'aria-modal', 'true' );
-		portalParent.setAttribute( 'aria-labelledby', 'header-text' );
+		if ( isHelpCenterShown ) {
+			document.body.appendChild( portalParent );
+		} else {
+			portalParent.remove();
+		}
+	}, [ isHelpCenterShown ] );
 
-		document.body.appendChild( portalParent );
+	useActionHooks();
 
-		return () => {
-			document.body.removeChild( portalParent );
-			handleClose();
-		};
-	}, [ portalParent, handleClose ] );
+	const openingCoordinates = useOpeningCoordinates( isHelpCenterShown, isMinimized );
 
 	return createPortal(
 		<>