Merge pull request #1000 from CodeForPhilly/staging

Merge staging to main

src/app/globals.css

@@ -176,7 +176,7 @@
     -webkit-transform: translateZ(0);
   }
   .mobileIconLinkNav {
-    @apply px-0 text-base max-h-52 overflow-hidden fixed w-full z-50 shadow-2xl rounded-md border-1 border-gray-200 bg-gray-0;
+    @apply px-0 text-base max-h-64 overflow-hidden fixed w-full z-50 shadow-2xl rounded-md border-1 border-gray-200 bg-gray-0;
     transform: translateZ(0);
     -webkit-transform: translateZ(0);
   }

src/components/CookieConsentBanner.tsx

@@ -3,12 +3,15 @@
 import { ThemeButton } from './ThemeButton';
 import { Check, X } from '@phosphor-icons/react';
 import { useCookieContext } from '@/context/CookieContext';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 const CookieConsentBanner = () => {
   const { shouldShowBanner, setShouldAllowCookies, setShouldShowBanner } =
     useCookieContext();
 
+  const bannerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const [isClientSide, setIsClientSide] = useState(false);
 
   useEffect(() => {
@@ -21,34 +24,54 @@ const CookieConsentBanner = () => {
     setShouldShowBanner(false);
   };
 
+  useEffect(() => {
+    // Focus on the banner when it becomes visible
+    if (shouldShowBanner && bannerRef.current) {
+      // Use setTimeout to ensure focus is applied after DOM updates
+      setTimeout(() => {
+        bannerRef.current?.focus();
+      }, 0);
+    }
+  }, [shouldShowBanner]); // Trigger focus when shouldShowBanner changes
+
   if (!isClientSide) return null;
 
   return (
     <div
+      role="region"
+      tabIndex={-1} // Make the div focusable
+      ref={bannerRef} // Attach the ref to the banner
+      aria-labelledby="cookie_heading"
       className={`${
         shouldShowBanner
           ? 'md:flex fixed inset-x-0 bottom-0 z-20 justify-between bg-blue-200 p-4 sm:p-6'
           : 'hidden'
       }`}
     >
       <div>
-        <div className="heading-md">Can we store cookies to your browser?</div>
+        <h2 className="heading-md" id="cookie_heading">
+          Can we store cookies to your browser?
+        </h2>
         <div className="body-sm">
-          This provides you a nice experience preserving your filtering, your
-          position on the map and your property saved list.
+          <p>
+            This provides you a nice experience preserving your filtering, your
+            position on the map and your property saved list.
+          </p>
         </div>
       </div>
 
       <div className="flex justify-end gap-2 pt-4 sm:pt-0">
         <div className="flex flex-none items-center gap-x-2">
           <ThemeButton
+            tabIndex={1}
             color="tertiary"
             label="Decline"
             startContent={<X />}
             onPress={() => onClickButton(false)}
           />
 
           <ThemeButton
+            tabIndex={2}
             color="primary"
             label="Accept"
             startContent={<Check />}