Fix the focus trap in a modal dialog
Your task
An AI built a modal dialog that works well with a mouse. Keyboard users found that focus stayed on the page behind it, Tab wandered out of it, and Escape did nothing. Your team now writes the dialog's focus behavior down as a function and tests it.
An assistant wrote trap_modal_focus(focusable_ids, trigger_id, keys). It is in the editor. It has a bug. Find it and fix it.
Input and output:
focusable_ids: the ids of the focusable elements inside the dialog, in Tab order. Two elements can share an id. They are still different elements.trigger_id: the id of the element that opened the dialog.keys: the keys pressed after the dialog opens:"Tab","ShiftTab","Escape"or any other key.- Return where focus is right after the dialog opens, then after each key. The list has one more entry than
keys.
Rules the tests check:
- On open, focus goes to the first position in
focusable_ids. With no focusable elements, it goes to the dialog itself, written"dialog". Tabmoves focus to the next position infocusable_ids, and from the last position back to the first.ShiftTabmoves to the previous position, and from the first to the last. So focus never leaves the dialog.- With no focusable elements,
TabandShiftTabkeep focus on"dialog". - Any other key leaves focus where it is.
Escapecloses the dialog and returns focus totrigger_id. Once the dialog is closed, focus stays ontrigger_idfor every later key.
Examples
trap_modal_focus(focusable_ids: list[str], trigger_id: str, keys: list[str]) -> list[str]Example 1
Input
trap_modal_focus(["close", "save"], "openBtn", ["Tab", "Tab", "ShiftTab"])Output
["close", "save", "close", "save"]Example 2
Input
trap_modal_focus(["email", "submit", "close"], "trigger", ["Escape", "Tab"])Output
["email", "trigger", "trigger"]Example 3
Input
trap_modal_focus([], "openBtn", ["Tab", "Escape"])Output
["dialog", "dialog", "openBtn"]