@dosgato/dialog 0.0.18 → 0.0.19

package/Listbox.svelte

@@ -122,6 +122,7 @@ function focusListbox() {
   <span id={labelId}>{label}</span>
   <ul bind:this={listboxElement} role="listbox" id={listId} class="listbox-items" tabindex="0" aria-describedby={descid} aria-labelledby={labelId} aria-multiselectable={multiselect} on:keydown={onkeydown} on:focus={focusListbox}>
     {#each items as item, i (item.value)}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <li
         bind:this={itemelements[i]}
         id={`${listId}-${i}`}

package/Tab.svelte

@@ -13,7 +13,7 @@ const last = idx === $store.tabs.length - 1;
 {#if $accordion}
   <div bind:this={tabelements[idx]} id={$store.tabids[title]} class="tabs-tab" class:last aria-selected={active} aria-controls={$store.panelids[title]} role="tab" tabindex={0} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><Icon icon={$store.tabs[idx].icon} inline />{title}<i class="tabs-accordion-arrow" aria-hidden="true"></i></div>
 {/if}
-<div id={$store.panelids[title]} hidden={!active} role="tabpanel" tabindex="0" aria-labelledby={$store.tabids[title]} class="tabs-panel" class:accordion={$accordion}>
+<div id={$store.panelids[title]} hidden={!active} role="tabpanel" tabindex="-1" aria-labelledby={$store.tabids[title]} class="tabs-panel" class:accordion={$accordion}>
   <slot />
 </div>
 

package/chooser/Chooser.svelte

@@ -92,7 +92,7 @@ onMount(async () => {
         </ul>
       </Loading>
     </section>
-    <section class="dialog-chooser-preview" tabindex={$preview ? 0 : -1}>
+    <section class="dialog-chooser-preview" tabindex="-1">
       {#if $preview}
         <Thumbnail item={$preview} />
         <Details item={$preview}>

package/chooser/Details.svelte

@@ -2,7 +2,7 @@
 export let item;
 </script>
 
-<ul class="dialog-chooser-info">
+<ul class="dialog-chooser-info" aria-live="polite">
   {#if item.type !== 'raw'}
     <li>{item.name}</li>
   {/if}

package/iconpicker/FieldIconPicker.svelte

@@ -73,10 +73,10 @@ function onSelectCategory() {
 }
 function onKeyDown(e) {
     const currentSelectionIndex = visibleIcons.findIndex(i => i.class === selected.icon);
-    let newIndex;
     if (modifierKey(e))
         return;
-    else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+    let newIndex;
+    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
         e.preventDefault();
         if (currentSelectionIndex === visibleIcons.length - 1) {
             newIndex = 0;
@@ -124,11 +124,11 @@ function onKeyDown(e) {
               {/each}
             </select>
           </div>
-          <fieldset tabindex="0">
+          <fieldset>
             <ScreenReaderOnly><legend class="sr-only">Icons</legend></ScreenReaderOnly>
-            <div class="icon-picker-items" role="radiogroup" on:keydown={onKeyDown}>
+            <div class="icon-picker-items" role="radiogroup">
               {#each visibleIcons as icon, idx (icon.class)}
-                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)}>
+                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)}  on:keydown={onKeyDown}>
                   <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa-brands' : 'fa-solid'}:${icon.class.slice(3)}`}/>
                   <ScreenReaderOnly>{icon.label}</ScreenReaderOnly>
                 </div>
@@ -253,4 +253,4 @@ function onKeyDown(e) {
       line-height: 250px;
       color: #999;
   }
-</style>
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.0",
     "@txstate-mws/svelte-forms": ">=0.0.22",
@@ -66,7 +66,7 @@
     "./chooser/Page.svelte": "./chooser/Page.svelte",
     "./chooser/Thumbnail.svelte": "./chooser/Thumbnail.svelte",
     "./chooser": "./chooser/index.js",
-    "./colorpicker/FieldColorPIcker.svelte": "./colorpicker/FieldColorPIcker.svelte",
+    "./colorpicker/FieldColorPicker.svelte": "./colorpicker/FieldColorPicker.svelte",
     "./colorpicker/colorpicker": "./colorpicker/colorpicker.js",
     "./colorpicker": "./colorpicker/index.js",
     "./fileIcons": "./fileIcons.js",