From d42fcfa5dd77a8663b1e4b761efe579f09328712 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 26 May 2026 10:42:15 +0300
Subject: [PATCH] fix(a11y): label associations for AdminServerEdit fields

Add htmlFor/id pairs for display name, description, country code, price, max users
and sort order (WCAG 1.3.1). Original name is a read-only display, not a control.
---
 src/pages/AdminServerEdit.tsx | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/pages/AdminServerEdit.tsx b/src/pages/AdminServerEdit.tsx
index a3c7026..344c1b0 100644
--- a/src/pages/AdminServerEdit.tsx
+++ b/src/pages/AdminServerEdit.tsx
@@ -135,11 +135,15 @@ export default function AdminServerEdit() {
 
           {/* Display Name */}
           <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium text-dark-300">
+            <label
+              htmlFor="srv-display-name"
+              className="mb-2 block text-sm font-medium text-dark-300"
+            >
               {t('admin.servers.displayName')}
               <span className="text-error-400">*</span>
             </label>
             <input
+              id="srv-display-name"
               type="text"
               value={displayName}
               onChange={(e) => setDisplayName(e.target.value)}
@@ -151,10 +155,14 @@ export default function AdminServerEdit() {
 
           {/* Description */}
           <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium text-dark-300">
+            <label
+              htmlFor="srv-description"
+              className="mb-2 block text-sm font-medium text-dark-300"
+            >
               {t('admin.servers.description')}
             </label>
             <textarea
+              id="srv-description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               className="input resize-none"
@@ -165,11 +173,15 @@ export default function AdminServerEdit() {
 
           {/* Country Code */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-dark-300">
+            <label
+              htmlFor="srv-country-code"
+              className="mb-2 block text-sm font-medium text-dark-300"
+            >
               {t('admin.servers.countryCode')}
             </label>
             <div className="flex items-center gap-2">
               <input
+                id="srv-country-code"
                 type="text"
                 value={countryCode}
                 onChange={(e) => setCountryCode(e.target.value.toUpperCase().slice(0, 2))}
@@ -190,11 +202,12 @@ export default function AdminServerEdit() {
 
           {/* Price */}
           <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium text-dark-300">
+            <label htmlFor="srv-price" className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.servers.price')}
             </label>
             <div className="flex items-center gap-2">
               <input
+                id="srv-price"
                 type="number"
                 value={priceKopeks === '' ? '' : priceKopeks / 100}
                 onChange={(e) => {
@@ -216,11 +229,12 @@ export default function AdminServerEdit() {
 
           {/* Max Users */}
           <div className="mb-4">
-            <label className="mb-2 block text-sm font-medium text-dark-300">
+            <label htmlFor="srv-max-users" className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.servers.maxUsers')}
             </label>
             <div className="flex items-center gap-2">
               <input
+                id="srv-max-users"
                 type="number"
                 value={maxUsers || ''}
                 onChange={(e) =>
@@ -238,10 +252,14 @@ export default function AdminServerEdit() {
 
           {/* Sort Order */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-dark-300">
+            <label
+              htmlFor="srv-sort-order"
+              className="mb-2 block text-sm font-medium text-dark-300"
+            >
               {t('admin.servers.sortOrder')}
             </label>
             <input
+              id="srv-sort-order"
               type="number"
               value={sortOrder}
               onChange={createNumberInputHandler(setSortOrder)}