Merge pull request #2009 from nqst/clickable-checkbox-labels

Make toggle switch labels clickable

Author: andyra

app/assets/stylesheets/utilities.css

@@ -116,6 +116,8 @@
     pointer-events: none;
   }
 
+  .cursor-pointer { cursor: pointer; }
+
   /* Padding */
   .pad { padding: var(--block-space) var(--inline-space); }
   .pad-double { padding: var(--block-space-double) var(--inline-space-double); }

app/views/boards/edit/_publication.html.erb

@@ -6,17 +6,17 @@
 
   <% if board.published? %>
     <div class="border-radius pad fill-selected">
-      <div class="flex-inline center justify-between gap">
-        <span class="txt-large"><%= icon_tag "lock" %></span>
-        <label class="switch flex align-center justify-between">
-          <%= form_with url: board_publication_path(board), method: :delete, data: { controller: "form" } do |form| %>
+      <%= form_with url: board_publication_path(board), method: :delete, class: "flex-inline center justify-between gap", data: { controller: "form" } do |form| %>
+        <label class="flex gap cursor-pointer">
+          <span class="txt-large"><%= icon_tag "lock" %></span>
+          <span class="switch flex align-center justify-between">
             <%= form.check_box :published, class: "switch__input", checked: true, data: { action: "change->form#submit" }, disabled: !Current.user.can_administer_board?(@board) %>
             <span class="switch__btn round"></span>
-            <span class="for-screen-reader">Turn off the public link</span>
-          <% end %>
+          </span>
+          <span class="for-screen-reader">Turn off the public link</span>
         </label>
-        <span class="txt-large"><%= icon_tag "world" %></span>
-      </div>
+        <span class="txt-large" aria-hidden="true"><%= icon_tag "world" %></span>
+      <% end %>
 
       <div class="flex align-center gap-half margin-block">
         <%= text_field_tag :publication_url, published_board_url(board), readonly: true, class: "full-width input fill-white" %>
@@ -40,17 +40,17 @@
     </div>
   <% else %>
     <div class="border-radius pad fill-shade">
-      <div class="flex-inline center justify-between gap">
-        <span class="txt-large"><%= icon_tag "lock" %></span>
-        <label class="switch flex align-center justify-between">
-          <%= form_with url: board_publication_path(board), method: :post, data: { controller: "form" } do |form| %>
+      <%= form_with url: board_publication_path(board), method: :post, class: "flex-inline center justify-between gap", data: { controller: "form" } do |form| %>
+        <span class="txt-large" aria-hidden="true"><%= icon_tag "lock" %></span>
+        <label class="flex gap cursor-pointer">
+          <span class="switch flex align-center justify-between">
             <%= form.check_box :published, class: "switch__input", checked: false, data: { action: "change->form#submit" }, disabled: !Current.user.can_administer_board?(@board) %>
             <span class="switch__btn round"></span>
-            <span class="for-screen-reader">Turn on the public link</span>
-          <% end %>
+          </span>
+          <span class="txt-large"><%= icon_tag "world" %></span>
+          <span class="for-screen-reader">Turn on the public link</span>
         </label>
-        <span class="txt-large"><%= icon_tag "world" %></span>
-      </div>
+      <% end %>
     </div>
   <% end %>
 <% end %>

app/views/webhooks/edit.html.erb

@@ -15,7 +15,7 @@
     <div class="flex flex-column gap-half">
       <%= form.label :actions do %>
         <strong>Events</strong><br>
-        <p class="margin-none txt-x-small txt-subtle">Trigger a call to the Payload URL when these things occur:</p>
+        <p class="margin-none txt-x-small txt-subtle">Trigger a call to the Payload URL when:</p>
       <% end %>
       <%= render "webhooks/form/actions", form: form %>
     </div>

app/views/webhooks/form/_actions.html.erb

@@ -4,13 +4,14 @@
         webhook_action_options,
         :first,
         :last do |item| %>
-    <li class="list-style-none margin-none flex align-center gap">
-      <label class="switch toggler__visible-when-off flex-item-no-shrink txt-x-small">
-        <%= item.check_box(class: "switch__input") %>
-        <span class="switch__btn round"></span>
-        <span class="for-screen-reader"><%= item.text %></span>
+    <li class="list-style-none margin-none">
+      <label class="toggler__visible-when-off flex align-center gap cursor-pointer">
+        <span class="switch txt-x-small flex-item-no-shrink">
+          <%= item.check_box(class: "switch__input") %>
+          <span class="switch__btn round"></span>
+        </span>
+        <span class="min-width"><%= item.text %></span>
       </label>
-      <span><%= item.text %></span>
     </li>
   <% end %>
 </ul>

app/views/webhooks/new.html.erb

@@ -31,7 +31,7 @@
     <div class="flex flex-column gap-half">
       <%= form.label :actions do %>
         <strong>Events</strong><br>
-        <p class="margin-none txt-x-small txt-subtle">Trigger a call to the Payload URL when these things occur:</p>
+        <p class="margin-none txt-x-small txt-subtle">Trigger a call to the Payload URL when:</p>
       <% end %>
       <%= render "webhooks/form/actions", form: form %>
     </div>