Exploring the challenges in creating an accessible sortable list (drag-and-drop)

This post details the engineering challenges and solutions for creating an accessible one-dimensional drag-and-drop component. Key contributions include: overriding screen reader arrow key navigation using `role='application'` scoped to the drag-and-drop trigger and dynamically applied/removed; separating keyboard and mouse event handling by using a Primer IconButton for keyboard and an invisible overlay for mouse events to manage NVDA's simulated mouse events; implementing a 100ms debounce with `aria-live='assertive'` for rapid movement announcements to prevent lag and disorientation; providing an instructional dialog with a 'don't show again' option for keyboard users unfamiliar with the pattern; and introducing a 'move dialog' as an alternative interaction mode for voice control users in scrollable containers, which also proved beneficial for other users.