svelte-dnd-action - npm Package Compare versions

Comparing version 0.9.30 to 0.9.31

dist/index.d.ts

@@ -30,2 +30,3 @@ /**
     zoneTabIndex?: number; // set the tabindex of the list container when not dragging
+    zoneItemTabIndex?: number; // set the tabindex of the list container items when not dragging
     dropTargetClasses?: string[];
@@ -32,0 +33,0 @@ dropTargetStyle?: Record<string, string>;

package.json

@@ -46,3 +46,3 @@ {
     "description": "*An awesome drag and drop library for Svelte 3 and 4 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.30",
+    "version": "0.9.31",
     "repository": {
@@ -49,0 +49,0 @@ "type": "git",

README.md

@@ -115,2 +115,3 @@ # SVELTE DND ACTION [![Known Vulnerabilities](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action/badge.svg?targetFile=package.json)](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action?targetFile=package.json)
 | `zoneTabIndex` | Number | No | `0` | Allow user to set custom tabindex to the list container when not dragging. Can be useful if you want to make the screen reader to skip the list container. You can change it at any time. |
+| `zoneItemTabIndex` | Number | No | `0` | Allow user to set custom tabindex to the list container items when not dragging. Can be useful if you use [Drag handles](https://github.com/isaacHagoel/svelte-dnd-action#examples-and-recipes). You can change it at any time. |
 | `dropTargetStyle` | Object<String> | No | `{outline: 'rgba(255, 255, 102, 0.7) solid 2px'}` | An object of styles to apply to the dnd-zone when items can be dragged into it. Note: the styles override any inline styles applied to the dnd-zone. When the styles are removed, any original inline styles will be lost |
@@ -117,0 +118,0 @@ | `dropTargetClasses`| Array<String> | No | `[]` | A list of classes to apply to the dnd-zone when items can be dragged into it. Note: make sure the classes you use are global. |

src/action.js

@@ -20,2 +20,3 @@ import {dndzone as pointerDndZone} from "./pointerAction";
  * @property {number} [zoneTabIndex] - set the tabindex of the list container when not dragging
+ * @property {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
  * @property {object} [dropTargetStyle]
@@ -71,2 +72,3 @@ * @property {string[]} [dropTargetClasses]
         zoneTabIndex,
+        zoneItemTabIndex,
         dropTargetStyle,
@@ -96,2 +98,5 @@ dropTargetClasses,
     }
+    if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
+        throw new Error(`zoneItemTabIndex should be a number but instead it is a ${typeof zoneItemTabIndex}, ${toString(zoneItemTabIndex)}`);
+    }
 }
@@ -98,0 +103,0 @@

src/keyboardAction.js

@@ -160,2 +160,3 @@ import {decrementActiveDropZoneCount, incrementActiveDropZoneCount, ITEM_ID_KEY, SOURCES, TRIGGERS} from "./constants";
         zoneTabIndex: 0,
+        zoneItemTabIndex: 0,
         dropFromOthersDisabled: false,
@@ -265,3 +266,3 @@ dropTargetStyle: DEFAULT_DROP_TARGET_STYLE,
         focusedItem = draggableEl;
-        focusedItem.tabIndex = 0;
+        focusedItem.tabIndex = config.zoneItemTabIndex;
         focusedItemId = items[focusedItemIdx][ITEM_ID_KEY];
@@ -276,2 +277,3 @@ focusedItemLabel = children[focusedItemIdx].getAttribute("aria-label") || "";
         zoneTabIndex = 0,
+        zoneItemTabIndex = 0,
         dropFromOthersDisabled = false,
@@ -286,2 +288,3 @@ dropTargetStyle = DEFAULT_DROP_TARGET_STYLE,
         config.zoneTabIndex = zoneTabIndex;
+        config.zoneItemTabIndex = zoneItemTabIndex;
         config.dropTargetStyle = dropTargetStyle;
@@ -319,3 +322,3 @@ config.dropTargetClasses = dropTargetClasses;
             allDragTargets.add(draggableEl);
-            draggableEl.tabIndex = isDragging ? -1 : 0;
+            draggableEl.tabIndex = isDragging ? -1 : config.zoneItemTabIndex;
             if (!autoAriaDisabled) {
@@ -336,3 +339,3 @@ draggableEl.setAttribute("role", "listitem");
                 focusedItem = draggableEl;
-                focusedItem.tabIndex = 0;
+                focusedItem.tabIndex = config.zoneItemTabIndex;
                 // without this the element loses focus if it moves backwards in the list
@@ -339,0 +342,0 @@ draggableEl.focus();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

292660

increased by0.77%

Lines of code

6812

increased by0.4%

Number of lines in readme file

382

increased by0.26%

No dependency changes