Skip to content

Enhance modals with focus trap, ESC close, and ARIA attributes #507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Baskarayelu merged 1 commit into from
Jun 18, 2026
+316 −63
Merged

Enhance modals with focus trap, ESC close, and ARIA attributes #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 45 additions & 6 deletions components/Dashboard/EmergencyTransferModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useRef } from "react";
import {
X,
Zap,
Expand All @@ -9,6 +9,7 @@ import {
Check,
DollarSign,
} from "lucide-react";
import { useFocusTrap } from "../../src/lib/hooks/useFocusTrap";

const EmergencyTransferModal = ({
isOpen,
Expand All @@ -20,14 +21,31 @@ const EmergencyTransferModal = ({
const [speed, setSpeed] = useState<"emergency" | "regular">("emergency");
const [amount, setAmount] = useState<number>(0);
const [agreed, setAgreed] = useState<boolean>(false);
const modalRef = useRef<HTMLDivElement>(null);
const initialFocusRef = useRef<HTMLInputElement>(null);

const priorityFee = speed === "emergency" ? 2.0 : 0.0;
const total = amount + priorityFee;

// Focus trap hook
useFocusTrap({
isActive: isOpen,
onEscape: onClose,
onOverlayClick: onClose,
restoreFocusOnClose: true,
initialFocusRef,
});

if (!isOpen) return null;

return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-md p-4 sm:p-6">
<div
ref={modalRef}
className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-md p-4 sm:p-6"
role="dialog"
aria-modal="true"
aria-labelledby="emergency-transfer-title"
>
<div className="w-full max-w-3xl rounded-2xl sm:rounded-[32px] border border-zinc-800 bg-bg3 p-5 sm:p-8 shadow-2xl max-h-[90vh] overflow-y-auto scrollbar-hide">
<div className="flex items-start justify-between mb-6 sm:mb-8">
<div className="flex gap-3 sm:gap-4">
Expand All @@ -36,7 +54,10 @@ const EmergencyTransferModal = ({
</div>
<div>
<div className="flex flex-wrap items-center gap-2 solid border-[#DC262666]">
<h2 className="text-lg sm:text-2xl font-bold text-white tracking-tight">
<h2
id="emergency-transfer-title"
className="text-lg sm:text-2xl font-bold text-white tracking-tight"
>
Emergency Transfer
</h2>
<span className="rounded-full bg-red-600/10 px-2.5 py-0.5 text-[10px] font-black text-red-500 border border-red-500/20 uppercase whitespace-nowrap">
Expand All @@ -51,11 +72,13 @@ const EmergencyTransferModal = ({
<button
onClick={onClose}
className="rounded-full bg-zinc-900 p-2 text-zinc-500 hover:text-white transition-all shrink-0"
aria-label="Close emergency transfer modal"
>
<X size={20} />
</button>
</div>

{/* Rest of the modal content - same as before */}
<div className="mb-6 rounded-2xl border border-red-500/30 bg-red-500/5 p-4">
<div className="flex gap-3">
<AlertCircle size={20} className="shrink-0 text-red-500" />
Expand All @@ -75,35 +98,48 @@ const EmergencyTransferModal = ({

<div className="space-y-5">
<div className="group">
<label className="flex items-center gap-2 text-sm font-semibold text-zinc-400 mb-2 group-focus-within:text-white">
<label
htmlFor="recipient-name"
className="flex items-center gap-2 text-sm font-semibold text-zinc-400 mb-2 group-focus-within:text-white"
>
<Users size={16} className="text-red-500" />
Recipient Name
</label>
<input
id="recipient-name"
ref={initialFocusRef}
type="text"
placeholder="Enter recipient name"
className="w-full rounded-2xl border border-zinc-800 bg-zinc-900/40 p-4 text-white placeholder:text-zinc-600 focus:border-red-500/50 focus:ring-1 focus:ring-red-500/50 outline-none transition-all text-sm sm:text-base"
/>
</div>

<div className="group">
<label className="flex items-center gap-2 text-sm font-bold text-zinc-400 mb-2 transition-colors group-focus-within:text-white">
<label
htmlFor="country"
className="flex items-center gap-2 text-sm font-bold text-zinc-400 mb-2 transition-colors group-focus-within:text-white"
>
Country
</label>
<input
id="country"
type="text"
placeholder="Select country"
className="w-full rounded-2xl border border-zinc-800 bg-zinc-900/40 p-4 text-white placeholder:text-zinc-600 focus:border-red-500/50 focus:ring-1 focus:ring-red-500/50 outline-none transition-all text-sm sm:text-base"
/>
</div>

<div className="group">
<label className="flex items-center gap-2 text-sm font-bold text-zinc-400 mb-2 transition-colors group-focus-within:text-white">
<label
htmlFor="amount"
className="flex items-center gap-2 text-sm font-bold text-zinc-400 mb-2 transition-colors group-focus-within:text-white"
>
<DollarSign size={16} className="text-red-500" />
Amount (USDC)
</label>
<div className="relative">
<input
id="amount"
type="number"
value={amount || ""}
onChange={(e) => setAmount(Number(e.target.value))}
Expand Down Expand Up @@ -156,6 +192,7 @@ const EmergencyTransferModal = ({
<button
onClick={() => setSpeed("emergency")}
className={`flex flex-col items-start gap-1 rounded-2xl border-2 p-3 sm:p-4 transition-all ${speed === "emergency" ? "border-red-600/50 bg-red-600/5 shadow-[0_0_15px_rgba(220,38,38,0.1)]" : "border-zinc-800 bg-zinc-900/20 grayscale opacity-40"}`}
aria-label="Emergency speed - funds arrive in 2-5 minutes"
>
<Zap
size={18}
Expand All @@ -171,6 +208,7 @@ const EmergencyTransferModal = ({
<button
onClick={() => setSpeed("regular")}
className={`flex flex-col items-start gap-1 rounded-2xl border-2 p-3 sm:p-4 transition-all ${speed === "regular" ? "border-zinc-600 bg-zinc-800/20" : "border-zinc-800 bg-zinc-900/20 grayscale opacity-50"}`}
aria-label="Regular speed - funds arrive in 30-60 minutes"
>
<Clock size={18} className="text-zinc-400" />
<span className="text-sm font-bold text-zinc-200">Regular</span>
Expand All @@ -191,6 +229,7 @@ const EmergencyTransferModal = ({
checked={agreed}
onChange={(e) => setAgreed(e.target.checked)}
className="hidden"
aria-label="Confirm I understand the priority fee and transaction cannot be reversed"
/>
<span className="text-xs text-zinc-500 group-hover:text-zinc-300 transition-colors select-none">
I confirm this transfer is for an urgent need. I understand the{" "}
Expand Down
146 changes: 89 additions & 57 deletions components/HowItWorksModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,97 @@
import React from "react";
import React, { useRef } from "react";
import { AlertCircle } from "lucide-react";
import { useFocusTrap } from "../src/lib/hooks/useFocusTrap";

const HowItWorks = () => {
const data = [
{ label: "Daily Spending", amount: "$500.00", percentage: "50%" },
{ label: "Savings", amount: "$300.00", percentage: "30%" },
{ label: "Bills", amount: "$150.00", percentage: "15%" },
{ label: "Insurance", amount: "$50.00", percentage: "5%" },
];
interface HowItWorksModalProps {
isOpen: boolean;
onClose: () => void;
}

return (
<div className='flex items-center justify-center '>
{/* Outer How it Works card */}
<div className='w-full rounded-2xl border border-[rgba(220,38,38,0.20)] bg-gradient-to-br from-[#1A0505] to-[#0F0505] p-8 shadow-2xl'>
<div className='flex items-start gap-4'>
{/* Lucide icon + its container */}
<div className='grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-[#DC262633]'>
<AlertCircle className='h-5 w-5 text-[#DC2626]' />
</div>
const HowItWorksModal = ({ isOpen, onClose }: HowItWorksModalProps) => {
const modalRef = useRef<HTMLDivElement>(null);

<div className='flex-1'>
<h2 className='mb-4 text-xl font-semibold text-white'>
How It Works
</h2>
<p className='mb-8 text-sm leading-relaxed text-gray-400'>
When you send a remittance, the amount is automatically
split according to these percentages. Your family receives
the money already organized into different wallets.
</p>
const data = [
{ label: "Daily Spending", amount: "$500.00", percentage: "50%" },
{ label: "Savings", amount: "$300.00", percentage: "30%" },
{ label: "Bills", amount: "$150.00", percentage: "15%" },
{ label: "Insurance", amount: "$50.00", percentage: "5%" },
];

{/* Inner Content Box */}
<div className='rounded-xl border border-[rgba(255,255,255,0.05)] bg-black/40 p-6'>
<p className='mb-4 text-xs font-medium text-gray-500 uppercase tracking-wider'>
Example: If you send $1,000
</p>
// Focus trap hook
useFocusTrap({
isActive: isOpen,
onEscape: onClose,
onOverlayClick: onClose,
restoreFocusOnClose: true,
});

<div className='space-y-4'>
{data.map((item, index) => (
<div
key={index}
className='flex justify-between items-center'>
<span className='text-sm text-gray-300'>
{item.label}
</span>
<div className='text-right'>
<span className='text-sm font-medium text-white'>
{item.amount}
</span>
<span className='ml-2 text-sm text-gray-500'>
({item.percentage})
</span>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
if (!isOpen) return null;

return (
<div
ref={modalRef}
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4"
role="dialog"
aria-modal="true"
aria-labelledby="how-it-works-title"
>
<div className="w-full max-w-xl rounded-2xl border border-[rgba(220,38,38,0.20)] bg-gradient-to-br from-[#1A0505] to-[#0F0505] p-8 shadow-2xl">
<div className="flex items-start gap-4">
<div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-[#DC262633]">
<AlertCircle className="h-5 w-5 text-[#DC2626]" />
</div>

<div className="flex-1">
<h2
id="how-it-works-title"
className="mb-4 text-xl font-semibold text-white"
>
How It Works
</h2>
<p className="mb-8 text-sm leading-relaxed text-gray-400">
When you send a remittance, the amount is automatically
split according to these percentages. Your family receives
the money already organized into different wallets.
</p>

<div className="rounded-xl border border-[rgba(255,255,255,0.05)] bg-black/40 p-6">
<p className="mb-4 text-xs font-medium text-gray-500 uppercase tracking-wider">
Example: If you send $1,000
</p>

<div className="space-y-4">
{data.map((item, index) => (
<div
key={index}
className="flex justify-between items-center"
>
<span className="text-sm text-gray-300">
{item.label}
</span>
<div className="text-right">
<span className="text-sm font-medium text-white">
{item.amount}
</span>
<span className="ml-2 text-sm text-gray-500">
({item.percentage})
</span>
</div>
</div>
))}
</div>
</div>

<button
onClick={onClose}
className="mt-6 w-full rounded-xl bg-zinc-800 py-3 font-bold text-zinc-300 hover:bg-zinc-700 hover:text-white transition-all"
>
Got it
</button>
</div>
</div>
</div>
</div>
);
};

export default HowItWorks;
export default HowItWorksModal;
Loading