fix(a11y): label associations for AdminCampaignEdit fields

Add htmlFor/id pairs for tariff selector, partner selector, name, start parameter,
subscription days/traffic/devices and tariff duration days inputs (WCAG 1.3.1).
This commit is contained in:
c0mrade
2026-05-26 10:24:58 +03:00
parent 4d18be848d
commit 6f66cb6759

View File

@@ -110,10 +110,14 @@ function TariffSelector({
return (
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="campaign-edit-tariff-select"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.selectTariff')}
</label>
<select
id="campaign-edit-tariff-select"
value={value || ''}
onChange={(e) => onChange(e.target.value ? parseInt(e.target.value) : null)}
className="input"
@@ -144,10 +148,14 @@ function PartnerSelector({
return (
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="campaign-edit-partner-select"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.partner')}
</label>
<select
id="campaign-edit-partner-select"
value={value || ''}
onChange={(e) => onChange(e.target.value ? parseInt(e.target.value) : null)}
className="input"
@@ -344,11 +352,15 @@ export default function AdminCampaignEdit() {
<div className="card space-y-4">
{/* Name */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="campaign-edit-name"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.name')}
<span className="text-error-400">*</span>
</label>
<input
id="campaign-edit-name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
@@ -365,11 +377,15 @@ export default function AdminCampaignEdit() {
{/* Start Parameter */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="campaign-edit-start-param"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.startParameter')}
<span className="text-error-400">*</span>
</label>
<input
id="campaign-edit-start-param"
type="text"
value={startParameter}
onChange={(e) => setStartParameter(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ''))}
@@ -467,10 +483,14 @@ export default function AdminCampaignEdit() {
<div className="grid grid-cols-3 gap-4">
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="campaign-edit-sub-days"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.days')}
</label>
<input
id="campaign-edit-sub-days"
type="number"
value={subscriptionDays}
onChange={createNumberInputHandler(setSubscriptionDays, 1)}
@@ -479,10 +499,14 @@ export default function AdminCampaignEdit() {
/>
</div>
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="campaign-edit-sub-traffic"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.trafficGb')}
</label>
<input
id="campaign-edit-sub-traffic"
type="number"
value={subscriptionTraffic}
onChange={createNumberInputHandler(setSubscriptionTraffic, 0)}
@@ -491,10 +515,14 @@ export default function AdminCampaignEdit() {
/>
</div>
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="campaign-edit-sub-devices"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.devices')}
</label>
<input
id="campaign-edit-sub-devices"
type="number"
value={subscriptionDevices}
onChange={createNumberInputHandler(setSubscriptionDevices, 1)}
@@ -519,10 +547,14 @@ export default function AdminCampaignEdit() {
<TariffSelector tariffs={tariffs} value={tariffId} onChange={setTariffId} />
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="campaign-edit-tariff-days"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.durationDays')}
</label>
<input
id="campaign-edit-tariff-days"
type="number"
value={tariffDays}
onChange={createNumberInputHandler(setTariffDays, 1)}