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 AdminTariffCreate fields

Browse Source 
Add htmlFor/id pairs for name, description, daily price, traffic limit, device limit
and tier level (WCAG 1.3.1).
This commit is contained in:
c0mrade
2026-05-26 10:48:46 +03:00
parent 1ec6d7e979
commit e1b48c1ccb
1 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/AdminTariffCreate.tsx
View File

@@ -442,11 +442,12 @@ export default function AdminTariffCreate() {
<div className="card space-y-4">
{/* Name */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label htmlFor="tariff-name" className="mb-2 block text-sm font-medium text-dark-300">
{t('admin.tariffs.nameLabel')}
<span className="text-error-400">*</span>
</label>
<input
id="tariff-name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
@@ -466,10 +467,14 @@ export default function AdminTariffCreate() {
{/* Description */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="tariff-description"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.tariffs.descriptionLabel')}
</label>
<textarea
id="tariff-description"
value={description}
onChange={(e) => setDescription(e.target.value)}
className="input min-h-[80px] resize-none"
@@ -480,12 +485,16 @@ export default function AdminTariffCreate() {
{/* Daily Price (only for daily tariff) */}
{isDaily && (
<div className="rounded-lg border border-warning-500/30 bg-warning-500/10 p-4">
<label className="mb-2 block text-sm font-medium text-warning-400">
<label
htmlFor="tariff-daily-price"
className="mb-2 block text-sm font-medium text-warning-400"
>
{t('admin.tariffs.dailyPriceLabel')}
<span className="text-error-400">*</span>
</label>
<div className="flex items-center gap-2">
<input
id="tariff-daily-price"
type="number"
value={dailyPriceKopeks === '' ? '' : dailyPriceKopeks / 100}
onChange={(e) => {
@@ -510,11 +519,15 @@ export default function AdminTariffCreate() {
{/* Traffic Limit */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="tariff-traffic-limit"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.tariffs.trafficLimitLabel')}
</label>
<div className="flex items-center gap-2">
<input
id="tariff-traffic-limit"
type="number"
value={trafficLimitGb}
onChange={createNumberInputHandler(setTrafficLimitGb, 0)}
@@ -535,11 +548,15 @@ export default function AdminTariffCreate() {
{/* Device Limit */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="tariff-device-limit"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.tariffs.deviceLimitLabel')}
<span className="text-error-400">*</span>
</label>
<input
id="tariff-device-limit"
type="number"
value={deviceLimit}
onChange={createNumberInputHandler(setDeviceLimit, 1)}
@@ -551,11 +568,15 @@ export default function AdminTariffCreate() {
{/* Tier Level */}
<div>
<label className="mb-2 block text-sm font-medium text-dark-300">
<label
htmlFor="tariff-tier-level"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.tariffs.tierLevelLabel')}
<span className="text-error-400">*</span>
</label>
<input
id="tariff-tier-level"
type="number"
value={tierLevel}
onChange={createNumberInputHandler(setTierLevel, 1, 10)}