add focus post route change

aws-amplify · Jun 12, 2024 · 4c024fd · 4c024fd
1 parent d385f3c
commit 4c024fd
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 7 deletions.
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -239,6 +239,7 @@ export const Layout = ({
                 currentPlatform={currentPlatform}
                 pageType={pageType}
                 showLastUpdatedDate={showLastUpdatedDate}
+                mainId={mainId}
               ></LayoutHeader>
               <View key={asPathWithNoHash} className="layout-main">
                 <Flex

diff --git a/src/components/Layout/LayoutHeader.tsx b/src/components/Layout/LayoutHeader.tsx
@@ -25,13 +25,15 @@ export const LayoutHeader = ({
   isGen1,
   pageType = 'inner',
   showLastUpdatedDate = true,
-  showTOC
+  showTOC,
+  mainId
 }: {
   currentPlatform: Platform;
   isGen1: boolean;
   pageType?: 'home' | 'inner';
   showLastUpdatedDate: boolean;
   showTOC?: boolean;
+  mainId: string;
 }) => {
   const { menuOpen, toggleMenuOpen } = useContext(LayoutContext);
   const menuButtonRef = useRef<HTMLButtonElement>(null);
@@ -138,7 +140,11 @@ export const LayoutHeader = ({
           </div>
 
           <div className="layout-sidebar-menu">
-            <Menu currentPlatform={currentPlatform} path={asPathWithNoHash} />
+            <Menu
+              currentPlatform={currentPlatform}
+              path={asPathWithNoHash}
+              mainId={mainId}
+            />
             <div className="layout-sidebar-feedback">
               <RepoActions router={router}></RepoActions>
               <Feedback router={router}></Feedback>

diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -7,6 +7,7 @@ import { findDirectoryNode } from '@/utils/findDirectoryNode';
 type MenuProps = {
   currentPlatform?: Platform;
   path: string;
+  mainId: string;
 };
 
 const invalidChildren = [
@@ -15,7 +16,11 @@ const invalidChildren = [
   '/gen1/[platform]/sdk'
 ];
 
-export function Menu({ currentPlatform, path }: MenuProps): ReactElement {
+export function Menu({
+  currentPlatform,
+  path,
+  mainId
+}: MenuProps): ReactElement {
   // Depending on the the page we're on, we could have the following keywords at these subpaths
   // Split them out so we can figure out what kind of page it is
   const pathSplit = path.split('/');
@@ -71,6 +76,7 @@ export function Menu({ currentPlatform, path }: MenuProps): ReactElement {
                 pageNode={child as PageNode}
                 parentSetOpen={null}
                 level={1}
+                mainId={mainId}
                 hideChildren={child.hideChildrenOnBase && baseMenu}
                 {...(currentPlatform
                   ? { currentPlatform: currentPlatform }

diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { JS_PLATFORMS, Platform, JSPlatform } from '@/data/platforms';
 import { LayoutContext } from '@/components/Layout';
 import { PageNode } from '@/directory/directory';
+import { useRouter } from 'next/router';
 
 enum Levels {
   Category = 1,
@@ -19,6 +20,7 @@ type MenuItemProps = {
   level: number;
   currentPlatform?: Platform;
   hideChildren?: boolean;
+  mainId: string;
 };
 
 function getPathname(route, currentPlatform: Platform | undefined) {
@@ -38,11 +40,13 @@ export function MenuItem({
   parentSetOpen,
   level,
   currentPlatform,
-  hideChildren
+  hideChildren,
+  mainId
 }: MenuItemProps): ReactElement {
   const { menuOpen, toggleMenuOpen } = useContext(LayoutContext);
   const asPathWithoutHash = usePathWithoutHash();
   const [open, setOpen] = useState(false);
+  const router = useRouter();
   const children = useMemo(
     () => (hideChildren ? [] : pageNode.children),
     [hideChildren, pageNode.children]
@@ -60,11 +64,11 @@ export function MenuItem({
       // Close the menu after clicking a link (applies to the mobile menu)
       toggleMenuOpen(false);
     }
-
-    const mainContent = document.getElementById('pageMain');
-    mainContent?.focus();
   };
 
+  // const events = router.events;
+  // events.on('routeChangeComplete', focusContent);
+
   const handleFocus = () => {
     if (parentSetOpen) {
       parentSetOpen(true);
@@ -105,6 +109,15 @@ export function MenuItem({
     }
   }, [open, parentSetOpen]);
 
+  useEffect(() => {
+    const focusContent = () => {
+      const mainContent = document.getElementById(mainId);
+      mainContent?.focus();
+    };
+
+    router.events.on('routeChangeComplete', focusContent);
+  }, [router.events, mainId]);
+
   if (
     currentPlatform &&
     JS_PLATFORMS.includes(currentPlatform as JSPlatform) &&