fix(a11y): label associations for AdminPromoOfferTemplateEdit fields

Add htmlFor/id pairs for template name, message text, button text, valid hours,
discount percent, test duration, and active discount hours (WCAG 1.3.1). Test-squads
section is a checkbox group, not a single control.
This commit is contained in:
c0mrade
2026-05-26 10:45:29 +03:00
parent d42fcfa5dd
commit 1ec6d7e979

View File

@@ -138,11 +138,15 @@ export default function AdminPromoOfferTemplateEdit() {
<div className="rounded-xl border border-dark-700 bg-dark-800 p-6"> <div className="rounded-xl border border-dark-700 bg-dark-800 p-6">
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="po-template-name"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.promoOffers.form.templateName')} {t('admin.promoOffers.form.templateName')}
<span className="text-error-400">*</span> <span className="text-error-400">*</span>
</label> </label>
<input <input
id="po-template-name"
type="text" type="text"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
@@ -151,11 +155,15 @@ export default function AdminPromoOfferTemplateEdit() {
</div> </div>
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="po-message-text"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.promoOffers.form.messageText')} {t('admin.promoOffers.form.messageText')}
<span className="text-error-400">*</span> <span className="text-error-400">*</span>
</label> </label>
<textarea <textarea
id="po-message-text"
value={messageText} value={messageText}
onChange={(e) => setMessageText(e.target.value)} onChange={(e) => setMessageText(e.target.value)}
rows={4} rows={4}
@@ -164,11 +172,15 @@ export default function AdminPromoOfferTemplateEdit() {
</div> </div>
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="po-button-text"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.promoOffers.form.buttonText')} {t('admin.promoOffers.form.buttonText')}
<span className="text-error-400">*</span> <span className="text-error-400">*</span>
</label> </label>
<input <input
id="po-button-text"
type="text" type="text"
value={buttonText} value={buttonText}
onChange={(e) => setButtonText(e.target.value)} onChange={(e) => setButtonText(e.target.value)}
@@ -178,10 +190,14 @@ export default function AdminPromoOfferTemplateEdit() {
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="po-valid-hours"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.promoOffers.form.validHours')} {t('admin.promoOffers.form.validHours')}
</label> </label>
<input <input
id="po-valid-hours"
type="number" type="number"
value={validHours} value={validHours}
onChange={createNumberInputHandler(setValidHours, 1)} onChange={createNumberInputHandler(setValidHours, 1)}
@@ -196,10 +212,14 @@ export default function AdminPromoOfferTemplateEdit() {
{!isTestAccess && ( {!isTestAccess && (
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="po-discount-percent"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.promoOffers.form.discountPercent')} {t('admin.promoOffers.form.discountPercent')}
</label> </label>
<input <input
id="po-discount-percent"
type="number" type="number"
value={discountPercent} value={discountPercent}
onChange={createNumberInputHandler(setDiscountPercent, 0, 100)} onChange={createNumberInputHandler(setDiscountPercent, 0, 100)}
@@ -215,10 +235,14 @@ export default function AdminPromoOfferTemplateEdit() {
{isTestAccess ? ( {isTestAccess ? (
<> <>
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="po-test-duration-hours"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.promoOffers.form.testDurationHours')} {t('admin.promoOffers.form.testDurationHours')}
</label> </label>
<input <input
id="po-test-duration-hours"
type="number" type="number"
value={testDurationHours} value={testDurationHours}
onChange={createNumberInputHandler(setTestDurationHours, 0)} onChange={createNumberInputHandler(setTestDurationHours, 0)}
@@ -283,10 +307,14 @@ export default function AdminPromoOfferTemplateEdit() {
</> </>
) : ( ) : (
<div> <div>
<label className="mb-2 block text-sm font-medium text-dark-300"> <label
htmlFor="po-active-discount-hours"
className="mb-2 block text-sm font-medium text-dark-300"
>
{t('admin.promoOffers.form.activeDiscountHours')} {t('admin.promoOffers.form.activeDiscountHours')}
</label> </label>
<input <input
id="po-active-discount-hours"
type="number" type="number"
value={activeDiscountHours} value={activeDiscountHours}
onChange={createNumberInputHandler(setActiveDiscountHours, 0)} onChange={createNumberInputHandler(setActiveDiscountHours, 0)}