etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): associate referral form labels with their inputs

Browse Source 
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).
This commit is contained in:
c0mrade
2026-05-26 00:06:59 +03:00
parent 7b0a72db5b
commit 1b40c3856d
2 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/ReferralPartnerApply.tsx
View File

@@ -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}

9
src/pages/ReferralWithdrawalRequest.tsx
View File

@@ -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 })}