Merge pull request #55 from alexstine/fix/announcer-page-focus

Try fixing focus loss on pages by placing focus on announcer

src/components/layout/announcer.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useLocation, matchPath } from 'react-router-dom';
 
 const routeNames: Record<string, string> = {
@@ -33,20 +33,21 @@ const getPageName = (pathname: string) => {
 
 const Announcer: React.FC = () => {
   const location = useLocation();
+  const announcer = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const pageName = getPageName(location.pathname);
-    const announcer = document.getElementById('page-announcer');
-    if (announcer) {
-      announcer.textContent = `${pageName} page loaded`;
+    if (announcer.current) {
+      announcer.current.textContent = `${pageName} page loaded`;
+      announcer.current.focus({ preventScroll: true });
     }
   }, [location]);
 
   return (
     <div
+    ref={announcer}
+    tabIndex={-1}
       id="page-announcer"
-      aria-live="assertive"
-      aria-atomic="true"
       className="sr-only"
     />
   );

src/components/layout/header.tsx

@@ -14,7 +14,7 @@ const Header = () => {
     <header className="border-b border-gray-300 bg-white">
       <MaxWidthWrapper>
         <div className="flex flex-col items-center justify-between gap-3 py-3 md:h-16 md:flex-row">
-          <Link to="/reports" replace aria-label="Go to homepage" rel="home">
+          <Link id="header-home-link-focus" to="/reports" replace aria-label="Go to homepage" rel="home">
             <img
               src="/equalify.svg"
               className="h-auto w-28 md:w-32"