Describe the problem
Two issues in @patternfly/react-drag-drop:
-
The DragButton component has a hardcoded English aria-label default of "Drag button" that cannot be customized by consumers of DragDropSort.
DragButton accepts an aria-label prop (source), but Draggable only passes dnd-kit's {...attributes} and {...listeners} to it — not consumer-provided props. And item.props in DraggableObject is spread onto the Draggable wrapper <div>, not onto DragButton.
This means there is no way for consumers using DragDropSort to provide a translated aria-label for the drag handle, which is an i18n/a11y gap.
-
DragDropContainer renders the literal text "0" as the drag overlay when a draggable item has a falsy numeric id (e.g. 0).
How do you reproduce the problem?
import { DragDropSort } from '@patternfly/react-drag-drop';
const items = [
{ id: 0, content: 'First item' },
{ id: 1, content: 'Second item' },
];
<DragDropSort items={items} onDrop={(_, newItems) => setItems(newItems)} />
-
Inspect the rendered drag handle button — it always has aria-label="Drag button" regardless of locale.
-
Drag the first item (id 0). The drag overlay renders the text "0" instead of the item content. This is because getDragOverlay has if (!activeId) return which is true for 0, and the overlay JSX uses activeId && getDragOverlay() which short-circuits to 0 — React renders this as the text "0".
Expected behavior
-
Consumers should be able to provide a custom/translated aria-label for the DragButton, either via:
- A prop on
DraggableObject (e.g. item.props.dragButtonAriaLabel)
- Forwarding relevant props from
item.props to DragButton
-
Falsy numeric ids (e.g. 0) should work correctly. The checks should use activeId != null instead of !activeId / activeId &&.
Is this issue blocking you?
Not blocking. Workaround for issue 1: not possible without forking the component. We currently accept the English-only label. Workaround for issue 2: use string ids.
Screenshots
N/A
What is your environment?
What is your product and what release date are you targeting?
OpenShift Console (no hard deadline for this specific issue)
Any other information?
N/A
Jira Issue: PF-4132
Describe the problem
Two issues in
@patternfly/react-drag-drop:The
DragButtoncomponent has a hardcoded Englisharia-labeldefault of"Drag button"that cannot be customized by consumers ofDragDropSort.DragButtonaccepts anaria-labelprop (source), butDraggableonly passes dnd-kit's{...attributes}and{...listeners}to it — not consumer-provided props. Anditem.propsinDraggableObjectis spread onto theDraggablewrapper<div>, not ontoDragButton.This means there is no way for consumers using
DragDropSortto provide a translatedaria-labelfor the drag handle, which is an i18n/a11y gap.DragDropContainerrenders the literal text"0"as the drag overlay when a draggable item has a falsy numericid(e.g.0).How do you reproduce the problem?
Inspect the rendered drag handle button — it always has
aria-label="Drag button"regardless of locale.Drag the first item (id
0). The drag overlay renders the text"0"instead of the item content. This is becausegetDragOverlayhasif (!activeId) returnwhich is true for0, and the overlay JSX usesactiveId && getDragOverlay()which short-circuits to0— React renders this as the text"0".Expected behavior
Consumers should be able to provide a custom/translated
aria-labelfor theDragButton, either via:DraggableObject(e.g.item.props.dragButtonAriaLabel)item.propstoDragButtonFalsy numeric ids (e.g.
0) should work correctly. The checks should useactiveId != nullinstead of!activeId/activeId &&.Is this issue blocking you?
Not blocking. Workaround for issue 1: not possible without forking the component. We currently accept the English-only label. Workaround for issue 2: use string ids.
Screenshots
N/A
What is your environment?
@patternfly/react-drag-drop: 6.x (pre-release)React 18
What is your product and what release date are you targeting?
OpenShift Console (no hard deadline for this specific issue)
Any other information?
N/A
Jira Issue: PF-4132