Set aria-labelledby for takeover dialog (#2735)

Author: RoyEJohnson

src/app/layouts/default/takeover-dialog/content-desktop.js

@@ -17,7 +17,7 @@ function Basic({headline, message, image, children}) {
         <div className="takeover-content desktop-only">
             <div className="text-side">
                 <Logo />
-                <RawHTML Tag="h1" html={headline} />
+                <RawHTML Tag="h1" html={headline} id="takeover-headline" />
                 <div className="message">{message}</div>
                 {children}
             </div>

src/app/layouts/default/takeover-dialog/content-mobile.js

@@ -55,7 +55,7 @@ export default function MobileContent({data}) {
     React.useEffect(() => {
         document.getElementById('header').classList.add('over-mobile-dialog');
 
-        return () => document.getElementById('header').classList.remove('over-mobile-dialog');
+        return () => document.getElementById('header')?.classList.remove('over-mobile-dialog');
     }, []);
 
     return (

src/app/layouts/default/takeover-dialog/takeover-dialog-content.js

@@ -41,8 +41,13 @@ export default function TakeoverBanner({data, setDisplayed}) {
     }
 
     data.image = data.fundraiserImage;
+    /*
+        takeover-headline is the id of the h1 in content-desktop
+        aria-labelledby can reference hidden content, so even in mobile, the value in content-desktop
+        will be used
+    */
     return (
-        <Dialog className={cn('takeover-dialog', data.colorScheme)}>
+        <Dialog className={cn('takeover-dialog', data.colorScheme)} aria={{labelledby: 'takeover-headline'}}>
             <TakeoverContextProvider contextValueParameters={{close}}>
                 <DesktopContent data={data} />
                 <MobileContent data={data} />