feat: add keyboard accessibility to drag and drop components

[Babigdk]

Summary

This PR adds keyboard accessibility support to the drag-and-drop components built with react-dnd.

Since the project does not use dnd-kit, accessibility was implemented by layering keyboard interactions on top of the existing drag system instead of introducing a new library.

Key improvements:

• Enabled keyboard-based reordering using Arrow Up / Arrow Down
• Added drag mode toggle using Space / Enter
• Added Escape to cancel keyboard drag
• Made items focusable with tabIndex
• Added ARIA attributes (role, aria-grabbed)
• Introduced visible focus indicators
• Added an accessible drag handle button

These changes improve usability for keyboard-only users while preserving existing mouse drag behavior.

---

Related Issue

Closes #192

---

Type of change

• Feature
• Bug fix
• Chore / Refactor
• Docs

---

Screenshots / Recording (if UI)

Optional – recommend adding a short recording showing:

• Tabbing into items
• Pressing Space to activate drag mode
• Using Arrow keys to reorder

---

Testing

Tested manually with keyboard interactions:

• Tab navigation focuses each draggable item
• Space / Enter toggles drag mode
• Arrow keys reorder items correctly
• Escape exits drag mode
• Mouse drag-and-drop remains fully functional

Commands run:

• npm run type-check
• npm run lint
• npm run test
• npm run build

---

Quality gate checklist

• CI checks pass (Frontend CI)
• At least 1–2 approvals (per branch protection rules)
• Branch is up-to-date with the base branch
• All conversations resolved
• PR description includes Closes Drag and Drop Accessibility #192

[drips-wave]

@Babigdk Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits