Fix drag gesture on keyboard-accessible elements with drag prop

Previously, the drag gesture was blocked on any keyboard-accessible element
(button, input, select, textarea, a) regardless of whether the element itself
had the drag prop. This meant motion.button with drag prop couldn't be dragged.

The fix only blocks drag when clicking on a keyboard-accessible *child* element
of the draggable element. If the draggable element itself is keyboard-accessible,
dragging should work when clicking directly on it.

Fixes #3473

Author: claude

packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts

@@ -642,11 +642,18 @@ export class VisualElementDragControls {
             "pointerdown",
             (event) => {
                 const { drag, dragListener = true } = this.getProps()
-                if (
-                    drag &&
-                    dragListener &&
-                    !isElementKeyboardAccessible(event.target as Element)
-                ) {
+                const target = event.target as Element
+
+                /**
+                 * Only block drag if clicking on a keyboard-accessible child element.
+                 * If the draggable element itself is keyboard-accessible (e.g., motion.button),
+                 * dragging should still work when clicking directly on it.
+                 */
+                const isClickingKeyboardAccessibleChild =
+                    target !== element &&
+                    isElementKeyboardAccessible(target)
+
+                if (drag && dragListener && !isClickingKeyboardAccessibleChild) {
                     this.start(event)
                 }
             }

packages/framer-motion/src/gestures/drag/__tests__/index.test.tsx

@@ -944,3 +944,146 @@ describe("dragging", () => {
         )
     })
 })
+
+describe("keyboard accessible elements", () => {
+    test("drag gesture starts on a motion.button with drag prop", async () => {
+        const onDragStart = jest.fn()
+        const x = motionValue(0)
+        const Component = () => (
+            <MockDrag>
+                <motion.button
+                    data-testid="draggable-button"
+                    drag
+                    onDragStart={onDragStart}
+                    style={{ x }}
+                />
+            </MockDrag>
+        )
+
+        const { getByTestId, rerender } = render(<Component />)
+        rerender(<Component />)
+
+        const pointer = await drag(getByTestId("draggable-button")).to(100, 100)
+        pointer.end()
+
+        await nextFrame()
+
+        expect(onDragStart).toBeCalledTimes(1)
+        expect(x.get()).toBe(100)
+    })
+
+    test("drag gesture does not start when clicking a child button", async () => {
+        const onDragStart = jest.fn()
+        const x = motionValue(0)
+        const Component = () => (
+            <MockDrag>
+                <motion.div
+                    data-testid="draggable"
+                    drag
+                    onDragStart={onDragStart}
+                    style={{ x }}
+                >
+                    <button data-testid="child-button">Click me</button>
+                </motion.div>
+            </MockDrag>
+        )
+
+        const { getByTestId, rerender } = render(<Component />)
+        rerender(<Component />)
+
+        const pointer = await drag(
+            getByTestId("draggable"),
+            getByTestId("child-button")
+        ).to(100, 100)
+        pointer.end()
+
+        await nextFrame()
+
+        expect(onDragStart).toBeCalledTimes(0)
+        expect(x.get()).toBe(0)
+    })
+
+    test("drag gesture starts on a motion.input with drag prop", async () => {
+        const onDragStart = jest.fn()
+        const x = motionValue(0)
+        const Component = () => (
+            <MockDrag>
+                <motion.input
+                    data-testid="draggable-input"
+                    drag
+                    onDragStart={onDragStart}
+                    style={{ x }}
+                />
+            </MockDrag>
+        )
+
+        const { getByTestId, rerender } = render(<Component />)
+        rerender(<Component />)
+
+        const pointer = await drag(getByTestId("draggable-input")).to(100, 100)
+        pointer.end()
+
+        await nextFrame()
+
+        expect(onDragStart).toBeCalledTimes(1)
+        expect(x.get()).toBe(100)
+    })
+
+    test("drag gesture starts on a motion.a with drag prop", async () => {
+        const onDragStart = jest.fn()
+        const x = motionValue(0)
+        const Component = () => (
+            <MockDrag>
+                <motion.a
+                    data-testid="draggable-link"
+                    drag
+                    onDragStart={onDragStart}
+                    style={{ x }}
+                    href="#"
+                />
+            </MockDrag>
+        )
+
+        const { getByTestId, rerender } = render(<Component />)
+        rerender(<Component />)
+
+        const pointer = await drag(getByTestId("draggable-link")).to(100, 100)
+        pointer.end()
+
+        await nextFrame()
+
+        expect(onDragStart).toBeCalledTimes(1)
+        expect(x.get()).toBe(100)
+    })
+
+    test("drag gesture does not start when clicking a child input", async () => {
+        const onDragStart = jest.fn()
+        const x = motionValue(0)
+        const Component = () => (
+            <MockDrag>
+                <motion.div
+                    data-testid="draggable"
+                    drag
+                    onDragStart={onDragStart}
+                    style={{ x }}
+                >
+                    <input data-testid="child-input" />
+                </motion.div>
+            </MockDrag>
+        )
+
+        const { getByTestId, rerender } = render(<Component />)
+        rerender(<Component />)
+
+        const pointer = await drag(
+            getByTestId("draggable"),
+            getByTestId("child-input")
+        ).to(100, 100)
+        pointer.end()
+
+        await nextFrame()
+
+        expect(onDragStart).toBeCalledTimes(0)
+        expect(x.get()).toBe(0)
+    })
+})