From 4d18be848d8ad6174a3c81ffcb3959269ee24534 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 26 May 2026 10:20:56 +0300
Subject: [PATCH] fix(a11y): label associations for AdminCampaignCreate fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/pages/AdminCampaignCreate.tsx | 39 +++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/pages/AdminCampaignCreate.tsx b/src/pages/AdminCampaignCreate.tsx
index 200eb43..e9fef85 100644
--- a/src/pages/AdminCampaignCreate.tsx
+++ b/src/pages/AdminCampaignCreate.tsx
@@ -135,10 +135,14 @@ function TariffSelector({
 
   return (
     <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')}
       </label>
       <select
+        id="campaign-tariff-select"
         value={value || ''}
         onChange={(e) => onChange(e.target.value ? parseInt(e.target.value) : null)}
         className="input"
@@ -320,11 +324,12 @@ export default function AdminCampaignCreate() {
       <div className="card space-y-4">
         {/* Name */}
         <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')}
             <span className="text-error-400">*</span>
           </label>
           <input
+            id="campaign-name"
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
@@ -341,11 +346,15 @@ export default function AdminCampaignCreate() {
 
         {/* Start Parameter */}
         <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')}
             <span className="text-error-400">*</span>
           </label>
           <input
+            id="campaign-start-param"
             type="text"
             value={startParameter}
             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>
-              <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')}
               </label>
               <input
+                id="campaign-sub-days"
                 type="number"
                 value={subscriptionDays}
                 onChange={createNumberInputHandler(setSubscriptionDays, 1)}
@@ -450,10 +463,14 @@ export default function AdminCampaignCreate() {
               />
             </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')}
               </label>
               <input
+                id="campaign-sub-traffic"
                 type="number"
                 value={subscriptionTraffic}
                 onChange={createNumberInputHandler(setSubscriptionTraffic, 0)}
@@ -462,10 +479,14 @@ export default function AdminCampaignCreate() {
               />
             </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')}
               </label>
               <input
+                id="campaign-sub-devices"
                 type="number"
                 value={subscriptionDevices}
                 onChange={createNumberInputHandler(setSubscriptionDevices, 1)}
@@ -490,10 +511,14 @@ export default function AdminCampaignCreate() {
           <TariffSelector tariffs={tariffs} value={tariffId} onChange={setTariffId} />
 
           <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')}
             </label>
             <input
+              id="campaign-tariff-days"
               type="number"
               value={tariffDays}
               onChange={createNumberInputHandler(setTariffDays, 1)}