@sveltia/ui 0.65.4 → 0.65.5

package/dist/components/dialog/dialog.svelte

@@ -74,12 +74,22 @@
           return;
         }
 
-        if (focusInput) {
-          /** @type {HTMLInputElement | HTMLButtonElement} */ (
-            content?.querySelector('input, button.primary')
-          )?.focus();
-          /** @type {HTMLInputElement} */ (content?.querySelector('input'))?.select();
-        } else {
+        const target = focusInput
+          ? /** @type {HTMLInputElement | HTMLButtonElement | null} */ (
+              content?.querySelector('input, button.primary')
+            )
+          : null;
+
+        if (target) {
+          target.focus();
+
+          if (target instanceof HTMLInputElement) {
+            target.select();
+          }
+        } else if (!focusInput || !content?.contains(document.activeElement)) {
+          // Fall back to the `<dialog>` element itself, so the focus is never left outside the
+          // modal, e.g. when the dialog has no input field or primary button. Content that has
+          // already taken the focus is left alone.
           modal?.focus();
         }
       })();

package/dist/components/emoji/emoji-suggestions.svelte

@@ -11,7 +11,7 @@
 -->
 <script>
   import { _ } from '@sveltia/i18n';
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import { searchEmojis } from './emoji.js';
 
   /**
@@ -156,11 +156,19 @@
    * closed until they move on to another shortcode.
    */
   export const close = (dismissed = false) => {
-    dismissedShortcodeId = dismissed && trigger ? trigger.id : undefined;
-    trigger = undefined;
-    candidates = [];
-    selectedIndex = 0;
-    anchorRect = undefined;
+    // The state is reset within `untrack()`, because a host closes the list when its field loses
+    // the focus, and the browser fires that `blur` synchronously while it removes the field from
+    // the DOM — which is to say, in the middle of Svelte rendering the block the field lives in,
+    // where a plain assignment would be reported as an unsafe mutation. The same goes for a host
+    // closing the list from an effect teardown. Not tracking the reads is what’s wanted anyway:
+    // whatever happens to be rendering has no business depending on this state.
+    untrack(() => {
+      dismissedShortcodeId = dismissed && trigger ? trigger.id : undefined;
+      trigger = undefined;
+      candidates = [];
+      selectedIndex = 0;
+      anchorRect = undefined;
+    });
   };
 
   /**

package/dist/components/text-editor/shiki/generated.d.ts

@@ -7,7 +7,7 @@ export const SHIKI_VERSION: "4.4.3";
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.65.4";
+export const UI_VERSION: "0.65.5";
 /**
  * Available syntax highlighting languages, sorted by display name.
  * @type {{ id: string, name: string, aliases?: string[] }[]}

package/dist/components/text-editor/shiki/generated.js

@@ -10,7 +10,7 @@ export const SHIKI_VERSION = "4.4.3";
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = "0.65.4";
+export const UI_VERSION = "0.65.5";
 
 /**
  * Available syntax highlighting languages, sorted by display name.

package/dist/components/util/modal.svelte

@@ -53,7 +53,8 @@
   } = $props();
 
   /**
-   * Focus the `<dialog>` element.
+   * Focus the `<dialog>` element. It has `tabindex="-1"`, so it can receive focus programmatically,
+   * allowing assistive technology to announce the modal’s label and description.
    */
   export const focus = () => {
     dialog?.focus();
@@ -144,6 +145,35 @@
    */
   let generation = 0;
 
+  /**
+   * The element that had the focus just before the modal was opened. The focus is moved back to it
+   * once the modal is closed.
+   * @type {HTMLElement | undefined}
+   */
+  let lastActiveElement;
+
+  /**
+   * Move the focus back to the element that had it before the modal was opened. This is done
+   * manually rather than relying on the browser’s own focus restoration, because the modal is
+   * closed while `<body>` is `inert`, which prevents the focus from being restored.
+   */
+  const restoreFocus = () => {
+    const { activeElement } = document;
+    const element = lastActiveElement;
+
+    lastActiveElement = undefined;
+
+    if (!element?.isConnected) {
+      return;
+    }
+
+    // Only take the focus back if it’s still inside the modal, or nowhere because the modal took it
+    // down with itself. If it has already moved on, pulling it back would undo what happened.
+    if (!activeElement || activeElement === document.body || dialog?.contains(activeElement)) {
+      element.focus();
+    }
+  };
+
   /**
    * Get the longest time from a computed CSS time list, such as `transition-duration`.
    * @param {string} value Comma-separated CSS time values in seconds, e.g. `0.4s, 0.15s`.
@@ -203,6 +233,9 @@
     generation += 1;
 
     const gen = generation;
+    const { activeElement } = document;
+
+    lastActiveElement = activeElement instanceof HTMLElement ? activeElement : undefined;
 
     onOpening?.(new CustomEvent('Opening'));
     visible = true;
@@ -217,6 +250,18 @@
     // because the element may have just been added to the DOM tree.
     dialog.getBoundingClientRect();
     setOpenClass = true;
+    // Wait for the `inert` attribute to be removed, then move the focus into the modal. The
+    // browser’s own dialog focusing steps don’t do this, because the element is still `inert` when
+    // `showModal()` is called above, leaving the focus on `<body>`. A component using this modal,
+    // such as `<Dialog>`, may then move the focus to a specific control, like an input field.
+    await tick();
+
+    if (gen !== generation || !dialog) return;
+
+    if (!dialog.contains(document.activeElement)) {
+      focus();
+    }
+
     await waitForTransition();
     if (gen !== generation) return;
     setActiveClass = true;
@@ -246,6 +291,7 @@
       document.body.inert = false;
     }
 
+    restoreFocus();
     setActiveClass = false;
     setOpenClass = false;
 
@@ -328,6 +374,7 @@
   {#if mounted}
     <dialog
       bind:this={dialog}
+      tabindex="-1"
       {...restProps}
       inert={!setOpenClass}
       {role}

package/dist/typedefs.d.ts

@@ -253,7 +253,8 @@ export type DialogProps = {
     cancelDisabled?: boolean | undefined;
     /**
      * Whether to automatically focus the first input field or primary
-     * action button. Default: `true`. If `false`, the `<dialog>` gets focused.
+     * action button. Default: `true`. If `false`, or if the dialog has neither, the `<dialog>` element
+     * gets focused instead, so the focus is always moved into the modal.
      */
     focusInput?: boolean | undefined;
     /**

package/dist/typedefs.js

@@ -89,7 +89,8 @@
  * `Control` or `Meta` depending on the user’s operating system.
  * @property {boolean} [cancelDisabled] Whether to disable the Cancel button.
  * @property {boolean} [focusInput] Whether to automatically focus the first input field or primary
- * action button. Default: `true`. If `false`, the `<dialog>` gets focused.
+ * action button. Default: `true`. If `false`, or if the dialog has neither, the `<dialog>` element
+ * gets focused instead, so the focus is always moved into the modal.
  * @property {boolean} [lightDismiss] Whether to close the modal when the backdrop (outside of the
  * modal) is clicked.
  * @property {string} [value] Value entered on the textbox.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.65.4",
+  "version": "0.65.5",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -62,7 +62,7 @@
     "eslint-config-airbnb-extended": "^3.2.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^64.1.0",
+    "eslint-plugin-jsdoc": "^64.2.0",
     "eslint-plugin-package-json": "^1.7.1",
     "eslint-plugin-svelte": "^3.23.0",
     "globals": "^17.11.0",