fix: accessibility issues for builder's design

web/src/composables/useKeyboardReorder.ts

@@ -98,6 +98,59 @@ export function useKeyboardReorder<T>(options: KeyboardReorderOptions<T>) {
 		focusHandle(index)
 	}
 
+	let settling = false
+
+	function rowIndexAt(y: number) {
+		const rows = Array.from(options.root()?.children ?? [])
+		if (!rows.length) {
+			return null
+		}
+		const found = rows.findIndex((row) => y < row.getBoundingClientRect().bottom)
+		return found === -1 ? rows.length - 1 : found
+	}
+
+	async function onPointermove(event: PointerEvent) {
+		const current = grabbed.value
+		const target = rowIndexAt(event.clientY)
+		if (settling || current === null || target === null || target === current) {
+			return
+		}
+		settling = true
+		move(target - current)
+		await nextTick()
+		settling = false
+	}
+
+	function stopPointer() {
+		settling = false
+		document.body.style.userSelect = ''
+		window.removeEventListener('pointermove', onPointermove)
+		window.removeEventListener('pointerup', onPointerup)
+		window.removeEventListener('pointercancel', onPointercancel)
+	}
+
+	function onPointerup() {
+		stopPointer()
+		drop()
+	}
+
+	function onPointercancel() {
+		stopPointer()
+		cancel()
+	}
+
+	function onPointerdown(event: PointerEvent, index: number) {
+		if (grabbed.value !== null || (event.pointerType === 'mouse' && event.button !== 0)) {
+			return
+		}
+		event.preventDefault()
+		grab(index)
+		document.body.style.userSelect = 'none'
+		window.addEventListener('pointermove', onPointermove)
+		window.addEventListener('pointerup', onPointerup)
+		window.addEventListener('pointercancel', onPointercancel)
+	}
+
 	function onKeydown(event: KeyboardEvent, index: number) {
 		if (grabbed.value === null) {
 			if (event.key === ' ' || event.key === 'Enter') {
@@ -121,5 +174,5 @@ export function useKeyboardReorder<T>(options: KeyboardReorderOptions<T>) {
 		}
 	}
 
-	return { shown, grabbed, active, announcement, onKeydown }
+	return { shown, grabbed, active, announcement, onKeydown, onPointerdown }
 }