svelte-dnd-action 0.9.14 → 0.9.15

package/README.md

@@ -206,7 +206,7 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 -   The host component must refresh the items that are passed in to the custom-action when receiving consider and finalize events (do not omit any handler).
 -   FYI, the library assumes it is okay to add a temporary item to the items list in any of the dnd-zones while an element is dragged around.
 -   If you want dragged items to be able to scroll the container, make sure the scroll-container (the element with overflow:scroll) is the dnd-zone (the element decorated with this custom action)
--   Svelte's built-in transitions might not play nice with this library. Luckily, it is an easy issue to work around. There are examples below.
+-   Svelte's built-in transitions might not play nice with this library. Luckily, it is an easy issue to work around. There are examples above.
 
 ### Overriding the item id key name
 

package/dist/index.js

@@ -1955,7 +1955,12 @@
   var alertsDiv;
 
   function initAriaOnBrowser() {
-    // setting the dynamic alerts
+    if (alertsDiv) {
+      // it is already initialized
+      return;
+    } // setting the dynamic alerts
+
+
     alertsDiv = document.createElement("div");
 
     (function initAlertsDiv() {
@@ -1999,6 +2004,20 @@
 
     return _objectSpread2({}, INSTRUCTION_IDs);
   }
+  /**
+   * Removes all the artifacts (dom elements) added by this module
+   */
+
+  function destroyAria() {
+    if (isOnServer || !alertsDiv) return;
+    Object.keys(ID_TO_INSTRUCTION).forEach(function (id) {
+      var _document$getElementB;
+
+      return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+    });
+    alertsDiv.remove();
+    alertsDiv = undefined;
+  }
 
   function instructionToHiddenDiv(id, txt) {
     var div = document.createElement("div");
@@ -2016,6 +2035,12 @@
 
 
   function alertToScreenReader(txt) {
+    if (isOnServer) return;
+
+    if (!alertsDiv) {
+      initAriaOnBrowser();
+    }
+
     alertsDiv.innerHTML = "";
     var alertText = document.createTextNode(txt);
     alertsDiv.appendChild(alertText); // this is needed for Safari
@@ -2046,7 +2071,7 @@
    * maybe keep focus on the last dragged item upon drop?
    */
 
-  var INSTRUCTION_IDs$1 = initAria();
+  var INSTRUCTION_IDs$1;
   /* drop-zones registration management */
 
   function registerDropZone$1(dropZoneEl, type) {
@@ -2058,6 +2083,7 @@
       printDebug(function () {
         return "adding global keydown and click handlers";
       });
+      INSTRUCTION_IDs$1 = initAria();
       window.addEventListener("keydown", globalKeyDownHandler);
       window.addEventListener("click", globalClickHandler);
     }
@@ -2094,6 +2120,8 @@
       });
       window.removeEventListener("keydown", globalKeyDownHandler);
       window.removeEventListener("click", globalClickHandler);
+      INSTRUCTION_IDs$1 = undefined;
+      destroyAria();
     }
   }
 
@@ -2411,18 +2439,19 @@
       config.dropTargetClasses = dropTargetClasses;
       config.autoAriaDisabled = autoAriaDisabled;
 
-      if (!autoAriaDisabled) {
-        node.setAttribute("aria-disabled", dragDisabled);
-        node.setAttribute("role", "list");
-        node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
-      }
-
       if (config.type && newType !== config.type) {
         unregisterDropZone$1(node, config.type);
       }
 
       config.type = newType;
       registerDropZone$1(node, newType);
