fix(DragDropSort): support custom drag button aria-label and fix falsy id overlay

Adds a `dragButtonAriaLabel` prop to `Draggable` that forwards to
`DragButton`, allowing consumers to provide a translated accessible
name for the drag handle via `DraggableObject.props`.

Also fixes `DragDropContainer` rendering the literal text "0" as the
drag overlay when a draggable item has a falsy numeric id (e.g. `0`).
The `activeId && getDragOverlay()` expression short-circuits to `0`
which React renders as text. Changed to `activeId != null`.

Author: logonoff

packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx

@@ -240,7 +240,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
   };
 
   const getDragOverlay = () => {
-    if (!activeId) {
+    if (activeId == null) {
       return;
     }
     const item = findItem(activeId, findContainer(activeId));
@@ -290,7 +290,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
     );
   };
 
-  const dragOverlay = <DragOverlay>{activeId && getDragOverlay()}</DragOverlay>;
+  const dragOverlay = <DragOverlay>{activeId != null && getDragOverlay()}</DragOverlay>;
 
   const portalTarget = typeof appendTo === 'function' ? appendTo() : appendTo || document.body;
 

packages/react-drag-drop/src/components/DragDrop/Draggable.tsx

@@ -13,13 +13,16 @@ export interface DraggableProps extends React.HTMLProps<HTMLDivElement> {
   id?: string;
   /** Flag indicating the draggable element should include a drag button. */
   useDragButton?: boolean;
+  /** Accessible name of the drag button. */
+  dragButtonAriaLabel?: string;
 }
 
 export const Draggable: React.FunctionComponent<DraggableProps> = ({
   children,
   id,
   className,
   useDragButton = false,
+  dragButtonAriaLabel,
   ...props
 }: DraggableProps) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -38,7 +41,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       style={style}
       {...props}
     >
-      <DragButton {...attributes} {...listeners} />
+      <DragButton {...attributes} {...listeners} {...(dragButtonAriaLabel && { 'aria-label': dragButtonAriaLabel })} />
       {children}
     </div>
   ) : (