Focus When Dialog Opens — Moving Focus to the Correct Element

In this tutorial, you will learn about Focus When Dialog Opens. We cover key concepts, practical examples, and best practices to help you master this topic.

When a dialog opens, focus must move to the first focusable element inside the dialog, typically the first interactive element or the primary action button.

In this tutorial, you'll learn Focus Management for dialog opening.

What You'll Learn

By the end of this lesson, you'll understand where to move focus when a dialog opens, which element to choose, and how to handle dialogs with no focusable elements.

Why It Matters

When a dialog opens and focus stays on the background element, keyboard users must search for the dialog content. They may not know a dialog opened at all.

Real-World Use

Doda Browser's settings dialog focuses the first focusable element when opened, typically the first input field.

Dialog Open Focus Flow

flowchart TD
  A[Dialog opens] --> B{Has focusable elements?}
  B -->|Yes| C[Find first focusable element]
  B -->|No| D[Focus the dialog container]
  C --> E{Is focusable element in view?}
  E -->|Yes| F[Focus it]
  E -->|No| G[Focus dialog container instead]
  D --> H[Add tabindex='-1' to container]
  F --> I[Show focus indicator]
  H --> I

Choosing the Focus Target

function openDialog(dialog) {
  dialog.hidden = false;

  // Find focusable elements
  const focusable = dialog.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );

  if (focusable.length > 0) {
    // Focus the first focusable element
    focusable[0].focus();
  } else {
    // Focus the dialog itself
    dialog.setAttribute('tabindex', '-1');
    dialog.focus();
  }

  trapFocus(dialog);
}

Best Practices by Dialog Type

Confirmation Dialogs

// Focus the primary action (usually affirmative)
function openConfirmDialog(dialog) {
  dialog.hidden = false;
  dialog.querySelector('.primary-action').focus();
}

Form Dialogs

// Focus the first input field
function openFormDialog(dialog) {
  dialog.hidden = false;
  dialog.querySelector('input, textarea, select').focus();
}

Alert Dialogs

// Focus the dialog container if it has a message
function openAlertDialog(dialog) {
  dialog.hidden = false;
  dialog.setAttribute('tabindex', '-1');
  dialog.focus();
}

Common Mistakes

• Not moving focus at all: User remains focused on the trigger, unaware of the dialog.
• Focusing a non-visible element: If the dialog has animations, wait for them to complete.
• Focusing the close button: Usually the first interactive item should not be the close button.
• Auto-focusing a text input when the user may want to dismiss: Confirmation dialogs should focus a button.
• Not handling dialogs without focusable elements: The container must be focusable.

Practice and Challenge

1. Where should focus go when a dialog opens? To the first focusable element inside the dialog.

2. What if the dialog has no focusable elements? Focus the dialog container with tabindex="-1".

3. What should be focused in a confirmation dialog? The primary action button.

4. What should be focused in a form dialog? The first input field.

5. Challenge: Implement a dialog that focuses the correct element based on its type (form, confirmation, alert).

FAQ

Mini Project

Build a dialog component that handles three scenarios: confirmation (focus primary button), form (focus first input), and message (focus container with tabindex="-1").

What's Next

Continue to Focus When Dialog Closes to learn about returning focus after dialog dismissal.