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