#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/modal-system-design/focus-management

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░███████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/modal-system-design/focus-management

Repovive

Focus Management - Modal System Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Focus Management

Trapping and restoring focus

Focus management determines whether keyboard users can operate your modal.

Requirements:

$1.$ Move focus into modal when opened

$2.$ Trap focus inside modal (Tab cycles within)

$3.$ Return focus to trigger when closed

Implementation:

useEffect(() => {
  const previousFocus = document.activeElement;
  modalRef.current.focus(); // Requires tabIndex="-1" on modal

  return () => previousFocus?.focus();
}, []);

Focus trap: On Tab at last element, move to first. On Shift+Tab at first, move to last.

Libraries: focus-trap-react handles edge cases.