[oluwarantimini]

Summary

Fixes critical PWA offline internationalization issues and RTL layout problems that prevented the Help form from rendering correctly in Arabic during disaster scenarios.

Key fixes:

• ✅ Precache Arabic locale files for offline availability
• ✅ Convert physical CSS properties to logical for RTL support
• ✅ Stabilize combobox ARIA IDs across language switches

Changes

1. Service Worker — Offline Locale Precaching

Problem: Arabic locale JSON files were only runtime-cached, causing 404s and infinite suspense when switching to Arabic offline.

Fix: Added critical locale files to service worker install cache:

cache.addAll([
  '/locales/en/common.json',
  '/locales/en/help.json',
  '/locales/ar/common.json',
  '/locales/ar/help.json',
])

Impact: Help form now renders fully in Arabic when offline, preventing blank forms during disaster-day scenarios.

2. Help Page — RTL Layout Support

Problem: Inline styles used textAlign: "left" which doesn't adapt to RTL languages, causing misaligned text in Arabic mode.

Fix: Changed all textAlign: "left" to textAlign: "start" in:

• Search combobox suggestions
• Request cards
• Map style picker
• Incident type selector

Impact: Text properly aligns in both LTR (English) and RTL (Arabic) modes.

3. Help Page — ARIA Stability

Problem: Combobox option IDs were index-based (hp-suggestion-${idx}), becoming invalid after language changes when option count/order differs between locales.

Fix: Changed to feature-ID-based IDs:

- id={`hp-suggestion-${idx}`}
+ id={`hp-suggestion-${feature.id}`}

- aria-activedescendant={`hp-suggestion-${activeSuggestion}`}
+ aria-activedescendant={`hp-suggestion-${searchSuggestions[activeSuggestion].id}`}

Impact: aria-activedescendant remains valid after language switches, fixing axe-core violations in Arabic runs.

Testing Recommendations

1. Offline Arabic test:

   • Load /help online in English
   • Go offline (DevTools Network → Offline)
   • Switch to Arabic via language switcher
   • ✅ Verify combobox renders with options, no blank screen

2. RTL layout test:

   • Switch to Arabic
   • ✅ Verify text aligns to the right in search suggestions, cards, and selectors
   • ✅ Verify no horizontal overflow or misalignment

3. ARIA stability test:

   • Use keyboard navigation (↓/↑) in combobox
   • Switch language mid-navigation
   • Run axe DevTools in Arabic
   • ✅ Verify no aria-activedescendant violations

Scope

This PR addresses the most critical offline and RTL issues identified in the spike. It does NOT include:

• Full CSS logical properties migration (requires broader Help.module.css refactor)
• Focus trap RTL fixes (requires useFocusTrap.js changes)
• Bundle budget enforcement (requires Vite config changes)
• Comprehensive axe-core RTL test suite (requires test infrastructure setup)

These remain as future enhancements per the original 24h spike scope.

Closes #716
Closes #710
Closes #714
Closes #715

[drips-wave]

@oluwarantimini Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits