WCAG 2.1 AA Colour Contrast Fixer & Keyboard Trap Patterns in React for Indian E‑commerce

Indian e-commerce skinned for festivals, IPL tie-ins, and high-contrast sale banners routinely ships WCAG contrast failures. Teams using React can fix palettes systematically while avoiding keyboard traps in mega-menus and EMI modals. Below is a pragmatic recipe drawn from audits of Indian marketplaces and US retail hybrids.

Colour tokens: design once, test twice

Centralise brand colours in CSS variables or a design token pipeline. For each token pair (text on background, icon on pill), compute contrast at build time using tooling such as APCA or WCAG 2.x contrast APIs. When marketing injects gradients, provide a solid fallback meeting 4.5:1 for body copy.

Keyboard traps in React modals

• Trap focus inside OTP / EMI dialogs with focus-guard hooks
• Restore focus to invoking control on close (use refs, not body blur hacks)
• Escape closes only when onClose is wired; announce via aria-modal + role="dialog"
• Avoid nested portals that break tab order when PayU / Razorpay embeds load

Mega-menu flyouts on sale days

Use roving tabIndexpatterns on horizontal category strips. Ensure arrow keys traverse predictable columns; disable hover-only previews. For sticky “Deals” ribbons, mirror the visual countdown with text that screen readers can access without hover.

React implementation sketch

// Focus trap outline: run on mount/unmount with cleanup
useFocusTrap(panelRef, isOpen);

<button
  type="button"
  className="text-base font-semibold focus-visible:outline focus-visible:outline-2"
  aria-expanded={open}
  aria-controls="mega-panel"
>
  Electronics
</button>

Quality gates

Pair Lighthouse contrast audits with manual checks on Hindi strings, which may render taller and collide with fixed-height pills. Cross-link detailed ARIA guidance in ARIA + alt text for Indian retail and benchmark against top e-commerce audit findings.