etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): label associations for AdminServerEdit fields

Browse Source 
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.
This commit is contained in:
c0mrade
2026-05-26 10:42:15 +03:00
parent 5a8195f83f
commit d42fcfa5dd
1 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/AdminServerEdit.tsx
View File

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