mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
fix(a11y): switch semantics for admin form toggles
Add role=switch + aria-checked + aria-label to 12 ad-hoc toggle buttons across admin create/edit forms (AdminCampaignCreate/Edit, AdminPromocodeCreate, AdminPromoGroupCreate, AdminPromoOfferTemplateEdit, AdminPaymentMethodEdit, AdminTariffCreate) so screen readers announce on/off state (WCAG 4.1.2).
This commit is contained in:
@@ -366,6 +366,9 @@ export default function AdminCampaignCreate() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setIsActive(!isActive)}
|
onClick={() => setIsActive(!isActive)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={isActive}
|
||||||
|
aria-label={t('admin.campaigns.form.active')}
|
||||||
className={`relative h-6 w-11 rounded-full transition-colors ${
|
className={`relative h-6 w-11 rounded-full transition-colors ${
|
||||||
isActive ? 'bg-accent-500' : 'bg-dark-600'
|
isActive ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
|
|||||||
@@ -390,6 +390,9 @@ export default function AdminCampaignEdit() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setIsActive(!isActive)}
|
onClick={() => setIsActive(!isActive)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={isActive}
|
||||||
|
aria-label={t('admin.campaigns.form.active')}
|
||||||
className={`relative h-6 w-11 rounded-full transition-colors ${
|
className={`relative h-6 w-11 rounded-full transition-colors ${
|
||||||
isActive ? 'bg-accent-500' : 'bg-dark-600'
|
isActive ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
|
|||||||
@@ -207,6 +207,9 @@ export default function AdminPaymentMethodEdit() {
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsEnabled(!isEnabled)}
|
onClick={() => setIsEnabled(!isEnabled)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={isEnabled}
|
||||||
|
aria-label={t('admin.paymentMethods.methodEnabled')}
|
||||||
className={`relative h-6 w-11 rounded-full transition-colors ${
|
className={`relative h-6 w-11 rounded-full transition-colors ${
|
||||||
isEnabled ? 'bg-accent-500' : 'bg-dark-600'
|
isEnabled ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
@@ -234,6 +237,8 @@ export default function AdminPaymentMethodEdit() {
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => setOpenUrlDirect(!openUrlDirect)}
|
onClick={() => setOpenUrlDirect(!openUrlDirect)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={openUrlDirect}
|
||||||
className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${
|
className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${
|
||||||
openUrlDirect ? 'bg-accent-500' : 'bg-dark-600'
|
openUrlDirect ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
|
|||||||
@@ -378,6 +378,9 @@ export default function AdminPromoGroupCreate() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setApplyToAddons(!applyToAddons)}
|
onClick={() => setApplyToAddons(!applyToAddons)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={applyToAddons}
|
||||||
|
aria-label={t('admin.promoGroups.form.applyToAddons')}
|
||||||
className={`relative h-6 w-11 rounded-full transition-colors ${
|
className={`relative h-6 w-11 rounded-full transition-colors ${
|
||||||
applyToAddons ? 'bg-accent-500' : 'bg-dark-600'
|
applyToAddons ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
@@ -396,6 +399,9 @@ export default function AdminPromoGroupCreate() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setIsDefault(!isDefault)}
|
onClick={() => setIsDefault(!isDefault)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={isDefault}
|
||||||
|
aria-label={t('admin.promoGroups.form.isDefault')}
|
||||||
className={`relative h-6 w-11 rounded-full transition-colors ${
|
className={`relative h-6 w-11 rounded-full transition-colors ${
|
||||||
isDefault ? 'bg-accent-500' : 'bg-dark-600'
|
isDefault ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
|
|||||||
@@ -304,6 +304,9 @@ export default function AdminPromoOfferTemplateEdit() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setIsActive(!isActive)}
|
onClick={() => setIsActive(!isActive)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={isActive}
|
||||||
|
aria-label={t('admin.promoOffers.form.templateActive')}
|
||||||
className={`relative h-6 w-11 rounded-full transition-colors ${
|
className={`relative h-6 w-11 rounded-full transition-colors ${
|
||||||
isActive ? 'bg-accent-500' : 'bg-dark-600'
|
isActive ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
|
|||||||
@@ -469,6 +469,9 @@ export default function AdminPromocodeCreate() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setIsActive(!isActive)}
|
onClick={() => setIsActive(!isActive)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={isActive}
|
||||||
|
aria-label={t('admin.promocodes.form.active')}
|
||||||
className={`relative h-6 w-10 rounded-full transition-colors ${
|
className={`relative h-6 w-10 rounded-full transition-colors ${
|
||||||
isActive ? 'bg-accent-500' : 'bg-dark-600'
|
isActive ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
@@ -486,6 +489,9 @@ export default function AdminPromocodeCreate() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setFirstPurchaseOnly(!firstPurchaseOnly)}
|
onClick={() => setFirstPurchaseOnly(!firstPurchaseOnly)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={firstPurchaseOnly}
|
||||||
|
aria-label={t('admin.promocodes.form.firstPurchaseOnly')}
|
||||||
className={`relative h-6 w-10 rounded-full transition-colors ${
|
className={`relative h-6 w-10 rounded-full transition-colors ${
|
||||||
firstPurchaseOnly ? 'bg-accent-500' : 'bg-dark-600'
|
firstPurchaseOnly ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
|
|||||||
@@ -855,6 +855,9 @@ export default function AdminTariffCreate() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setTrafficTopupEnabled(!trafficTopupEnabled)}
|
onClick={() => setTrafficTopupEnabled(!trafficTopupEnabled)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={trafficTopupEnabled}
|
||||||
|
aria-label={t('admin.tariffs.extraTrafficTitle')}
|
||||||
className={`relative h-6 w-11 rounded-full transition-colors ${
|
className={`relative h-6 w-11 rounded-full transition-colors ${
|
||||||
trafficTopupEnabled ? 'bg-accent-500' : 'bg-dark-600'
|
trafficTopupEnabled ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
@@ -1117,6 +1120,9 @@ export default function AdminTariffCreate() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setIsActive(!isActive)}
|
onClick={() => setIsActive(!isActive)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={isActive}
|
||||||
|
aria-label={t('admin.tariffs.isActiveLabel')}
|
||||||
className={`relative h-6 w-11 rounded-full transition-colors ${
|
className={`relative h-6 w-11 rounded-full transition-colors ${
|
||||||
isActive ? 'bg-success-500' : 'bg-dark-600'
|
isActive ? 'bg-success-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
@@ -1139,6 +1145,9 @@ export default function AdminTariffCreate() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setShowInGift(!showInGift)}
|
onClick={() => setShowInGift(!showInGift)}
|
||||||
|
role="switch"
|
||||||
|
aria-checked={showInGift}
|
||||||
|
aria-label={t('admin.tariffs.showInGiftLabel')}
|
||||||
className={`relative h-6 w-11 rounded-full transition-colors ${
|
className={`relative h-6 w-11 rounded-full transition-colors ${
|
||||||
showInGift ? 'bg-accent-500' : 'bg-dark-600'
|
showInGift ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
}`}
|
}`}
|
||||||
|
|||||||
Reference in New Issue
Block a user