Reorder Accessibility

Dragging accelerates reorder but must never be the only way to change order.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Native path

Enhanced path

Reorder Accessibility · the fallback remains complete

Dragging accelerates reorder but must never be the only way to change order.

Provide labelled handles, arrow/button movement, stable IDs, and announcements of the resulting position.

Do not rely on hover, color, or a pointer-only ghost; preserve focus and avoid rerendering the whole collection unnecessarily.

Source: packages/skills/patterns/reorder-accessibility.md