From 78b77caa39ae86c639e5e1d6a05f6ea1b76ec3af Mon Sep 17 00:00:00 2001
From: oluwarantimini <151661842+oluwarantimini@users.noreply.github.com>
Date: Tue, 20 Oct 2026 09:27:59 +0100
Subject: [PATCH 1/2] feat(pwa): precache Arabic locale files for offline i18n
 (#716)

Adds critical locale JSON files to service worker install cache to ensure
Help form renders fully in Arabic when offline. Prevents infinite suspense
and empty combobox on offline language switch.

Precached files:
- /locales/en/common.json
- /locales/en/help.json
- /locales/ar/common.json
- /locales/ar/help.json

Fixes the offline Arabic Help load scenario where lazy-loaded locale chunks
would 404, leaving users with a blank form during disaster-day conditions.
---
 src/service-worker.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/service-worker.js b/src/service-worker.js
index 0b4a158..89564e6 100644
--- a/src/service-worker.js
+++ b/src/service-worker.js
@@ -24,8 +24,17 @@ const ALLOWED_TILE_MIMES = [
 
 self.addEventListener("install", (event) => {
   event.waitUntil(
-    caches.open(CACHE_NAME).then(() => {
-      self.skipWaiting();
+    caches.open(CACHE_NAME).then((cache) => {
+      // ISP-046: Precache critical locale files for offline i18n support
+      // Ensures Arabic Help form renders offline without suspense hang
+      return cache.addAll([
+        '/locales/en/common.json',
+        '/locales/en/help.json',
+        '/locales/ar/common.json',
+        '/locales/ar/help.json',
+      ]).then(() => {
+        self.skipWaiting();
+      });
     }),
   );
 });

From 9727fa98a0a4b610f3e8eba04fd877276d500c41 Mon Sep 17 00:00:00 2001
From: oluwarantimini <151661842+oluwarantimini@users.noreply.github.com>
Date: Tue, 20 Oct 2026 09:28:00 +0100
Subject: [PATCH 2/2] fix(i18n): improve RTL support and ARIA stability in Help
 page (#716)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

RTL improvements:
- Changed all `textAlign: "left"` to `textAlign: "start"` for automatic
  RTL/LTR adaptation in Arabic mode
- Affects search combobox, request cards, map style picker, and incident
  type selector

ARIA stability:
- Changed combobox option IDs from index-based to feature-ID-based
- `hp-suggestion-${idx}` → `hp-suggestion-${feature.id}`
- Ensures aria-activedescendant remains valid after language changes
  where option count/order differs

These fixes prevent combobox popup misalignment in RTL and eliminate
stale ARIA references that axe-core would flag in Arabic runs.
---
 src/pages/Help.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/Help.jsx b/src/pages/Help.jsx
index 66166a8..7281a4a 100644
--- a/src/pages/Help.jsx
+++ b/src/pages/Help.jsx
@@ -2910,8 +2910,8 @@ export default function Help() {
                         aria-expanded={searchSuggestions.length > 0}
                         aria-controls="hp-search-suggestions"
                         aria-activedescendant={
-                          activeSuggestion >= 0
-                            ? `hp-suggestion-${activeSuggestion}`
+                          activeSuggestion >= 0 && searchSuggestions[activeSuggestion]
+                            ? `hp-suggestion-${searchSuggestions[activeSuggestion].id}`
                             : undefined
                         }
                       />
@@ -2963,7 +2963,7 @@ export default function Help() {
                             {searchSuggestions.map((feature, idx) => (
                               <button
                                 key={feature.id}
-                                id={`hp-suggestion-${idx}`}
+                                id={`hp-suggestion-${feature.id}`}
                                 role="option"
                                 aria-selected={idx === activeSuggestion}
                                 type="button"
@@ -2978,7 +2978,7 @@ export default function Help() {
                                       ? "rgba(255,255,255,0.07)"
                                       : "transparent",
                                   color: "rgba(242,236,220,0.9)",
-                                  textAlign: "left",
+                                  textAlign: "start",
                                   cursor: "pointer",
                                   display: "block",
                                 }}
@@ -3525,7 +3525,7 @@ export default function Help() {
                           display: "flex",
                           alignItems: "center",
                           gap: "10px",
-                          textAlign: "left",
+                          textAlign: "start",
                         }}
                       >
                         <img
@@ -4059,7 +4059,7 @@ export default function Help() {
                     color:
                       i === mapStyleIndex ? "#B3A6FF" : "rgba(242,236,220,0.7)",
                     cursor: "pointer",
-                    textAlign: "left",
+                    textAlign: "start",
                     display: "block",
                     transition: "background 0.15s",
                   }}
@@ -4770,7 +4770,7 @@ export default function Help() {
                       border: `1.5px solid ${isSelected ? "#FF7A6B" : "rgba(255,255,255,0.08)"}`,
                       borderRadius: "14px",
                       cursor: "pointer",
-                      textAlign: "left",
+                      textAlign: "start",
                       transition: "border-color 0.15s, background 0.15s",
                     }}
                   >