Merge pull request #5177 from schalkneethling/sprints-issue-704-canno…

…t-select-terms-checkbox-via-label Bug 1490727, sprints/704, cannot check terms checkbox with field label
mdn · Jan 9, 2019 · dd08b4a · dd08b4a
2 parents 72bca94 + a63224f
commit dd08b4a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/kuma/payments/jinja2/payments/includes/payments-form.html b/kuma/payments/jinja2/payments/includes/payments-form.html
@@ -45,21 +45,15 @@
         <div id="recurring-confirmation-container" {% if not show_checkbox %}class="hidden"{% endif %}>
             <div class="recurring-payment-confirmation">
                 <label for="{{form.accept_checkbox.id_for_label}}">
-                    <span class="offscreen">
+                    {{form.accept_checkbox}}
+                    <div class="control-indicator"></div>
+                    <span class="legal-copy">
                         By clicking this button, I authorize Mozilla to charge
                         this payment method <span data-dynamic-amount>$8</span>
                         each month, according to the <a href="{{ url('payment_terms') }}">Payment Terms</a>, until
                         I cancel my subscription.
                     </span>
-                    {{form.accept_checkbox}}
-                    <div class="control-indicator"></div>
                 </label>
-                <span class="legal-copy" aria-hidden="true">
-                    By clicking this button, I authorize Mozilla to charge
-                    this payment method <span data-dynamic-amount>$8</span>
-                    each month, according to the <a href="{{ url('payment_terms') }}">Payment Terms</a>, until
-                    I cancel my subscription.
-                </span>
             </div>
         </div>
 

diff --git a/kuma/static/js/components/payments/payments-handler.js b/kuma/static/js/components/payments/payments-handler.js
@@ -256,7 +256,7 @@
         && isPopoverBanner
             ? '/month'
             : '';
-        amountToUpdate[2].textContent = newValue;
+        amountToUpdate[1].textContent = newValue;
     }
 
     /**

diff --git a/kuma/static/styles/components/payments/form.scss b/kuma/static/styles/components/payments/form.scss
@@ -15,13 +15,14 @@
     }
 
     .legal-copy {
+        display: inline-block;
         font-size: 12px;
         font-weight: normal;
         letter-spacing: .1px;
         line-height: 1.35;
         margin-bottom: 18px;
 
-        @media #{$mq-small-desktop-and-up} {
+        @media #{$mq-large-desktop-and-up} {
             text-align: left;
         }
 
@@ -37,6 +38,14 @@
         display: flex;
         position: relative;
 
+        .legal-copy {
+            max-width: 370px;
+
+            @media #{$mq-large-desktop-and-up} {
+                max-width: 420px;
+            }
+        }
+
         .errorlist {
             bottom: 0;
             font-size: 12px;
@@ -68,13 +77,15 @@
         }
 
         .control-indicator {
+            display: inline-block;
             border: 3px solid $text-color;
             border-radius: 4px;
             box-sizing: border-box;
             flex-shrink: 0;
             height: 28px;
             margin-right: 6px;
             width: 28px;
+            vertical-align: top;
 
             &:before {
                 border: 2px solid #fff;