Address toast review feedback

Author: lovasoa

sqlpage/sqlpage.js

@@ -336,7 +336,25 @@ const toast_positions = {
 const toast_instances = new WeakMap();
 
 function normalize_hash(hash) {
-  return hash?.replace(/^#/, "");
+  const normalized = hash?.replace(/^#/, "");
+  if (!normalized) return normalized;
+  try {
+    return decodeURIComponent(normalized);
+  } catch {
+    return normalized;
+  }
+}
+
+function restore_focus_after_toast(toast, container) {
+  if (!toast.contains(document.activeElement)) return;
+  const next_close = [
+    ...container.querySelectorAll('.toast.show [data-bs-dismiss="toast"]'),
+  ].find((button) => !toast.contains(button));
+  if (next_close) return next_close.focus();
+  const main = document.querySelector("main");
+  if (!main) return;
+  if (!main.hasAttribute("tabindex")) main.setAttribute("tabindex", "-1");
+  main.focus();
 }
 
 function open_toasts_for_hash() {
@@ -369,6 +387,8 @@ function sqlpage_toast() {
         "toast-container",
         "position-fixed",
         "p-3",
+        "mh-100",
+        "overflow-auto",
         ...toast_positions[position],
       );
       container.dataset.sqlpageToastPosition = position;
@@ -390,6 +410,7 @@ function sqlpage_toast() {
     });
     toast_instances.set(toast, instance);
     toast.addEventListener("hidden.bs.toast", () => {
+      restore_focus_after_toast(toast, container);
       if (toast.dataset.toastTrigger) {
         if (
           normalize_hash(window.location.hash) ===
@@ -399,6 +420,8 @@ function sqlpage_toast() {
         }
         return;
       }
+      instance.dispose();
+      toast_instances.delete(toast);
       toast.remove();
       if (
         container.dataset.sqlpageGenerated === "toast-container" &&

sqlpage/templates/shell.handlebars

@@ -46,7 +46,7 @@
         {{/if}}
     {{/if}}
 
-    <script src="{{static_path 'sqlpage.js'}}" defer nonce="{{@csp_nonce}}"></script>
+    <script src="{{static_path 'sqlpage.js'}}" defer nonce="{{@csp_nonce}}" data-sqlpage-runtime="deferred"></script>
     {{#each (to_array javascript)}}
         {{#if this}}
             <script src="{{this}}" defer nonce="{{@../csp_nonce}}"></script>

sqlpage/templates/toast.handlebars

@@ -12,7 +12,27 @@
       {{~/if~}}
     </div>
     {{~#if dismissible~}}
-    <button type="button" class="btn-close{{#if color}} btn-close-white{{/if}} flex-shrink-0" data-bs-dismiss="toast" aria-label="Close notification"></button>
+    <button type="button" class="btn p-0 border-0 bg-transparent text-reset flex-shrink-0" data-bs-dismiss="toast" aria-label="Close notification">{{icon_img "x"}}</button>
     {{~/if~}}
   </div>
 </div>
+<script nonce="{{@csp_nonce}}">
+  (() => {
+    const initialize = () => window.sqlpage_toast?.();
+    if (window.bootstrap || window.tabler?.bootstrap) return initialize();
+
+    const runtime = document.querySelector("script[data-sqlpage-runtime]");
+    if (!runtime) return;
+    if (runtime.dataset.sqlpageRuntime !== "deferred") {
+      runtime.addEventListener("load", initialize, { once: true });
+      return;
+    }
+
+    const early_runtime = runtime.cloneNode();
+    runtime.remove();
+    early_runtime.dataset.sqlpageRuntime = "loading";
+    early_runtime.removeAttribute("defer");
+    early_runtime.addEventListener("load", initialize, { once: true });
+    document.head.appendChild(early_runtime);
+  })();
+</script>

tests/end-to-end/official-site.spec.ts

@@ -53,14 +53,18 @@ test("toast notifications initialize, stack, dismiss, and render safely", async
   const stackOne = page.locator("#toast-stack-one");
   const stackTwo = page.locator("#toast-stack-two");
   await expect(stackOne).toBeHidden();
-  await page.getByRole("link", { name: "Show queued notifications" }).click();
+  await page.getByRole("button", { name: "Show queued notifications" }).click();
   await expect(stackOne).toBeVisible();
   await expect(stackTwo).toBeVisible();
+  const temporary = page.locator("#toast-short");
+  await expect(temporary).toBeVisible();
   const stackContainer = stackOne.locator("xpath=..");
   await expect(stackContainer).toHaveAttribute(
     "data-sqlpage-toast-position",
     "top-end",
   );
+  await expect(stackContainer).toHaveClass(/\bmh-100\b/);
+  await expect(stackContainer).toHaveClass(/\boverflow-auto\b/);
   expect(
     await stackTwo
       .locator("xpath=..")
@@ -74,27 +78,28 @@ test("toast notifications initialize, stack, dismiss, and render safely", async
     (firstBox?.y ?? 0) + (firstBox?.height ?? 0),
   );
 
-  const temporary = page.locator("#toast-short");
-  await expect(temporary).toBeVisible();
   await expect(temporary).toBeHidden({ timeout: 5000 });
   await expect(stackOne).toBeVisible();
 
   const dismissible = page.locator("#toast-dismissible");
-  await page.getByRole("link", { name: "Show dismissible error" }).click();
+  await page.getByRole("button", { name: "Show dismissible error" }).click();
   await expect(
     dismissible.getByRole("button", { name: "Close notification" }),
   ).toBeVisible();
   await dismissible.getByRole("button", { name: "Close notification" }).click();
   await expect(dismissible).toBeHidden();
-  await page.getByRole("link", { name: "Show dismissible error" }).click();
+  await expect(page.locator("main")).toBeFocused();
+  await page.getByRole("button", { name: "Show dismissible error" }).click();
   await expect(dismissible).toBeVisible();
   await dismissible.getByRole("button", { name: "Close notification" }).click();
-  await page.getByRole("link", { name: "Show non-dismissible status" }).click();
+  await page
+    .getByRole("button", { name: "Show non-dismissible status" })
+    .click();
   await expect(
     page.locator("#toast-nondismissible").getByRole("button"),
   ).toHaveCount(0);
 
-  await page.getByRole("link", { name: "Show rich notifications" }).click();
+  await page.getByRole("button", { name: "Show rich notifications" }).click();
   await expect(page.locator("#toast-markdown strong")).toHaveText("2.0");
   await expect(page.locator("#toast-markdown a")).toHaveAttribute(
     "href",
@@ -108,7 +113,7 @@ test("toast notifications initialize, stack, dismiss, and render safely", async
   const bottomContainer = page.locator(
     '[data-sqlpage-toast-position="bottom-center"]',
   );
-  await page.getByRole("link", { name: "Show bottom notification" }).click();
+  await page.getByRole("button", { name: "Show bottom notification" }).click();
   await expect(page.locator("#toast-bottom-center")).toBeVisible();
   await expect(bottomContainer).toHaveClass(/\bbottom-0\b/);
   await expect(bottomContainer).toHaveClass(/\bstart-50\b/);