@txstate-mws/svelte-components 1.3.0 → 1.3.2

package/actions/glue.d.ts

@@ -11,6 +11,6 @@ export interface GlueAlignStore {
     halign: 'left' | 'right';
 }
 export declare function glue(el: HTMLElement, { target, align, cover, store }: GlueArgs): {
-    update({ target, align, cover, store }: GlueArgs): void;
+    update({ target: utarget, align: ualign, cover: ucover, store: ustore }: GlueArgs): void;
     destroy: () => void;
 };

package/components/FocusLock.svelte

@@ -1,4 +1,5 @@
 <script context="module">const FocusLockStack = [];
+const waitAtick = typeof requestAnimationFrame !== 'undefined' ? resolve => requestAnimationFrame(resolve) : resolve => resolve(0);
 </script>
 
 <script>export let returnfocusto = undefined;
@@ -16,8 +17,7 @@ import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 const dispatch = createEventDispatcher();
 let lockelement;
 let abovelockelement;
-let active = true;
-let listenforescape = false;
+let state = 'init';
 if (initialfocus)
     hidefocus = false;
 onMount(async () => {
@@ -25,8 +25,9 @@ onMount(async () => {
     if (prevFocusLock)
         prevFocusLock.pause();
     FocusLockStack.push({
-        pause: () => { active = false; },
-        unpause: () => { active = true; }
+        pause: () => { state = 'paused'; },
+        unpause: () => { if (state === 'paused')
+            state = 'active'; }
     });
     if (typeof returnfocusto === 'undefined') {
         returnfocusto = document.querySelector(':focus');
@@ -42,12 +43,17 @@ onMount(async () => {
     else {
         setInitialFocus();
     }
-    setTimeout(() => { listenforescape = true; }, 0);
+    setTimeout(() => { state = 'active'; }, 0);
 });
 onDestroy(async () => {
-    const wasactive = active;
-    active = false;
-    await tick();
+    const wasactive = state !== 'paused';
+    state = 'destroyed';
+    // we need to allow the screen to redraw so that we can
+    // change focus back to where it was, and we need
+    // to allow the click event that destroyed us to finish bubbling
+    // before we unpause the next focuslock in the stack or else it
+    // will think it was an "outside" click and kill itself
+    await new Promise(waitAtick);
     if (returnfocusto && wasactive) {
         returnfocusto.focus();
     }
@@ -69,13 +75,13 @@ const setLastFocus = () => {
     }
 };
 const keydown = (e) => {
-    if (active && e.key === 'Escape' && escapable) {
+    if (state === 'active' && e.key === 'Escape' && escapable) {
         e.preventDefault();
         dispatch('escape');
     }
 };
 const focusin = (e) => {
-    if (active && e.target instanceof HTMLElement && !lockelement?.contains(e.target)) {
+    if (state === 'active' && e.target instanceof HTMLElement && !lockelement?.contains(e.target)) {
         if (e.target === abovelockelement)
             setLastFocus();
         else
@@ -83,7 +89,7 @@ const focusin = (e) => {
     }
 };
 const windowclick = (_) => {
-    if (listenforescape && active) {
+    if (state === 'active') {
         returnfocusto = undefined;
         dispatch('escape');
     }
@@ -91,11 +97,14 @@ const windowclick = (_) => {
 </script>
 <svelte:window on:click={windowclick} />
 <div class={className} role="alertdialog" aria-modal="true" on:click|stopPropagation on:keydown|stopPropagation={keydown} on:focusin={focusin}>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div bind:this={abovelockelement} tabindex="0"></div>
   <div bind:this={lockelement} on:keydown={keydown}>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     {#if hidefocus}<div class="hiddenfocus" use:buttonify on:blur={() => { hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}
     <slot></slot>
   </div>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div tabindex="0"></div>
 </div>
 

package/components/Modal.svelte

@@ -23,6 +23,7 @@ onMount(() => {
 });
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div use:portal={usePortal} class="modal-backdrop" class:opaque on:click|stopPropagation|preventDefault={() => escapable && endmodal()}>
   <FocusLock class="modal-container {containerClass}" {escapable} on:escape {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus}>
     <slot></slot>

package/components/MultiSelect.svelte

@@ -104,6 +104,7 @@ $: dispatch('change', selected);
 <fieldset>
   <ul class="multiselect-selected" class:disabled role="listbox">
     {#each selected as option, i}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <li id={id + option.value} role="option" tabindex="-1" class="multiselect-pill" class:hilited={hilitedpill === option.value}
         on:click|preventDefault|stopPropagation={() => !disabled && removeSelection(option, i, 1)} on:mousedown={e => disabled && e.preventDefault()}
         aria-selected="true">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",