Update to autofocus on content navigation instead of first form element

nealfennimore · Dec 7, 2024 · b1bfaa7 · b1bfaa7
1 parent a3b6deb
commit b1bfaa7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/client/src/app/components/content_navigation.tsx b/client/src/app/components/content_navigation.tsx
@@ -1,13 +1,17 @@
 "use client";
 import { ElementWrapper } from "@/api/entities/Framework";
 import Link from "next/link";
+import { useEffect, useRef } from "react";
 
 interface PageNavigationProps {
     previous?: ElementWrapper | undefined;
     next?: ElementWrapper | undefined;
 }
 
 export const ContentNavigation = ({ previous, next }: PageNavigationProps) => {
+    const previousRef = useRef<HTMLAnchorElement>(null);
+    const nextRef = useRef<HTMLAnchorElement>(null);
+
     let nextClasses = "rounded-r-lg rounded-l-lg";
     if (previous) {
         nextClasses = "rounded-r-lg";
@@ -17,13 +21,22 @@ export const ContentNavigation = ({ previous, next }: PageNavigationProps) => {
         prevClasses = "rounded-l-lg border-r";
     }
 
+    useEffect(() => {
+        if (nextRef.current) {
+            nextRef.current.focus();
+        } else if (previousRef.current) {
+            previousRef.current.focus();
+        }
+    }, [previousRef, nextRef]);
+
     return (
         <aside className="w-5/6 flex flex-row mb-4">
             {previous && (
                 <Link
                     href={`/r3/requirement/${previous.requirement}`}
                     className={`flex flex-row items-center bg-gray-200 text-gray-700 border-gray-400 py-2 px-4 border-b-4 hover:bg-gray-300 ${prevClasses}`}
                     tabIndex={10}
+                    ref={previousRef}
                 >
                     <svg
                         className="w-6 h-6 text-gray-500"
@@ -49,6 +62,7 @@ export const ContentNavigation = ({ previous, next }: PageNavigationProps) => {
                     href={`/r3/requirement/${next.requirement}`}
                     className={`flex flex-row items-center bg-gray-200 text-gray-700 border-gray-400 py-2 px-4 border-b-4 hover:bg-gray-300 ${nextClasses}`}
                     tabIndex={11}
+                    ref={nextRef}
                 >
                     <span className="ml-4 mr-2">
                         {next.requirement}: {next.title}

diff --git a/client/src/app/components/security_requirements.tsx b/client/src/app/components/security_requirements.tsx
@@ -47,7 +47,6 @@ const Select = ({ id, defaultValue, isPending, idx }) => {
                 disabled={isPending}
                 defaultValue={defaultValue}
                 tabIndex={20}
-                autoFocus={idx === 0 && !hasChanged}
             >
                 <option value="not-implemented">Not Implemented</option>
                 <option value="implemented">Implemented</option>