Focus Manipulation

title: "Focus Manipulation — Managing Focus During Drag and Drop" description: "Learn how to manage keyboard focus during drag-and-drop and reorder operations to keep users oriented and in control." weight: 5 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, drag-drop]

Focus management during drag and drop ensures users stay oriented: focus should follow the moved item and return to a logical position after the operation.

## What You'll Learn

How to manage focus during item reordering, drag start, drag end, and cancel operations.

## Why It Matters

Poor focus management during drag-drop leaves users lost. They do not know where the item went or where to continue interacting.

## Real-World Use

A user Moves Down item 3 in a list. Focus stays on item 3 at its new position 4. The user can continue moving it or move to the next task.

## Focus After Move

```javascript
function moveItem(listItem, direction) {
  const list = listItem.parentElement;
  const items = Array.from(list.children);
  const currentIndex = items.indexOf(listItem);
  const newIndex = currentIndex + direction;

  if (newIndex < 0 || newIndex >= items.length) return;

  // Move the DOM element
  if (direction < 0) {
    list.insertBefore(listItem, items[newIndex]);
  } else {
    list.insertBefore(listItem, items[newIndex + 1]);
  }

  // Focus follows the item
  listItem.focus();

  // Announce the new position
  const total = items.length;
  announceMove(listItem, newIndex + 1, total);
}

function announceMove(item, position, total) {
  const liveRegion = document.getElementById('drag-status');
  const label = item.getAttribute('aria-label') || item.textContent.trim();
  liveRegion.textContent = `${label} moved to position ${position} of ${total}`;
}

Drag Cancel Focus

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape' && isDragging) {
    cancelDrag();
    // Focus returns to the drag handle
    dragHandle.focus();
    announceCancel();
  }
});

Common Mistakes

1. Focus not following the moved item

After moving, the focused element should be the item at its new location.

2. Focus lost after drag cancel

Cancel (Escape) should return focus to the drag origin.

3. No focus indicator on drag handles

Draggable items need visible focus indicators on their drag handles.

4. Focus jumps to unexpected position

Always maintain focus on the moved element. Do not jump to the top or bottom.

5. No announcement on focus change

When focus moves to a new position, announce the position to screen readers.

Practice Questions

1. Where should focus be after moving an item? On the moved item at its new position.

2. Where should focus go when a drag is cancelled? Back to the drag handle or the item that was being dragged.

3. How do you announce the new position to screen readers? Update an aria-live region with the item name and its new position.

Challenge: Create a reorderable list where focus follows the moved item and Escape cancels with focus returning to the origin.

FAQ

Mini Project

Build a reorderable list with proper focus management: focus follows move, Escape cancels, and positions are announced.

What's Next

Learn about ARIA Grabbed and how to communicate drag state to screen readers.