+
+      if (!autoAriaDisabled) {
+        node.setAttribute("aria-disabled", dragDisabled);
+        node.setAttribute("role", "list");
+        node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
+      }
+
       dzToConfig$1.set(node, config);
 
       if (isDragging) {

package/dist/index.mjs

@@ -1949,7 +1949,12 @@ var ALERT_DIV_ID = "dnd-action-aria-alert";
 var alertsDiv;
 
 function initAriaOnBrowser() {
-  // setting the dynamic alerts
+  if (alertsDiv) {
+    // it is already initialized
+    return;
+  } // setting the dynamic alerts
+
+
   alertsDiv = document.createElement("div");
 
   (function initAlertsDiv() {
@@ -1993,6 +1998,20 @@ function initAria() {
 
   return _objectSpread2({}, INSTRUCTION_IDs);
 }
+/**
+ * Removes all the artifacts (dom elements) added by this module
+ */
+
+function destroyAria() {
+  if (isOnServer || !alertsDiv) return;
+  Object.keys(ID_TO_INSTRUCTION).forEach(function (id) {
+    var _document$getElementB;
+
+    return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+  });
+  alertsDiv.remove();
+  alertsDiv = undefined;
+}
 
 function instructionToHiddenDiv(id, txt) {
   var div = document.createElement("div");
@@ -2010,6 +2029,12 @@ function instructionToHiddenDiv(id, txt) {
 
 
 function alertToScreenReader(txt) {
+  if (isOnServer) return;
+
+  if (!alertsDiv) {
+    initAriaOnBrowser();
+  }
+
   alertsDiv.innerHTML = "";
   var alertText = document.createTextNode(txt);
   alertsDiv.appendChild(alertText); // this is needed for Safari
@@ -2040,7 +2065,7 @@ var typeToDropZones$1 = new Map();
  * maybe keep focus on the last dragged item upon drop?
  */
 
-var INSTRUCTION_IDs$1 = initAria();
+var INSTRUCTION_IDs$1;
 /* drop-zones registration management */
 
 function registerDropZone$1(dropZoneEl, type) {
@@ -2052,6 +2077,7 @@ function registerDropZone$1(dropZoneEl, type) {
     printDebug(function () {
       return "adding global keydown and click handlers";
     });
+    INSTRUCTION_IDs$1 = initAria();
     window.addEventListener("keydown", globalKeyDownHandler);
     window.addEventListener("click", globalClickHandler);
   }
@@ -2088,6 +2114,8 @@ function unregisterDropZone$1(dropZoneEl, type) {
     });
     window.removeEventListener("keydown", globalKeyDownHandler);
     window.removeEventListener("click", globalClickHandler);
+    INSTRUCTION_IDs$1 = undefined;
+    destroyAria();
   }
 }
 
@@ -2405,18 +2433,19 @@ function dndzone$1(node, options) {
     config.dropTargetClasses = dropTargetClasses;
     config.autoAriaDisabled = autoAriaDisabled;
 
-    if (!autoAriaDisabled) {
-      node.setAttribute("aria-disabled", dragDisabled);
-      node.setAttribute("role", "list");
-      node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
-    }
-
     if (config.type && newType !== config.type) {
       unregisterDropZone$1(node, config.type);
     }
 
     config.type = newType;
     registerDropZone$1(node, newType);
+
+    if (!autoAriaDisabled) {
+      node.setAttribute("aria-disabled", dragDisabled);
+      node.setAttribute("role", "list");
+      node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
+    }
+
     dzToConfig$1.set(node, config);
 
     if (isDragging) {

package/package.json

@@ -40,7 +40,7 @@
         "dist"
     ],
     "description": "*An awesome drag and drop library for Svelte 3 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.14",
+    "version": "0.9.15",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/helpers/aria.js

@@ -13,6 +13,10 @@ const ALERT_DIV_ID = "dnd-action-aria-alert";
 let alertsDiv;
 
 function initAriaOnBrowser() {
+    if (alertsDiv) {
+        // it is already initialized
+        return;
+    }
     // setting the dynamic alerts
     alertsDiv = document.createElement("div");
     (function initAlertsDiv() {
@@ -47,6 +51,17 @@ export function initAria() {
     }
     return {...INSTRUCTION_IDs};
 }
+
+/**
+ * Removes all the artifacts (dom elements) added by this module
+ */
+export function destroyAria() {
+    if (isOnServer || !alertsDiv) return;
+    Object.keys(ID_TO_INSTRUCTION).forEach(id => document.getElementById(id)?.remove());
+    alertsDiv.remove();
+    alertsDiv = undefined;
+}
+
 function instructionToHiddenDiv(id, txt) {
     const div = document.createElement("div");
     div.id = id;
@@ -62,6 +77,10 @@ function instructionToHiddenDiv(id, txt) {
  * @param {string} txt
  */
 export function alertToScreenReader(txt) {
+    if (isOnServer) return;
+    if (!alertsDiv) {
+        initAriaOnBrowser();
+    }
     alertsDiv.innerHTML = "";
     const alertText = document.createTextNode(txt);
     alertsDiv.appendChild(alertText);

package/src/keyboardAction.js

@@ -1,7 +1,7 @@
 import {decrementActiveDropZoneCount, incrementActiveDropZoneCount, ITEM_ID_KEY, SOURCES, TRIGGERS} from "./constants";
 import {styleActiveDropZones, styleInactiveDropZones} from "./helpers/styler";
 import {dispatchConsiderEvent, dispatchFinalizeEvent} from "./helpers/dispatcher";
-import {initAria, alertToScreenReader} from "./helpers/aria";
+import {initAria, alertToScreenReader, destroyAria} from "./helpers/aria";
 import {toString} from "./helpers/util";
 import {printDebug} from "./constants";
 
@@ -29,13 +29,14 @@ const typeToDropZones = new Map();
  * maybe keep focus on the last dragged item upon drop?
  */
 
-const INSTRUCTION_IDs = initAria();
+let INSTRUCTION_IDs;
 
 /* drop-zones registration management */
 function registerDropZone(dropZoneEl, type) {
     printDebug(() => "registering drop-zone if absent");
     if (typeToDropZones.size === 0) {
         printDebug(() => "adding global keydown and click handlers");
+        INSTRUCTION_IDs = initAria();
         window.addEventListener("keydown", globalKeyDownHandler);
         window.addEventListener("click", globalClickHandler);
     }
@@ -61,6 +62,8 @@ function unregisterDropZone(dropZoneEl, type) {
         printDebug(() => "removing global keydown and click handlers");
         window.removeEventListener("keydown", globalKeyDownHandler);
         window.removeEventListener("click", globalClickHandler);
+        INSTRUCTION_IDs = undefined;
+        destroyAria();
     }
 }
 
@@ -280,16 +283,16 @@ export function dndzone(node, options) {
         config.dropTargetStyle = dropTargetStyle;
         config.dropTargetClasses = dropTargetClasses;
         config.autoAriaDisabled = autoAriaDisabled;
-        if (!autoAriaDisabled) {
-            node.setAttribute("aria-disabled", dragDisabled);
-            node.setAttribute("role", "list");
-            node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs.DND_ZONE_ACTIVE);
-        }
         if (config.type && newType !== config.type) {
             unregisterDropZone(node, config.type);
         }
         config.type = newType;
         registerDropZone(node, newType);
+        if (!autoAriaDisabled) {
+            node.setAttribute("aria-disabled", dragDisabled);
+            node.setAttribute("role", "list");
+            node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs.DND_ZONE_ACTIVE);
+        }
         dzToConfig.set(node, config);
 
         if (isDragging) {
@@ -298,8 +301,8 @@ export function dndzone(node, options) {
                 focusedItem.contains(node) ||
                 config.dropFromOthersDisabled ||
                 (focusedDz && config.type !== dzToConfig.get(focusedDz).type)
-                ? -1
-                : 0;
+                    ? -1
+                    : 0;
         } else {
             node.tabIndex = config.zoneTabIndex;
         }