feat: ⚡ cleanup and A11y on List

Author: ahwelgemoed

packages/web-widgets/drag-and-drop-widget/src/Draganddropwidget.tsx

@@ -115,9 +115,9 @@ export default class Draganddropwidget extends Component<DraganddropwidgetContai
     };
 
     render(): ReactNode {
+        console.log(`this.props`, this.props);
         const { listOfSortableItems } = this.state;
         const { content, emptyData } = this.props;
-        console.log(`this.props`, this.props);
         if (listOfSortableItems) {
             if (isTouchDevice()) {
                 return (

packages/web-widgets/drag-and-drop-widget/src/components/DragCard.tsx

@@ -1,16 +1,14 @@
 import { createElement, useRef, ReactElement } from "react";
 import { useDrag, useDrop, DragObjectWithType, DragSourceMonitor } from "react-dnd";
-import { useDragDropManager } from "react-dnd";
 
 import classnames from "classnames";
 import { DragCardType, ListOfSortableItemsType } from "./types";
 
 const DragCard = ({ children, item, index, reorderAfterDrop, listOfSortableItems }: DragCardType): ReactElement => {
-    const t = useDragDropManager();
-    console.log(`useDragDropManager()`, t.getActions());
     const ref = useRef<HTMLDivElement>(null);
 
     const findOrder = (hoverItem: any, monitor: DragSourceMonitor): number => {
+        console.log(`isOver`, monitor.getItem());
         const hoverIndex = index;
         const dragIndex = hoverItem.index;
 
@@ -79,24 +77,11 @@ const DragCard = ({ children, item, index, reorderAfterDrop, listOfSortableItems
         "drag-and-drop__is-over": isOver,
         "drag-and-drop__is-dragging": isDragging
     });
-    const u = t.getMonitor();
     return (
         <div
-            onKeyPress={event => {
-                if (event.key === "Enter") {
-                    console.log("1");
-
-                    const y = t.getMonitor().getSourceId();
-                    console.log(`y`, y);
-                    if (y) {
-                        console.log("2");
-                        console.log("enter press here! ", t.getActions().beginDrag([y]));
-                        console.log("enter press here! ", t.getActions().hover([y]));
-                    }
-                }
-            }}
-            className={customClassNames}
+            role="listitem"
             tabIndex={0}
+            className={customClassNames}
             // Used For Testing Only
             style={{
                 padding: "0.5rem 1rem",

packages/web-widgets/drag-and-drop-widget/src/components/DragInit.tsx

@@ -4,7 +4,7 @@ import { DragListProps, ListOfSortableItemsType } from "./types";
 
 function Column({ listOfSortableItems, content, reorderAfterDrop, emptyData }: DragListProps): ReactElement {
     return (
-        <div className="app">
+        <div role="list" className="drag-and-drop__list">
             {listOfSortableItems.length ? (
                 listOfSortableItems.map((fullItem: ListOfSortableItemsType, index: number) => {
                     return (