fix(web): onboarding micro-polish — autofocus CTA, swap hard-coded red token

- Auto-focus the "Şase Aramaya Başla" button when the completed card
  mounts so keyboard users can Enter through without tabbing.
- Replace the hard-coded `text-red-600 dark:text-red-400` on the trial
  error message with the `text-destructive` design token.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-31 22:27:50 +03:00
parent 229ada8adf
commit 984a02e9a3

View File

@@ -67,6 +67,7 @@ export function WelcomeOnboardingModal({
const [escapeHatchEnabled, setEscapeHatchEnabled] = useState(false); const [escapeHatchEnabled, setEscapeHatchEnabled] = useState(false);
const provisionedRef = useRef(false); const provisionedRef = useRef(false);
const refAppliedRef = useRef(false); const refAppliedRef = useRef(false);
const completeCtaRef = useRef<HTMLButtonElement>(null);
const MAX_FAILURES = 2; const MAX_FAILURES = 2;
const STUCK_TIMEOUT_MS = 30_000; const STUCK_TIMEOUT_MS = 30_000;
const [isDark] = useState(() => { const [isDark] = useState(() => {
@@ -161,6 +162,16 @@ export function WelcomeOnboardingModal({
}); });
}, [phase, animationEnded, trialMutation.isSuccess, queryClient]); }, [phase, animationEnded, trialMutation.isSuccess, queryClient]);
// Auto-focus the primary CTA when the completed card appears so keyboard
// users can confirm with Enter without having to tab through the card.
useEffect(() => {
if (phase === "completed") {
// Wait a tick so the element is in the DOM and Radix's focus trap has
// already moved focus into the dialog.
requestAnimationFrame(() => completeCtaRef.current?.focus());
}
}, [phase]);
return ( return (
<Dialog <Dialog
open open
@@ -240,7 +251,7 @@ export function WelcomeOnboardingModal({
)} )}
{trialMutation.isError && !escapeHatchEnabled && ( {trialMutation.isError && !escapeHatchEnabled && (
<div className="flex flex-col items-center gap-3"> <div className="flex flex-col items-center gap-3">
<p className="text-sm leading-5 text-red-600 dark:text-red-400"> <p className="text-sm leading-5 text-destructive">
{t("subscription.onboarding.error")} {t("subscription.onboarding.error")}
</p> </p>
<Button variant="outline" onClick={() => trialMutation.mutate()}> <Button variant="outline" onClick={() => trialMutation.mutate()}>
@@ -332,6 +343,7 @@ export function WelcomeOnboardingModal({
</ul> </ul>
</div> </div>
<Button <Button
ref={completeCtaRef}
size="lg" size="lg"
className="bg-brand text-brand-foreground hover:bg-brand/90" className="bg-brand text-brand-foreground hover:bg-brand/90"
onClick={() => { onClick={() => {