-
Notifications
You must be signed in to change notification settings - Fork 0
Tech: Focus controller for deterministic row navigation (Editor Mode) #66
Copy link
Copy link
Closed
Labels
accessibilityAccessibility (a11y), keyboard navigation, screen readersAccessibility (a11y), keyboard navigation, screen readerseditor-modeInventory editor mode / inline editingInventory editor mode / inline editingenhancementNew feature or requestNew feature or requestfrontendFrontend app and dashboardFrontend app and dashboardinventoryInventory system featuresInventory system featureskeyboardKeyboard-first interactionsKeyboard-first interactionstech-storyTechnical implementation storyTechnical implementation storyui-uxUser interface and experienceUser interface and experience
Description
Epic: #58
Problem
React re-renders, sorting, grouping, and pagination can cause focus loss or jumps. Editor Mode requires deterministic, testable focus movement to mimic spreadsheet workflows.
Acceptance Criteria
- Centralized focus controller for Editor Mode can:
- Move focus Location → Quantity → Save → next row Location.
- Target a specific row+field by stable row key.
- Handle pagination boundary (last row save → first row next page) when possible without jank.
- No focus jank when:
- Rows re-render due to state/optimistic updates.
- Sorting/grouping changes order (document expected behavior when order changes mid-edit).
- Does not break screen reader or tab order; remains accessible.
Technical Notes
- Provide an imperative API (e.g., registry mapping row keys to field refs) to request focus; keep registration/unregistration stable across renders.
- Compute next target from the rendered order used by grouping/sorting/pagination; avoid stale indices.
- Defer focus until after state updates where necessary (e.g.,
requestAnimationFrame/microtask) to prevent focusing unmounted elements. - Integrate with the save flow (Inventory Editor Mode: Per-row save without reload + saved indicator #63) to avoid focus loss during in-flight saves/spinners.
- Expose hooks/utilities for tests to assert current focus target.
Definition of Done
- Focus controller implemented and used by Editor Mode flows; ad-hoc ref juggling removed where possible.
- Focus transitions are deterministic in personal + org views, including pagination edge cases or documented fallback.
- A11y preserved (tab order and SR navigation still work).
- Tests updated/passing to assert focus behavior; lint/typecheck/CI clean.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
accessibilityAccessibility (a11y), keyboard navigation, screen readersAccessibility (a11y), keyboard navigation, screen readerseditor-modeInventory editor mode / inline editingInventory editor mode / inline editingenhancementNew feature or requestNew feature or requestfrontendFrontend app and dashboardFrontend app and dashboardinventoryInventory system featuresInventory system featureskeyboardKeyboard-first interactionsKeyboard-first interactionstech-storyTechnical implementation storyTechnical implementation storyui-uxUser interface and experienceUser interface and experience