@txstate-mws/svelte-components 1.3.1 → 1.3.3

package/components/FocusLock.svelte

@@ -97,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

@@ -22,6 +22,7 @@ let inputvalue = '';
 let popupvalue = undefined;
 let inputelement;
 const descriptionid = randomid();
+const dispatch = createEventDispatcher();
 $: debouncedGetOptions = debouncedPromise(getOptions, 100, []);
 $: selectedSet = new Set(selected.map(s => s.value));
 async function reactToInput(..._) {
@@ -42,12 +43,14 @@ function addSelection(e) {
     const opt = { ...e.detail, label: e.detail.label || e.detail.value };
     selected = [...selected, opt];
     popupvalue = undefined;
+    dispatch('change', selected);
 }
 function removeSelection(opt, idx, nextfocus = 1) {
     if (hilitedpill === opt.value) {
         hilitedpill = selected[idx + nextfocus]?.value;
     }
     selected = selected.filter(s => s.value !== opt.value);
+    dispatch('change', selected);
 }
 function inputkeydown(e) {
     if (modifierKey(e))
@@ -97,13 +100,12 @@ function reactToHilite(..._) {
         inputelement.removeAttribute('aria-activedescendant');
 }
 $: reactToHilite(hilitedpill, id);
-const dispatch = createEventDispatcher();
-$: dispatch('change', selected);
 </script>
 
 <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/components/PopupMenu.svelte

@@ -197,6 +197,7 @@ $: hasSelected = showSelected && items.some(itm => itm.value === value);
     <ul bind:this={menuelement} id={menuid} role='listbox' style={width ? `width: ${width}` : ''} class={menuClass} class:hasSelected class:defaultmenu={!menuClass && !menuContainerClass} on:keydown={onkeydown}>
       {#each items as item, i (item.value)}
         {#if showSelected || item.value !== value}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li
             id={`${menuid}-${i}`}
             bind:this={itemelements[i]}

package/package.json

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