From 99010ad770b32467b25b697891bc68df577a6916 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 28 Jul 2022 14:38:50 +0100
Subject: [PATCH] Auto focus modals so that escape and enter keys work without
 mouse intervention

---
 packages/bbui/src/Modal/Modal.svelte | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 706ee56bb2..85a3d25e49 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -11,6 +11,8 @@
 
   const dispatch = createEventDispatcher()
   let visible = fixed || inline
+  let modal
+
   $: dispatch(visible ? "show" : "hide")
 
   export function show() {
@@ -41,12 +43,22 @@
     }
   }
 
-  async function focusFirstInput(node) {
+  async function focusModal(node) {
+    await tick()
+
+    // Try to focus first input
     const inputs = node.querySelectorAll("input")
     if (inputs?.length) {
-      await tick()
       inputs[0].focus()
     }
+
+    // Otherwise try to focus confirmation button
+    else if (modal) {
+      const confirm = modal.querySelector(".confirm-wrap .spectrum-Button")
+      if (confirm) {
+        confirm.focus()
+      }
+    }
   }
 
   setContext(Context.Modal, { show, hide, cancel })
@@ -56,7 +68,7 @@
 
 {#if inline}
   {#if visible}
-    <div use:focusFirstInput class="spectrum-Modal inline is-open">
+    <div use:focusModal bind:this={modal} class="spectrum-Modal inline is-open">
       <slot />
     </div>
   {/if}
@@ -80,7 +92,8 @@
           <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
             <slot name="outside" />
             <div
-              use:focusFirstInput
+              use:focusModal
+              bind:this={modal}
               class="spectrum-Modal is-open"
               in:fly={{ y: 30, duration: 200 }}
               out:fly|local={{ y: 30, duration: 200 }}