fix(a11y): label associations for AdminCampaignCreate fields

Add htmlFor/id pairs for tariff selector, name, start parameter, trial subscription
days/traffic/devices and tariff duration days inputs (WCAG 1.3.1). Group labels (server
selector, bonus-type buttons) deferred — they need role=group, not htmlFor.
This commit is contained in:
c0mrade
2026-05-26 10:20:56 +03:00
parent a4897243ba
commit 4d18be848d

View File

@@ -135,10 +135,14 @@ function TariffSelector({
return ( return (
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="campaign-tariff-select"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.selectTariff')} {t('admin.campaigns.form.selectTariff')}
</label> </label>
<select <select
id="campaign-tariff-select"
value={value || ''} value={value || ''}
onChange={(e) => onChange(e.target.value ? parseInt(e.target.value) : null)} onChange={(e) => onChange(e.target.value ? parseInt(e.target.value) : null)}
className="input" className="input"
@@ -320,11 +324,12 @@ export default function AdminCampaignCreate() {
<div className="card space-y-4"> <div className="card space-y-4">
{/* Name */} {/* Name */}
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label htmlFor="campaign-name" className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.campaigns.form.name')} {t('admin.campaigns.form.name')}
<span className="text-error-400">*</span> <span className="text-error-400">*</span>
</label> </label>
<input <input
id="campaign-name"
type="text" type="text"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
@@ -341,11 +346,15 @@ export default function AdminCampaignCreate() {
{/* Start Parameter */} {/* Start Parameter */}
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="campaign-start-param"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.startParameter')} {t('admin.campaigns.form.startParameter')}
<span className="text-error-400">*</span> <span className="text-error-400">*</span>
</label> </label>
<input <input
id="campaign-start-param"
type="text" type="text"
value={startParameter} value={startParameter}
onChange={(e) => setStartParameter(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ''))} onChange={(e) => setStartParameter(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ''))}
@@ -438,10 +447,14 @@ export default function AdminCampaignCreate() {
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4">
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="campaign-sub-days"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.days')} {t('admin.campaigns.form.days')}
</label> </label>
<input <input
id="campaign-sub-days"
type="number" type="number"
value={subscriptionDays} value={subscriptionDays}
onChange={createNumberInputHandler(setSubscriptionDays, 1)} onChange={createNumberInputHandler(setSubscriptionDays, 1)}
@@ -450,10 +463,14 @@ export default function AdminCampaignCreate() {
/> />
</div> </div>
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="campaign-sub-traffic"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.trafficGb')} {t('admin.campaigns.form.trafficGb')}
</label> </label>
<input <input
id="campaign-sub-traffic"
type="number" type="number"
value={subscriptionTraffic} value={subscriptionTraffic}
onChange={createNumberInputHandler(setSubscriptionTraffic, 0)} onChange={createNumberInputHandler(setSubscriptionTraffic, 0)}
@@ -462,10 +479,14 @@ export default function AdminCampaignCreate() {
/> />
</div> </div>
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="campaign-sub-devices"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.devices')} {t('admin.campaigns.form.devices')}
</label> </label>
<input <input
id="campaign-sub-devices"
type="number" type="number"
value={subscriptionDevices} value={subscriptionDevices}
onChange={createNumberInputHandler(setSubscriptionDevices, 1)} onChange={createNumberInputHandler(setSubscriptionDevices, 1)}
@@ -490,10 +511,14 @@ export default function AdminCampaignCreate() {
<TariffSelector tariffs={tariffs} value={tariffId} onChange={setTariffId} /> <TariffSelector tariffs={tariffs} value={tariffId} onChange={setTariffId} />
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="campaign-tariff-days"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.campaigns.form.durationDays')} {t('admin.campaigns.form.durationDays')}
</label> </label>
<input <input
id="campaign-tariff-days"
type="number" type="number"
value={tariffDays} value={tariffDays}
onChange={createNumberInputHandler(setTariffDays, 1)} onChange={createNumberInputHandler(setTariffDays, 1)}