From 1b40c3856d189be84ac8dfa60f5988b5fa8b805e Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 26 May 2026 00:06:59 +0300
Subject: [PATCH] fix(a11y): associate referral form labels with their inputs

Add htmlFor/id pairs across the partner-apply form (company, channel, website,
description, expected referrals, desired commission) and the withdrawal-request form
(amount, payment details) so labels are programmatically tied to their controls (WCAG 1.3.1).
---
 src/pages/ReferralPartnerApply.tsx      | 36 ++++++++++++++++++++-----
 src/pages/ReferralWithdrawalRequest.tsx |  9 +++++--
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/pages/ReferralPartnerApply.tsx b/src/pages/ReferralPartnerApply.tsx
index 766e063..c845fd0 100644
--- a/src/pages/ReferralPartnerApply.tsx
+++ b/src/pages/ReferralPartnerApply.tsx
@@ -65,10 +65,14 @@ export default function ReferralPartnerApply() {
       <form onSubmit={handleSubmit} className="space-y-4">
         <div className="bento-card space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-dark-300">
+            <label
+              htmlFor="rp-company-name"
+              className="mb-1 block text-sm font-medium text-dark-300"
+            >
               {t('referral.partner.fields.companyName')}
             </label>
             <input
+              id="rp-company-name"
               type="text"
               className="input w-full"
               value={form.company_name ?? ''}
@@ -77,10 +81,14 @@ export default function ReferralPartnerApply() {
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-dark-300">
+            <label
+              htmlFor="rp-telegram-channel"
+              className="mb-1 block text-sm font-medium text-dark-300"
+            >
               {t('referral.partner.fields.telegramChannel')}
             </label>
             <input
+              id="rp-telegram-channel"
               type="text"
               className="input w-full"
               value={form.telegram_channel ?? ''}
@@ -89,10 +97,14 @@ export default function ReferralPartnerApply() {
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-dark-300">
+            <label
+              htmlFor="rp-website-url"
+              className="mb-1 block text-sm font-medium text-dark-300"
+            >
               {t('referral.partner.fields.websiteUrl')}
             </label>
             <input
+              id="rp-website-url"
               type="url"
               className="input w-full"
               value={form.website_url ?? ''}
@@ -101,10 +113,14 @@ export default function ReferralPartnerApply() {
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-dark-300">
+            <label
+              htmlFor="rp-description"
+              className="mb-1 block text-sm font-medium text-dark-300"
+            >
               {t('referral.partner.fields.description')}
             </label>
             <textarea
+              id="rp-description"
               className="input min-h-[80px] w-full"
               value={form.description ?? ''}
               onChange={(e) => setForm({ ...form, description: e.target.value })}
@@ -112,10 +128,14 @@ export default function ReferralPartnerApply() {
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-dark-300">
+            <label
+              htmlFor="rp-expected-referrals"
+              className="mb-1 block text-sm font-medium text-dark-300"
+            >
               {t('referral.partner.fields.expectedReferrals')}
             </label>
             <input
+              id="rp-expected-referrals"
               type="number"
               min={0}
               max={2000000000}
@@ -131,10 +151,14 @@ export default function ReferralPartnerApply() {
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-dark-300">
+            <label
+              htmlFor="rp-desired-commission"
+              className="mb-1 block text-sm font-medium text-dark-300"
+            >
               {t('referral.partner.fields.desiredCommission')}
             </label>
             <input
+              id="rp-desired-commission"
               type="number"
               min={1}
               max={100}
diff --git a/src/pages/ReferralWithdrawalRequest.tsx b/src/pages/ReferralWithdrawalRequest.tsx
index 4fc69cc..455c334 100644
--- a/src/pages/ReferralWithdrawalRequest.tsx
+++ b/src/pages/ReferralWithdrawalRequest.tsx
@@ -59,10 +59,11 @@ export default function ReferralWithdrawalRequest() {
       <form onSubmit={handleSubmit} className="space-y-4">
         <div className="bento-card space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-dark-300">
+            <label htmlFor="rw-amount" className="mb-1 block text-sm font-medium text-dark-300">
               {t('referral.withdrawal.fields.amount')}
             </label>
             <input
+              id="rw-amount"
               type="number"
               min={balance ? Math.ceil(balance.min_amount_kopeks / 100) : 0}
               max={balance ? Math.floor(balance.available_total / 100) : 0}
@@ -86,10 +87,14 @@ export default function ReferralWithdrawalRequest() {
             </p>
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-dark-300">
+            <label
+              htmlFor="rw-payment-details"
+              className="mb-1 block text-sm font-medium text-dark-300"
+            >
               {balance?.requisites_text || t('referral.withdrawal.fields.paymentDetails')}
             </label>
             <textarea
+              id="rw-payment-details"
               className="input min-h-[80px] w-full"
               value={form.payment_details}
               onChange={(e) => setForm({ ...form, payment_details: e.target.value })}