[$250][Accessibility][Tracking] Implement Keyboard Reordering

[rushatgabhane]

Overview

This issue tracks the need for keyboard-accessible reordering functionality.

Context

Part of the accessibility improvement effort tracked in https://github.com/Expensify/Expensify/issues/575078

Issues to Fix

• Screen Reader: Track Distance: Announced instructions to reorder map start/stop points do not work #76834 - Reorder instructions don't work (implement keyboard drag-drop or add up/down buttons)

Instructions

Suggested Fix: Implement keyboard-accessible reordering

Note: Discuss on Slack if you are unsure whether a sub-issue should be fixed or if you are unsure about the right fix / expected result. Ideally, create a single PR that will fix all the issues listed to minimize review time (more PRs only if necessary).

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022009703320250133955
• Upwork Job ID: 2009703320250133955
• Last Price Increase: 2026-03-12
• Automatic offers:
• MobileMage | Contributor | 110090770

Issue Owner

Current Issue Owner: @eVoloshchak

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022009703320250133955

[melvin-bot]

Current assignee @mallenexpensify is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[melvin-bot]

⚠️ This issue has had its price increased by 4x or more. Please review the issue and ensure the price is correct.

[melvin-bot]

Upwork job price has been updated to $250

[MobileMage]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Screen reader users are announced sorting instructions for reordering waypoints in Track Distance, but the keyboard shortcuts do not actually work. This is a WCAG 3.3.2 violation as users are given misleading instructions about functionality that doesn't exist.

What is the root cause of that problem?

The DraggableList component at src/components/DraggableList/index.tsx only configures a PointerSensor (lines 72-78), which handles mouse and touch events. No KeyboardSensor is configured, so keyboard-based drag-and-drop is not enabled even though the @dnd-kit library fully supports it.

The useSortable hook in SortableItem.tsx already spreads the necessary attributes (which include keyboard accessibility attributes like tabIndex, role, and aria-* props), but without the KeyboardSensor being registered, these keyboard events are never processed.

What changes do you think we should make in order to solve the problem?

1. Import KeyboardSensor from @dnd-kit/core in DraggableList/index.tsx
2. Import sortableKeyboardCoordinates from @dnd-kit/sortable (provides standard arrow key navigation for sortable lists)
3. Add a KeyboardSensor to the existing sensors array with sortableKeyboardCoordinates as the coordinate getter

This enables the standard @dnd-kit keyboard interaction pattern: Space/Enter to pick up an item, arrow keys to move it, Space/Enter to drop, Escape to cancel.

What alternative solutions did you explore? (Optional)

N/A