Fix/submission-dialog-keyboard-accessibility

src/app/directory.tsx

@@ -68,6 +68,10 @@ export function Directory({ initialTools }: Props) {
   const [tools, setTools] = useState(initialTools);
   const [search, setSearch] = useState("");
   const searchRef = useRef<HTMLInputElement>(null);
+  const dialogRef = useRef<HTMLElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const submitTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const successHeadingRef = useRef<HTMLHeadingElement>(null);
   const [category, setCategory] = useState("All tools");
   const [sort, setSort] = useState("Featured");
   const [showForm, setShowForm] = useState(false);
@@ -76,6 +80,23 @@ export function Directory({ initialTools }: Props) {
   const [submitError, setSubmitError] = useState("");
   const [submitted, setSubmitted] = useState(false);
 
+  useEffect(() => {
+    if (!showForm) return;
+
+    closeButtonRef.current?.focus();
+    return () => {
+      if (submitTriggerRef.current?.isConnected) {
+        submitTriggerRef.current.focus();
+      }
+    };
+  }, [showForm]);
+
+  useEffect(() => {
+    if (showForm && submitted) {
+      successHeadingRef.current?.focus();
+    }
+  }, [showForm, submitted]);
+
   useEffect(() => {
     function focusSearch(event: KeyboardEvent) {
       const activeElement = document.activeElement;
@@ -93,6 +114,50 @@ export function Directory({ initialTools }: Props) {
     return () => window.removeEventListener("keydown", focusSearch);
   }, []);
 
+  function openSubmitForm(event: React.MouseEvent<HTMLButtonElement>) {
+    submitTriggerRef.current = event.currentTarget;
+    setSubmitted(false);
+    setShowForm(true);
+  }
+
+  function closeSubmitForm() {
+    setShowForm(false);
+  }
+
+  function handleDialogKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeSubmitForm();
+      return;
+    }
+    if (event.key !== "Tab") return;
+
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    const focusable = Array.from(
+      dialog.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      ),
+    ).filter((element) => element.getAttribute("aria-hidden") !== "true");
+
+    if (focusable.length === 0) {
+      event.preventDefault();
+      dialog.focus();
+      return;
+    }
+
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
   const filteredTools = useMemo(() => {
     const query = search.trim().toLowerCase();
     const filtered = tools.filter((tool) => {
@@ -167,7 +232,7 @@ export function Directory({ initialTools }: Props) {
           </nav>
           <div className="header-actions">
             <ThemeToggle />
-            <button className="button button-small button-primary header-submit" onClick={() => { setShowForm(true); setSubmitted(false); }}>
+            <button className="button button-small button-primary header-submit" onClick={openSubmitForm}>
               <Plus size={16} aria-hidden="true" /> Submit a tool
             </button>
           </div>
@@ -187,7 +252,7 @@ export function Directory({ initialTools }: Props) {
               <a className="button button-primary hero-cta" href="#directory">
                 Explore the directory <ArrowRight size={16} aria-hidden="true" />
               </a>
-              <button className="button button-quiet" onClick={() => { setShowForm(true); setSubmitted(false); }}>
+              <button className="button button-quiet" onClick={openSubmitForm}>
                 <Plus size={16} aria-hidden="true" /> Add your project
               </button>
             </div>
@@ -313,7 +378,7 @@ export function Directory({ initialTools }: Props) {
           )}
           <div className="directory-foot">
             <span>Showing <strong>{filteredTools.length}</strong> of <strong>{tools.length}</strong> projects</span>
-            <button className="button button-outline" onClick={() => { setShowForm(true); setSubmitted(false); }}>
+            <button className="button button-outline" onClick={openSubmitForm}>
               Share a project <ArrowUpRight size={15} />
             </button>
           </div>
@@ -326,7 +391,7 @@ export function Directory({ initialTools }: Props) {
             <h2>Good tools deserve to be found.</h2>
             <p>Submit an open-source project, share what works, and help the community find its next idea.</p>
           </div>
-          <button className="button button-primary community-cta" onClick={() => { setShowForm(true); setSubmitted(false); }}>
+          <button className="button button-primary community-cta" onClick={openSubmitForm}>
             Submit a tool <ArrowUpRight size={16} />
           </button>
         </section>
@@ -344,20 +409,26 @@ export function Directory({ initialTools }: Props) {
       {showForm ? (
         <div
           className="modal-backdrop"
-          onKeyDown={(event) => { if (event.key === "Escape") setShowForm(false); }}
-          onMouseDown={(event) => { if (event.target === event.currentTarget) setShowForm(false); }}
+          onMouseDown={(event) => { if (event.target === event.currentTarget) closeSubmitForm(); }}
         >
-          <section className="submit-modal" role="dialog" aria-modal="true" aria-labelledby="modal-heading">
-            <button className="modal-close" onClick={() => setShowForm(false)} aria-label="Close submission form">
+          <section
+            ref={dialogRef}
+            className="submit-modal"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="modal-heading"
+            onKeyDown={handleDialogKeyDown}
+          >
+            <button ref={closeButtonRef} className="modal-close" onClick={closeSubmitForm} aria-label="Close submission form">
               <X size={19} />
             </button>
             {submitted ? (
               <div className="success-panel">
                 <div className="success-icon"><Check size={23} /></div>
                 <div className="section-kicker">YOU’RE IN THE INDEX</div>
-                <h2 id="modal-heading">Thanks for sharing.</h2>
+                <h2 id="modal-heading" ref={successHeadingRef} tabIndex={-1}>Thanks for sharing.</h2>
                 <p>Your project has been added to the community directory.</p>
-                <button className="button button-primary" onClick={() => setShowForm(false)}>Back to exploring</button>
+                <button className="button button-primary" onClick={closeSubmitForm}>Back to exploring</button>
               </div>
             ) : (
               <>