a11y(web): associate settings labels with inputs; fix delete-confirm hint

Add htmlFor/id to the email, member-since, referral code, share link and
delete-confirm fields so every Label is programmatically tied to its
Input. Drop the delete-confirm placeholder that echoed the exact confirm
word (which defeated the type-to-confirm friction) and disable autocomplete.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-26 23:33:38 +03:00
parent 239791290e
commit dc7f4627fb

View File

@@ -304,13 +304,14 @@ export function SettingsContent({
<Input id="name" value={name} onChange={(e) => setName(e.target.value)} />
</div>
<div className="space-y-2">
<Label>{t("settings.profile.email")}</Label>
<Input value={user?.email || ""} disabled />
<Label htmlFor="email">{t("settings.profile.email")}</Label>
<Input id="email" value={user?.email || ""} disabled />
</div>
{user?.createdAt && (
<div className="space-y-2">
<Label>{t("settings.profile.memberSince")}</Label>
<Label htmlFor="memberSince">{t("settings.profile.memberSince")}</Label>
<Input
id="memberSince"
value={new Date(user.createdAt).toLocaleDateString(
locale === "tr" ? "tr-TR" : "en-US",
{ day: "numeric", month: "long", year: "numeric" },
@@ -486,9 +487,14 @@ export function SettingsContent({
<>
{/* Referral Code */}
<div className="space-y-2">
<Label>{t("settings.referral.yourCode")}</Label>
<Label htmlFor="referralCode">{t("settings.referral.yourCode")}</Label>
<div className="flex items-center gap-3">
<Input value={user.referralCode} readOnly className="font-mono text-lg" />
<Input
id="referralCode"
value={user.referralCode}
readOnly
className="font-mono text-lg"
/>
<Button variant="outline" size="icon" onClick={copyReferralCode}>
<Copy className="h-4 w-4" />
</Button>
@@ -497,9 +503,10 @@ export function SettingsContent({
{/* Share Link */}
<div className="space-y-2">
<Label>{t("settings.referral.shareLink")}</Label>
<Label htmlFor="shareLink">{t("settings.referral.shareLink")}</Label>
<div className="flex items-center gap-3">
<Input
id="shareLink"
value={`${window.location.origin}/register?ref=${user.referralCode}`}
readOnly
className="text-sm"
@@ -576,11 +583,12 @@ export function SettingsContent({
</DialogDescription>
</DialogHeader>
<div className="space-y-2">
<Label>{t("settings.account.typeConfirm")}</Label>
<Label htmlFor="deleteConfirm">{t("settings.account.typeConfirm")}</Label>
<Input
id="deleteConfirm"
value={deleteConfirmText}
onChange={(e) => setDeleteConfirmText(e.target.value)}
placeholder={t("settings.account.confirmWord")}
autoComplete="off"
/>
</div>
<DialogFooter>