@soleil-se/config-svelte 1.27.3 → 1.27.4

package/components/CustomList/i18n.js

@@ -4,13 +4,19 @@ export default createI18n({
   sv: {
     add: 'Lägg till...',
     edit: 'Redigera',
+    ok: 'OK',
+    remove: 'Ta bort',
   },
   no: {
     add: 'Legg till...',
     edit: 'Redigere',
+    ok: 'OK',
+    remove: 'Fjern',
   },
   en: {
     add: 'Add...',
     edit: 'Edit',
+    ok: 'OK',
+    remove: 'Remove',
   },
 });

package/components/CustomList/internal/SortableItem.svelte

@@ -1,6 +1,8 @@
 <script>
   import { createEventDispatcher } from 'svelte';
 
+  import i18n from '../i18n';
+
   export let id;
   export let disabled;
   export let icon;
@@ -17,6 +19,7 @@
 </script>
 
 <!-- This is handled by the click event on the edit button -->
+<!-- eslint-disable-next-line svelte/no-unused-svelte-ignore -->
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
 <div class="list-component__item" on:dblclick={editItem} on:click>
   {#if icon}
@@ -26,10 +29,10 @@
     <slot />
   </span>
   <div class="list-component__item-actions">
-    <button {disabled} on:click={editItem}>
+    <button aria-label={i18n('ok')} {disabled} on:click={editItem}>
       <i class="glyphicons edit" aria-hidden="true"></i>
     </button>
-    <button {disabled} on:click={removeItem}>
+    <button aria-label={i18n('remove')} {disabled} on:click={removeItem}>
       <i class="glyphicons remove-2" aria-hidden="true"></i>
     </button>
     <i class="glyphicons move" aria-hidden="true"></i>

package/components/Modal/Component.svelte

@@ -2,7 +2,7 @@
   /* eslint svelte/no-unused-svelte-ignore: "off" */
 
   import validate from '@soleil-se/config-validate';
-  import { onMount, createEventDispatcher } from 'svelte';
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
   import A11yDialog from 'a11y-dialog';
   import { generateId } from '../../utils';
 
@@ -104,7 +104,7 @@
   }
 
   onMount(() => {
-    a11yDialog = new A11yDialog(element).destroy();
+    a11yDialog = new A11yDialog(element);
 
     a11yDialog.on('show', () => {
       select2DropAddedObserver.observe(document.body, { childList: true });
@@ -131,6 +131,10 @@
 
     if (open) a11yDialog.show();
   });
+
+  onDestroy(() => {
+    a11yDialog?.destroy();
+  });
 </script>
 
 <svelte:window on:keydown={handleEscape} />

package/components/TextList/i18n.js

@@ -3,11 +3,20 @@ import createI18n from '../../utils/createI18n';
 export default createI18n({
   sv: {
     add: 'Lägg till...',
+    ok: 'OK',
+    remove: 'Ta bort',
+    cancel: 'Avbryt',
   },
   no: {
     add: 'Legg till...',
+    ok: 'OK',
+    remove: 'Fjern',
+    cancel: 'Avbryt',
   },
   en: {
     add: 'Add...',
+    ok: 'OK',
+    remove: 'Remove',
+    cancel: 'Cancel',
   },
 });

package/components/TextList/internal/Item.svelte

@@ -1,6 +1,8 @@
 <script>
   import { tick, createEventDispatcher, onMount } from 'svelte';
 
+  import i18n from '../i18n';
+
   export let id;
   export let value;
   export let edit = false;
@@ -67,24 +69,30 @@
       />
 
       <span class="input-group-btn">
-        <button class="btn btn-default" type="button" on:click={updateItem}>
+        <button class="btn btn-default" aria-label={i18n('ok')} type="button" on:click={updateItem}>
           <i class="glyphicons ok-2"></i>
         </button>
-        <button class="btn btn-default" type="button" on:click={abortEdit}>
+        <button
+          class="btn btn-default"
+          aria-label={i18n('remove')}
+          type="button"
+          on:click={abortEdit}
+        >
           <i class="glyphicons remove-2"></i>
         </button>
       </span>
     </div>
   </div>
 {:else}
+  <!-- eslint-disable-next-line svelte/no-unused-svelte-ignore -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div on:dblclick={editItem}>
     <span class="item-name">{value}</span>
     <div class="list-component__item-actions">
-      <button on:click={editItem}>
+      <button aria-label={i18n('ok')} on:click={editItem}>
         <i class="glyphicons edit" aria-hidden="true"></i>
       </button>
-      <button on:click={removeItem}>
+      <button aria-label={i18n('cancel')} on:click={removeItem}>
         <i class="glyphicons remove-2" aria-hidden="true"></i>
       </button>
       <i class="glyphicons move" aria-hidden="true"></i>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.27.3",
+  "version": "1.27.4",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -36,17 +36,17 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-svelte": "^2.44.0",
+    "eslint-plugin-svelte": "^2.44.1",
     "glob": "^11.0.0",
     "stylelint": "^16.9.0",
     "sveld": "^0.20.2",
     "svelte": "^4.2.19",
-    "svelte-preprocess": "^6.0.2"
+    "svelte-preprocess": "^6.0.3"
   },
   "dependencies": {
     "@soleil-se/config-validate": "^1.2.1",
     "a11y-dialog": "8.1.1",
-    "svelte-dnd-action": "^0.9.50"
+    "svelte-dnd-action": "^0.9.51"
   },
   "homepage": "https://docs.soleil.se/packages/config-svelte",
   "scripts": {