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): radiogroup semantics for AdminPromoOfferSend button groups

Browse Source 
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.
This commit is contained in:
c0mrade
2026-05-26 11:28:37 +03:00
parent 8d6baf8ad0
commit 581a2ffb52
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/AdminPromoOfferSend.tsx
View File

@@ -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'