Make comparison toggle label clickable

Switches to use an actual label instead of an adjacent span.

PiperOrigin-RevId: 242632898

Author: Googler

angular_components/lib/src/material_datepicker/comparison_range_editor.html

@@ -4,11 +4,8 @@
  BSD-style license that can be found in the LICENSE file.
 -->
 <div class="comparison-toggle-section">
-  <span class="compare-header">
-    {{comparisonHeaderMsg}}
-  </span>
   <material-toggle class="comparison-toggle"
-                   [ariaLabel]="comparisonHeaderMsg"
+                   [label]="comparisonHeaderMsg"
                    [disabled]="!model.comparisonSupported"
                    [(checked)]="comparisonEnabled">
   </material-toggle>

angular_components/lib/src/material_datepicker/comparison_range_editor.scss

@@ -21,6 +21,7 @@
 
 .comparison-toggle {
   display: inline-flex;
+  width: 100%;
 }
 
 .comparison-option-dropdown {