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 */}
<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)}