List Reordering Exercise

Let’s work on a reorderable list component where users can delete items. What should happen to their keyboard focus? Do we need to do anything for screen reader users?

For a solution approach, add React code to move focus to a persistent element near the deleted one.

For a bonus round: announce ${item} reordered type of messages with an ARIA Live Region when the list updates.

This exercise can be completed in this codebase, or on StackBlitz. You can find the completed example in /completed-components/exercise-4-reordering/.

Remotely-hosted version

Thank you to Flor Antara for the mouse drag & drop approach! https://dev.to/florantara/creating-a-drag-and-drop-list-with-react-hooks-4c0i (opens in a new tab)