From e8a018ba6d4a44bde88436551500d446dcd44902 Mon Sep 17 00:00:00 2001
From: Sneha Mishra <33183263+Tlazypanda@users.noreply.github.com>
Date: Fri, 12 Jun 2020 02:29:17 +0530
Subject: [PATCH] improve accessibility of notifications settings (#7995)

---
 app/views/users/settings.html.erb | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/views/users/settings.html.erb b/app/views/users/settings.html.erb
index 93d5ef1e93..7cc2c467e1 100644
--- a/app/views/users/settings.html.erb
+++ b/app/views/users/settings.html.erb
@@ -7,6 +7,7 @@
     <span>Do you want to be notified by email for comments on your posts? </span>
     <span>
     <label class="switch">
+      <p> Notification switch </p>
       <input type="checkbox" name="notify-comment-direct:false" <% unless UserTag.exists?(current_user.id, 'notify-comment-direct:false') %>checked<% end %>>
       <span class="slider round"></span>
     </label>
@@ -20,6 +21,7 @@
     <span>Do you want to be notified by email for likes on your posts? </span>
     <span>
     <label class="switch">
+      <p> Notification switch </p>
       <input type="checkbox" name="notify-likes-direct:false" <% unless UserTag.exists?(current_user.id, 'notify-likes-direct:false') %>checked<% end %>>
       <span class="slider round"></span>
     </label>
@@ -33,6 +35,7 @@
     <span>Do you want to be notified by email for comments on all posts you've commented on? </span>
     <span>
     <label class="switch">
+      <p> Notification switch </p>
       <input type="checkbox" name="notify-comment-indirect:false" <% unless UserTag.exists?(current_user.id, 'notify-comment-indirect:false') %>checked<% end %>>
       <span class="slider round"></span>
     </label>
@@ -47,6 +50,7 @@
     <span>Do you want to be notified by email for moderation emails? </span>
     <span>
     <label class="switch">
+      <p> Notification switch </p>
       <input type="checkbox" name="no-moderation-emails" <% unless UserTag.exists?(current_user.id, 'no-moderation-emails') %>checked<% end %>>
       <span class="slider round"></span>
     </label>
@@ -62,6 +66,7 @@
     <span>Do you want to receive customized digest weekly?</span>
     <span>
     <label style=" vertical-align: middle;" class="switch">
+      <p> Notification switch </p>
       <input type="checkbox" name="digest:weekly" <% if UserTag.exists?(current_user.id, 'digest:weekly') %>checked<% end %>>
       <span class="slider round"></span>
     </label>
@@ -75,6 +80,7 @@
     <span>Do you want to receive customized digest daily?</span>
     <span>
     <label style=" vertical-align: middle;" class="switch">
+      <p> Notification switch </p>
       <input type="checkbox" name="digest:daily" <% if UserTag.exists?(current_user.id, 'digest:daily') %>checked<% end %>>
       <span class="slider round"></span>
     </label>
@@ -88,6 +94,7 @@
     <span>Do you want to receive browser notification when you are mentioned?</span>
     <span>
     <label style=" vertical-align: middle;" class="switch">
+      <p> Notification switch </p>
       <input type="checkbox" name="notifications:mentioned" <% if UserTag.exists?(current_user.id, 'notifications:mentioned') %>checked<% end %>>
       <span class="slider round"></span>
     </label>
@@ -101,6 +108,7 @@
     <span>Do you want to receive browser notification for all ?</span>
     <span>
     <label style=" vertical-align: middle;" class="switch">
+      <p> Notification switch </p>
       <input type="checkbox" name="notifications:all" <% if UserTag.exists?(current_user.id, 'notifications:all') %>checked<% end %>>
       <span class="slider round"></span>
     </label>
@@ -114,6 +122,7 @@
     <span>Do you want to receive browser notification when someone likes your work?</span>
     <span>
     <label style=" vertical-align: middle;" class="switch">
+      <p> Notification switch </p>
       <input type="checkbox" name="notifications:like" <% if UserTag.exists?(current_user.id, 'notifications:like') %>checked<% end %>>
       <span class="slider round"></span>
     </label>
@@ -191,7 +200,7 @@
 
   }
 
-  .switch input {display:none;}
+  .switch input,p {display:none;}
 
   .slider {
     position: absolute;