mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
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:
@@ -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)}
|
||||||
|
|||||||
Reference in New Issue
Block a user