etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): switch semantics for user-flow toggles

Browse Source 
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).
This commit is contained in:
c0mrade
2026-05-25 23:57:36 +03:00
parent 90888db48c
commit 491f48a331
2 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/Subscription.tsx
View File

@@ -1172,6 +1172,9 @@ export default function Subscription() {
<button <button
onClick={() => autopayMutation.mutate(!subscription.autopay_enabled)} onClick={() => autopayMutation.mutate(!subscription.autopay_enabled)}
disabled={autopayMutation.isPending} 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" className="relative h-7 w-[52px] rounded-full transition-colors duration-300"
style={{ style={{
background: subscription.autopay_enabled ? zone.mainHex : g.textGhost, background: subscription.autopay_enabled ? zone.mainHex : g.textGhost,

6
src/pages/SubscriptionPurchase.tsx
View File

@@ -1238,6 +1238,9 @@ export default function SubscriptionPurchase() {
<button <button
type="button" type="button"
onClick={() => setUseCustomDays(!useCustomDays)} onClick={() => setUseCustomDays(!useCustomDays)}
role="switch"
aria-checked={useCustomDays}
aria-label={t('subscription.customDays.title')}
className={`relative h-6 w-10 rounded-full transition-colors ${ className={`relative h-6 w-10 rounded-full transition-colors ${
useCustomDays ? 'bg-accent-500' : 'bg-dark-600' useCustomDays ? 'bg-accent-500' : 'bg-dark-600'
}`} }`}
@@ -1346,6 +1349,9 @@ export default function SubscriptionPurchase() {
<button <button
type="button" type="button"
onClick={() => setUseCustomTraffic(!useCustomTraffic)} onClick={() => setUseCustomTraffic(!useCustomTraffic)}
role="switch"
aria-checked={useCustomTraffic}
aria-label={t('subscription.customTraffic.selectVolume')}
className={`relative h-6 w-10 rounded-full transition-colors ${ className={`relative h-6 w-10 rounded-full transition-colors ${
useCustomTraffic ? 'bg-accent-500' : 'bg-dark-600' useCustomTraffic ? 'bg-accent-500' : 'bg-dark-600'
}`} }`}