Frontend: Modal with Focus Trap (Tab Order Logic)

MediumTypeScript

Description

> This problem is paper-only - see explanation for the canonical React solution. A modal with proper a11y must **trap focus** so Tab cycles through interactive children without escaping to the page behind. The auto-grader validates the tab-order math. **For the auto-grader:** implement `nextFocusIndex(currentIndex, focusableCount, shiftKey)` that returns the index Tab/Shift+Tab should move focus to. Tab forward wraps from last to first; Shift+Tab backward wraps from first to last.

Example 1

Input: currentIndex = 0, focusableCount = 3, shiftKey = false

Output: 1

Example 2

Input: currentIndex = 2, focusableCount = 3, shiftKey = false

Output: 0

Explanation: Wrap forward.

Example 3

Input: currentIndex = 0, focusableCount = 3, shiftKey = true

Output: 2

Explanation: Wrap backward.

Constraints

- focusableCount >= 1 - 0 <= currentIndex < focusableCount

Loading editor...