fix(material/form-field): allow clicking on floating label (#26110)

* fix(material/form-field): allow clicking on floating label

* fixup! fix(material/form-field): allow clicking on floating label

Author: mmalerba

src/material/form-field/_mdc-text-field-structure-overrides.scss

@@ -20,11 +20,15 @@
     border: none;
   }
 
-  // In order to ensure proper alignment of the floating label, we reset its line-height.
-  // The line-height is not important as the element is absolutely positioned and only has one line
-  // of text.
   .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
+    // In order to ensure proper alignment of the floating label, we reset its line-height.
+    // The line-height is not important as the element is absolutely positioned and only has one
+    // line of text.
     line-height: normal;
+    // This allows users to focus the input by clicking the part of the label above the outline box,
+    // and makes migration from the legacy form-field easier for tests that were depending on
+    // clicking the label to focus the input.
+    pointer-events: all;
   }
 
   // Reset the height that MDC sets on native input elements. We cannot rely on their

src/material/input/input.e2e.spec.ts

@@ -20,7 +20,7 @@ describe('input', () => {
 
     it('should increment when increment button clicked', async () => {
       const input = element(by.id('number-input'));
-      await input.click();
+      await browser.actions().mouseMove(input).click().perform();
 
       const size = await input.getSize();