Merge pull request #945 from Amberroseweeks/amberroseweeks-859-cookie…

…-consent-keyboard-a11y

adding focus and keyboard accessibility to the cookie consent buttons

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 />}

src/components/Footer.tsx

@@ -2,6 +2,7 @@
 
 import { useCookieContext } from '@/context/CookieContext';
 import CookieConsentBanner from './CookieConsentBanner';
+import { ThemeButton } from './ThemeButton';
 import Link from 'next/link';
 
 const Footer = () => {
@@ -25,16 +26,15 @@ const Footer = () => {
               </span>
             </li>
 
-            <li className="base-sm  text-gray-600 mx-auto">
-              <a
-                className="hover:text-gray-800 cursor-pointer underline"
-                onClick={onClickCookieSettings}
-              >
-                Cookie Settings
-              </a>
-              <span className="max-sm:hidden pl-2 pr-1" aria-hidden="true">
-                —
-              </span>
+            <span className="max-sm:hidden">—</span>
+
+            <li className="base-sm underline text-gray-600 mx-auto">
+              <ThemeButton
+                color="tertiary"
+                label="Cookie Settings"
+                onPress={onClickCookieSettings}
+                className="hover:text-gray-800 cursor-pointer text-gray-600"
+              />
             </li>
 
             <li className="base-sm text-gray-600 mx-auto">