diff --git a/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/email-notification.tsx b/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/email-notification.tsx index 04f7578d3f264..a94f484eb097d 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/email-notification.tsx +++ b/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/email-notification.tsx @@ -44,6 +44,7 @@ export default function EmailNotification( { setEnableEmailNotification( isEnabled ); } } checked={ enableEmailNotification } + className="notification-settings__toggle-control" />
diff --git a/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/mobile-push-notification.tsx b/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/mobile-push-notification.tsx index 08e9c3ee5c6d8..caead20e2483b 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/mobile-push-notification.tsx +++ b/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/mobile-push-notification.tsx @@ -29,6 +29,7 @@ export default function MobilePushNotification( { setEnableMobileNotification( isEnabled ); } } checked={ enableMobileNotification } + className="notification-settings__toggle-control" />
diff --git a/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/sms-notification.tsx b/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/sms-notification.tsx index e31a157f153c1..a569b82c60a17 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/sms-notification.tsx +++ b/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/form-content/sms-notification.tsx @@ -39,6 +39,7 @@ export default function SMSNotification( { } onChange={ handleToggleClick } checked={ enableSMSNotification } + className="notification-settings__toggle-control" />
diff --git a/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/style.scss b/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/style.scss index 9bd19071f7f26..d6ee155a4aa25 100644 --- a/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/style.scss +++ b/client/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/notification-settings/style.scss @@ -151,3 +151,14 @@ margin-right: 7px; } } + +// Visually hide the toggle control label by positioning +// it far off-screen, making it effectively invisible. +// It will be used by screen readers +.notification-settings__toggle-control label { + position: absolute; + left: -9999px; + width: 1px; + height: 1px; + overflow: hidden; +}