diff --git a/src/components/DraggableList/SortableItem.tsx b/src/components/DraggableList/SortableItem.tsx index 90f0d4238dc0d..67aa4a57b6244 100644 --- a/src/components/DraggableList/SortableItem.tsx +++ b/src/components/DraggableList/SortableItem.tsx @@ -55,16 +55,33 @@ function SortableItem({id, children, disabled = false, isFocused = false}: Sorta } }; + // Screen readers (e.g. JAWS in Virtual PC Cursor mode) activate elements via the + // accessibility API rather than dispatching a keydown event. This produces a click + // on the focused wrapper div instead of the inner pressable. Forward that click to + // the inner pressable so Enter works correctly with assistive technology. + const handleClick = (e: React.MouseEvent) => { + if (isDragging || e.target !== node.current) { + return; + } + const innerPressable = node.current?.querySelector(PRESSABLE_SELECTOR); + if (innerPressable) { + innerPressable.click(); + } + }; + return (
{children}