mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
feat(a11y): cross-platform hardening + modal focus-trap from impeccable audit
Responsive / viewport: - add .min-h-viewport / .h-viewport utilities (100dvh + Telegram --tg-viewport-stable-height) - migrate min-h-screen / h-screen / 100vh across 18 files - reveal hover-only controls on focus-within + touch (desktop nav, admin settings) - grid breakpoints (TopUpAmount, Contests), larger touch targets, nav aria-labels Platform routing (Telegram WebView correctness): - clipboard -> copyToClipboard util with execCommand fallback (10 files) - window.open -> openTelegramLink / openLink (Profile, Referral, ChannelSubscriptionScreen) - window.confirm -> useNativeDialog (admin pages); PromoOffersSection -> useDestructiveConfirm - window.prompt -> usePrompt / PromptDialogHost (TipTap link editors) - ESLint no-restricted-properties guard against regressions (adapters/clipboard util exempt) Modal accessibility: - new useFocusTrap hook (focus trap, Esc, scroll lock, focus restore) - role=dialog / aria-modal / focus-trap: Polls, SuccessNotificationModal, AdminPolicies, AdminPromoGroups, AdminCampaigns, BroadcastPreview (Telegram + Email) - new global usePrompt store + PromptDialogHost
This commit is contained in:
72
src/components/PromptDialogHost.tsx
Normal file
72
src/components/PromptDialogHost.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useEffect, useState, type FormEvent } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFocusTrap } from '../hooks/useFocusTrap';
|
||||
import { usePromptStore } from '../store/promptDialog';
|
||||
|
||||
/**
|
||||
* Global host for usePrompt(). Mount once near the app root.
|
||||
* Renders an accessible text-input dialog (focus-trapped, Esc/Enter, scroll-locked)
|
||||
* as a cross-platform replacement for window.prompt, which the Telegram WebView ignores.
|
||||
*/
|
||||
export function PromptDialogHost() {
|
||||
const request = usePromptStore((s) => s.request);
|
||||
const submit = usePromptStore((s) => s.submit);
|
||||
const cancel = usePromptStore((s) => s.cancel);
|
||||
const { t } = useTranslation();
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
const open = request !== null;
|
||||
const dialogRef = useFocusTrap<HTMLFormElement>(open, { onEscape: cancel });
|
||||
|
||||
useEffect(() => {
|
||||
if (request) setValue(request.initialValue ?? '');
|
||||
}, [request]);
|
||||
|
||||
if (!request) return null;
|
||||
|
||||
const handleSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) {
|
||||
cancel();
|
||||
return;
|
||||
}
|
||||
submit(trimmed);
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-black/60" onClick={cancel} aria-hidden="true" />
|
||||
<form
|
||||
ref={dialogRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={request.title ?? request.label}
|
||||
onSubmit={handleSubmit}
|
||||
className="card relative w-full max-w-sm space-y-4"
|
||||
>
|
||||
{request.title && <h2 className="text-lg font-semibold text-dark-50">{request.title}</h2>}
|
||||
<label className="block">
|
||||
<span className="label">{request.label}</span>
|
||||
<input
|
||||
type={request.inputType ?? 'text'}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder={request.placeholder}
|
||||
className="input"
|
||||
/>
|
||||
</label>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button type="button" onClick={cancel} className="btn-secondary">
|
||||
{request.cancelLabel ?? t('common.cancel')}
|
||||
</button>
|
||||
<button type="submit" className="btn-primary">
|
||||
{request.submitLabel ?? t('common.ok', 'OK')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user