22500 Phase 1: extract pure helpers from elements index

memory-bank/refactor-backlog.md

@@ -65,6 +65,59 @@ Last updated: 2026-03-12
     3. hash utility behavior
     4. locale rewrite mapping sanity checks
 
+## Priority 6 — Decompose `components/elements/index.js` monolith (phased)
+
+- **Problem:** `components/elements/index.js` has grown into a high-coupling UI monolith (~2700+ LOC) combining field primitives, validation/conditional logic, translation helpers, file-upload orchestration, and field-array behavior.
+- **Why it matters:** Very high regression surface for new appeal/my portal forms, slower change velocity, and poor testability/isolation.
+- **Target outcome:** `components/elements/index.js` reduced to a thin barrel export with responsibility split into focused modules.
+- **Context alignment:** Matches architecture direction in `context/architecture.md` (endpoint/component sprawl reduction, bounded slices) and file boundary guidance in `context/coding-conventions.md` (`pages` thin, reusable logic/components split by concern).
+- **Guardrail constraints:**
+    - Preserve public-service reliability for core flows (`search`, `case`, `myportal`, `newappeal`).
+    - No auth/session/security header behavior changes (out of scope).
+    - Maintain EN/CY parity for user-facing behavior.
+    - Keep accessibility behavior unchanged (labels, focus, keyboard flow, errors).
+
+### Priority 6 — Phase 1 (start here): extract pure helpers only
+
+- **Scope (Phase 1 only):**
+    - Move pure/helper logic from `components/elements/index.js` into focused helper modules under `components/elements/` (or `components/elements/helpers/`) without behavior change.
+    - Candidate helper extraction set:
+        - translation helpers (`FieldsTranslations`, picklist translation helper)
+        - file upload helper utilities (icon/doc type naming/pure format helpers)
+        - other deterministic pure functions used by field renderers
+    - Keep all field renderers/components in place for Phase 1.
+- **Non-goals (Phase 1):**
+    - No JSX component relocation yet.
+    - No upload flow logic rewrites.
+    - No validation rule behavior changes.
+    - No prop contract changes for existing consumers.
+
+- **Acceptance criteria (Phase 1):**
+    - `components/elements/index.js` imports extracted helpers from new helper modules and behavior remains equivalent.
+    - No route/API changes.
+    - Existing new appeal + myportal form journeys continue to function in EN and CY.
+    - Accessibility smoke unchanged for touched form controls (label association, keyboard reachability, inline error visibility).
+    - Lint passes for touched files.
+
+- **Validation matrix (minimum):**
+    1. `npm run lint`
+    2. Manual smoke:
+        - new appeal form step rendering + validation messages
+        - myportal representation/new appeal editing flow controls
+        - file upload field icon/name behavior unchanged
+    3. Locale parity checks (EN/CY) for touched user-facing labels/routes.
+    4. A11y smoke checks on touched fields (focus, labels, errors).
+
+- **Rollback plan (Phase 1):**
+    - Revert helper module extraction commit(s) to restore single-file implementation.
+    - No migration/data rollback required.
+
+- **Next phases (for tracking):**
+    - **Phase 2:** extract low-risk leaf field renderer components.
+    - **Phase 3:** extract `RenderFileUpload` and upload container.
+    - **Phase 4:** extract field-array/repeater components.
+    - **Phase 5:** finalize `components/elements/index.js` as barrel-only export.
+
 ## Sequencing recommendation
 
 1. Priorities 2 + 4 (security/integrity foundation)