Focus Project — Build an Accessible Dialog With Full Focus Management

<button id="settings-trigger" aria-haspopup="dialog">
  Open Settings
</button>

<div
  id="settings-dialog"
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  hidden
  class="dialog"
>
  <div class="dialog-overlay"></div>
  <div class="dialog-content">
    <h2 id="dialog-title">Settings</h2>
    <label>
      Username
      <input type="text" id="username" />
    </label>
    <label>
      Email
      <input type="email" id="email" />
    </label>
    <div class="dialog-actions">
      <button id="save-btn" class="primary">Save</button>
      <button id="close-btn">Cancel</button>
    </div>
  </div>
</div>

class AccessibleDialog {
  constructor(dialogElement) {
    this.dialog = dialogElement;
    this.trigger = document.querySelector('[aria-haspopup="dialog"]');
    this.lastFocused = null;

    this.dialog.addEventListener('keydown', (e) => this.handleKeydown(e));
    this.dialog.querySelector('.dialog-overlay').addEventListener('click', () => this.close());
    this.dialog.querySelector('#close-btn').addEventListener('click', () => this.close());
    this.dialog.querySelector('#save-btn').addEventListener('click', () => this.save());
    this.trigger.addEventListener('click', () => this.open());

    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && !this.dialog.hidden) this.close();
    });
  }

  open() {
    this.lastFocused = document.activeElement;
    this.dialog.hidden = false;
    document.getElementById('page-content').inert = true;

    const firstFocusable = this.dialog.querySelector(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    if (firstFocusable) {
      firstFocusable.focus();
    }
  }

  close() {
    this.dialog.hidden = true;
    document.getElementById('page-content').inert = false;

    if (this.lastFocused && document.contains(this.lastFocused)) {
      this.lastFocused.focus();
    }
  }

  save() {
    const username = this.dialog.querySelector('#username').value;
    const email = this.dialog.querySelector('#email').value;
    console.log('Saved:', { username, email });
    this.close();
  }

  handleKeydown(event) {
    if (event.key !== 'Tab') return;

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

    if (focusable.length === 0) return;

    const first = focusable[0];
    const last = focusable[focusable.length - 1];

    if (event.shiftKey && document.activeElement === first) {
      event.preventDefault();
      last.focus();
    } else if (!event.shiftKey && document.activeElement === last) {
      event.preventDefault();
      first.focus();
    }
  }
}

new AccessibleDialog(document.getElementById('settings-dialog'));

.dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.dialog-content {
  position: relative;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  max-width: 480px;
  width: 90%;
}

.dialog[hidden] {
  display: none;
}