A sortable list: pointer drag plus a keyboard alternative
Keyboard: Space, ArrowDown, ArrowDown, Space moves Milk to position 3, and focus stays on its handle because items are keyed by name. Pointer: dragging Apples up three rows puts it first. Try both: drag a handle, or Tab to one and use Space and the arrows.
File uploads need a file input and a drop zone that validate type and size, instant previews through object URLs that are freed afterwards, a progress bar, cancel and retry; reorderable lists need pointer events for mouse, pen and touch plus a keyboard way to move items with spoken announcements.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a Remove button to each preview in the drop zone example, and make sure its object URL is freed.
Add Move up and Move down buttons to the sortable list as an extra non-drag alternative.
Explain it without notes
How do you show an instant preview of a chosen image, and what must you clean up?
How do you build an accessible drag-and-drop upload area?
How would you implement upload progress and cancel in React?
How do you make a sortable list accessible?
Preview
Console
Nothing logged yet.Expected console output
Keyboard: Bread, Eggs, Milk, Apples | focus on Reorder Milk
Announced: Milk dropped at position 3
Pointer: Apples, Bread, Eggs, Milk