From 491f48a331b80fa84e0ac82e3fd0341557adbff5 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Mon, 25 May 2026 23:57:36 +0300
Subject: [PATCH] fix(a11y): switch semantics for user-flow toggles

Add role=switch + aria-checked + aria-label to the custom toggle buttons so screen
readers announce on/off state (WCAG 4.1.2): autopay (Subscription) and the custom-days
/ custom-traffic toggles (SubscriptionPurchase).
---
 src/pages/Subscription.tsx         | 3 +++
 src/pages/SubscriptionPurchase.tsx | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index c5a6761..94f142e 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -1172,6 +1172,9 @@ export default function Subscription() {
                   <button
                     onClick={() => autopayMutation.mutate(!subscription.autopay_enabled)}
                     disabled={autopayMutation.isPending}
+                    role="switch"
+                    aria-checked={subscription.autopay_enabled}
+                    aria-label={t('subscription.autopay.title', 'Auto-payment')}
                     className="relative h-7 w-[52px] rounded-full transition-colors duration-300"
                     style={{
                       background: subscription.autopay_enabled ? zone.mainHex : g.textGhost,
diff --git a/src/pages/SubscriptionPurchase.tsx b/src/pages/SubscriptionPurchase.tsx
index 300cd52..a0e483a 100644
--- a/src/pages/SubscriptionPurchase.tsx
+++ b/src/pages/SubscriptionPurchase.tsx
@@ -1238,6 +1238,9 @@ export default function SubscriptionPurchase() {
                               <button
                                 type="button"
                                 onClick={() => setUseCustomDays(!useCustomDays)}
+                                role="switch"
+                                aria-checked={useCustomDays}
+                                aria-label={t('subscription.customDays.title')}
                                 className={`relative h-6 w-10 rounded-full transition-colors ${
                                   useCustomDays ? 'bg-accent-500' : 'bg-dark-600'
                                 }`}
@@ -1346,6 +1349,9 @@ export default function SubscriptionPurchase() {
                               <button
                                 type="button"
                                 onClick={() => setUseCustomTraffic(!useCustomTraffic)}
+                                role="switch"
+                                aria-checked={useCustomTraffic}
+                                aria-label={t('subscription.customTraffic.selectVolume')}
                                 className={`relative h-6 w-10 rounded-full transition-colors ${
                                   useCustomTraffic ? 'bg-accent-500' : 'bg-dark-600'
                                 }`}