Adding a Global Keyboard Shortcut Before Context Checks

TLDR

Registering global state toggles inside context guards (like isTableContext()) prevents keyboard shortcuts from firing when focus sits outside the primary table viewport. Placing global shortcuts before context checks ensures shortcuts like Alt+D work consistently regardless of focus location.

Shortcut Registration Strategy	Evaluation Placement	Behaviors Outside Table Focus	User Accessibility
Inside Context Guard	After isTableContext() check	Fails silently (Shortcuts ignored)	Broken (Requires prior cell click)
Global Pre-Guard Check	Before isTableContext() check	Toggles drag mode everywhere	100% Accessible anywhere

---

Why misplaced context guards silence keyboard shortcuts

We wanted to give users a fast keyboard shortcut (Alt+D) to toggle drag-and-drop cell reordering across the table. When drag mode is active, dragging moves entire rows and columns. When disabled, dragging selects cell ranges.

The initial implementation placed the shortcut listener behind a focus check:

document.addEventListener('keydown', (e) => {
    // Context check ran first
    if (!isTableContext()) return;
if (e.altKey && e.key === 'd') {         toggleDragMode();     } });

Because isTableContext() verifies that keyboard focus sits inside an active table cell, pressing Alt+D while focused on the toolbar, modal dialogs, or sidebar controls triggered an early return. The event was silently ignored, forcing users to click inside a cell before using the keyboard toggle.

---

Evaluating global vs context-specific event routing

To fix this, we separated global modal toggles from contextual editing commands. Global shortcuts now execute before any focus validation runs:

document.addEventListener('keydown', (e) => {
    // 1. Global state toggles fire from any focus state
    if (e.altKey && e.key === 'd') {
        e.preventDefault();
        toggleDragMode();
        return;
    }
// 2. Context-specific commands follow the focus check     if (!isTableContext()) return;
if (e.key === 'Delete') deleteSelectedCells();     if (e.ctrlKey && e.key === 'c') copySelected(); });

Calling e.preventDefault() prevents native browser shortcut collisions, while placing the toggle at the top of the event listener ensures users can switch modes from anywhere on the page.

Rule of thumb: Place application-wide state toggles at the top of keydown listeners before contextual focus guards.