From 581a2ffb529f59bb8493a702ef2180cb4598b59b Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 26 May 2026 11:28:37 +0300
Subject: [PATCH] fix(a11y): radiogroup semantics for AdminPromoOfferSend
 button groups

Wrap template-selection and send-mode button groups in role=radiogroup +
aria-labelledby; mark each option button as role=radio with aria-checked
(WCAG 4.1.2). Labels get matching id for the labelledby relationship.
---
 src/pages/AdminPromoOfferSend.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/pages/AdminPromoOfferSend.tsx b/src/pages/AdminPromoOfferSend.tsx
index 8c78eca..2bea33d 100644
--- a/src/pages/AdminPromoOfferSend.tsx
+++ b/src/pages/AdminPromoOfferSend.tsx
@@ -300,14 +300,17 @@ export default function AdminPromoOfferSend() {
         <div className="mx-auto max-w-2xl space-y-6">
           {/* Template Selection */}
           <div className="rounded-xl border border-dark-700 bg-dark-800 p-6">
-            <label className="mb-2 block text-sm font-medium text-dark-300">
+            <label id="po-template-label" className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.promoOffers.send.offerTemplate')}
               <span className="text-error-400">*</span>
             </label>
-            <div className="space-y-2">
+            <div className="space-y-2" role="radiogroup" aria-labelledby="po-template-label">
               {activeTemplates.map((template) => (
                 <button
                   key={template.id}
+                  type="button"
+                  role="radio"
+                  aria-checked={selectedTemplateId === template.id}
                   onClick={() => setSelectedTemplateId(template.id)}
                   className={`w-full rounded-lg border p-4 text-left transition-colors ${
                     selectedTemplateId === template.id
@@ -345,12 +348,15 @@ export default function AdminPromoOfferSend() {
 
           {/* Send Mode */}
           <div className="rounded-xl border border-dark-700 bg-dark-800 p-6">
-            <label className="mb-2 block text-sm font-medium text-dark-300">
+            <label id="po-sendmode-label" className="mb-2 block text-sm font-medium text-dark-300">
               {t('admin.promoOffers.send.sendTo')}
               <span className="text-error-400">*</span>
             </label>
-            <div className="mb-4 flex gap-2">
+            <div className="mb-4 flex gap-2" role="radiogroup" aria-labelledby="po-sendmode-label">
               <button
+                type="button"
+                role="radio"
+                aria-checked={sendMode === 'segment'}
                 onClick={() => setSendMode('segment')}
                 className={`flex flex-1 items-center justify-center gap-2 rounded-lg border py-2.5 text-sm font-medium transition-colors ${
                   sendMode === 'segment'
@@ -362,6 +368,9 @@ export default function AdminPromoOfferSend() {
                 <span>{t('admin.promoOffers.send.segment')}</span>
               </button>
               <button
+                type="button"
+                role="radio"
+                aria-checked={sendMode === 'user'}
                 onClick={() => setSendMode('user')}
                 className={`flex flex-1 items-center justify-center gap-2 rounded-lg border py-2.5 text-sm font-medium transition-colors ${
                   sendMode === 'user'