refactor(material-experimental/mdc-form-field): align label setup with non-MDC version (#24339)

Aligns the floating label setup of the MDC-based form field with the non-MDC version for better accessibility and to allow for easier customization. Includes:
* Moving the required asterisk into its own element.
* Reducing the specificity of the label typography.

Author: crisbeto

src/material-experimental/mdc-chips/chip-grid.spec.ts

@@ -694,15 +694,17 @@ describe('MDC-based MatChipGrid', () => {
     });
 
     it('should set an asterisk after the placeholder if the control is required', () => {
-      let requiredMarker = fixture.debugElement.query(By.css('.mdc-floating-label--required'))!;
+      let requiredMarker = fixture.debugElement.query(
+        By.css('.mat-mdc-form-field-required-marker'),
+      )!;
       expect(requiredMarker)
         .withContext(`Expected placeholder not to have an asterisk, as control was not required.`)
         .toBeNull();
 
       fixture.componentInstance.chipGrid.required = true;
       fixture.detectChanges();
 
-      requiredMarker = fixture.debugElement.query(By.css('.mdc-floating-label--required'))!;
+      requiredMarker = fixture.debugElement.query(By.css('.mat-mdc-form-field-required-marker'))!;
       expect(requiredMarker)
         .not.withContext(`Expected placeholder to have an asterisk, as control was required.`)
         .toBeNull();
@@ -714,7 +716,9 @@ describe('MDC-based MatChipGrid', () => {
       fixture.componentInstance.control = new FormControl(undefined, [Validators.required]);
       fixture.detectChanges();
 
-      expect(fixture.nativeElement.querySelector('.mdc-floating-label--required')).toBeTruthy();
+      expect(
+        fixture.nativeElement.querySelector('.mat-mdc-form-field-required-marker'),
+      ).toBeTruthy();
     });
 
     it('should blur the form field when the active chip is blurred', fakeAsync(() => {

src/material-experimental/mdc-form-field/_form-field-density.scss

@@ -77,7 +77,7 @@
   // on whether a textarea is used. This is not possible in our implementation of the
   // form-field because we do not know what type of form-field control is set up. Hence
   // we always use a fixed position for the label. This does not have any implications.
-  .mat-mdc-form-field .mat-mdc-text-field-wrapper .mdc-floating-label {
+  .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-floating-label {
     top: math.div($height, 2);
   }
 
@@ -107,7 +107,7 @@
     // Update the spacing for filled form fields to account for the hidden floating label.
     @include _infix-vertical-spacing-filled(
           $no-label-padding, $no-label-padding);
-    .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mdc-floating-label {
+    .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
         display: none;
     }
   }

src/material-experimental/mdc-form-field/_form-field-theme.scss

@@ -76,7 +76,7 @@
     // shows `body1` for text fields though, so we manually override the typography.
     // Note: Form controls inherit the typography from the parent form field.
     .mat-mdc-form-field,
-    .mat-mdc-form-field .mdc-floating-label {
+    .mat-mdc-floating-label {
       @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
 

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

@@ -20,7 +20,7 @@
   // 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 .mdc-floating-label.mdc-floating-label {
+  .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
     line-height: normal;
   }
 
@@ -95,7 +95,7 @@
   // the notched outline container, and already applies a specific horizontal spacing which
   // we do not want to overwrite. *Note*: We need to have increased specificity for this
   // override because the `right` property will be set with higher specificity in RTL mode.
-  .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mdc-floating-label {
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mat-mdc-floating-label {
     left: auto;
     right: auto;
   }

src/material-experimental/mdc-form-field/directives/floating-label.ts

@@ -25,16 +25,13 @@ import {ponyfill} from '@material/dom';
 @Directive({
   selector: 'label[matFormFieldFloatingLabel]',
   host: {
-    'class': 'mdc-floating-label',
-    '[class.mdc-floating-label--required]': 'required',
+    'class': 'mdc-floating-label mat-mdc-floating-label',
     '[class.mdc-floating-label--float-above]': 'floating',
   },
 })
 export class MatFormFieldFloatingLabel {
   /** Whether the label is floating. */
   @Input() floating: boolean = false;
-  /** Whether the label is required. */
-  @Input() required: boolean = false;
 
   constructor(private _elementRef: ElementRef) {}
 

src/material-experimental/mdc-form-field/form-field.html

@@ -16,14 +16,22 @@
   -->
   <label matFormFieldFloatingLabel
          [floating]="_shouldLabelFloat()"
-         [required]="!hideRequiredMarker && _control.required"
          *ngIf="_hasFloatingLabel()"
          (cdkObserveContent)="_refreshOutlineNotchWidth()"
          [cdkObserveContentDisabled]="!_hasOutline()"
          [id]="_labelId"
          [attr.for]="_control.id"
          [attr.aria-owns]="_control.id">
     <ng-content select="mat-label"></ng-content>
+    <!--
+      We set the required marker as a separate element, in order to make it easier to target if
+      apps want to override it and to be able to set `aria-hidden` so that screen readers don't
+      pick it up.
+     -->
+    <span
+      *ngIf="!hideRequiredMarker && _control.required"
+      aria-hidden="true"
+      class="mat-mdc-form-field-required-marker mdc-floating-label--required"></span>
   </label>
 </ng-template>
 

src/material-experimental/mdc-input/input.spec.ts

@@ -342,7 +342,7 @@ describe('MatMdcInput without forms', () => {
     const label = fixture.debugElement.query(By.css('label'))!;
     expect(label).not.toBeNull();
     expect(label.nativeElement.textContent).toBe('hello');
-    expect(label.nativeElement.classList).toContain('mdc-floating-label--required');
+    expect(label.nativeElement.querySelector('.mat-mdc-form-field-required-marker')).toBeTruthy();
   }));
 
   it('should show the required star when using a FormControl', fakeAsync(() => {
@@ -352,7 +352,7 @@ describe('MatMdcInput without forms', () => {
     const label = fixture.debugElement.query(By.css('label'))!;
     expect(label).not.toBeNull();
     expect(label.nativeElement.textContent).toBe('Hello');
-    expect(label.nativeElement.classList).toContain('mdc-floating-label--required');
+    expect(label.nativeElement.querySelector('.mat-mdc-form-field-required-marker')).toBeTruthy();
   }));
 
   it('should not hide the required star if input is disabled', () => {
@@ -364,7 +364,7 @@ describe('MatMdcInput without forms', () => {
     const label = fixture.debugElement.query(By.css('label'))!;
     expect(label).not.toBeNull();
     expect(label.nativeElement.textContent).toBe('hello');
-    expect(label.nativeElement.classList).toContain('mdc-floating-label--required');
+    expect(label.nativeElement.querySelector('.mat-mdc-form-field-required-marker')).toBeTruthy();
   });
 
   it('hide label required star when set to hide the required marker', fakeAsync(() => {
@@ -373,13 +373,13 @@ describe('MatMdcInput without forms', () => {
 
     const label = fixture.debugElement.query(By.css('label'))!;
     expect(label).not.toBeNull();
-    expect(label.nativeElement.classList).toContain('mdc-floating-label--required');
+    expect(label.nativeElement.querySelector('.mat-mdc-form-field-required-marker')).toBeTruthy();
     expect(label.nativeElement.textContent).toBe('hello');
 
     fixture.componentInstance.hideRequiredMarker = true;
     fixture.detectChanges();
 
-    expect(label.nativeElement.classList).not.toContain('mdc-floating-label--required');
+    expect(label.nativeElement.querySelector('.mat-mdc-form-field-required-marker')).toBeFalsy();
     expect(label.nativeElement.textContent).toBe('hello');
   }));
 

src/material-experimental/mdc-select/select.scss

@@ -142,7 +142,7 @@ $scale: 0.75 !default;
 // container. Below are the styles to account for the select arrow icon at the end.
 .mat-mdc-form-field-type-mat-select {
   &.mat-form-field-appearance-fill {
-    .mdc-floating-label {
+    .mat-mdc-floating-label {
       max-width: calc(100% - #{$mat-select-placeholder-arrow-space});
     }
 

src/material-experimental/mdc-select/select.spec.ts

@@ -2142,17 +2142,16 @@ describe('MDC-based MatSelect', () => {
       it('should set an asterisk after the label if control is required', fakeAsync(() => {
         const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label');
 
-        expect(label.classList).not.toContain(
-          'mdc-floating-label--required',
-          `Expected label not to have an asterisk, as control was not required.`,
-        );
+        expect(label.querySelector('.mat-mdc-form-field-required-marker'))
+          .withContext(`Expected label not to have an asterisk, as control was not required.`)
+          .toBeFalsy();
 
         fixture.componentInstance.isRequired = true;
         fixture.detectChanges();
 
-        expect(label.classList)
+        expect(label.querySelector('.mat-mdc-form-field-required-marker'))
           .withContext(`Expected label to have an asterisk, as control was required.`)
-          .toContain('mdc-floating-label--required');
+          .toBeTruthy();
       }));
     });
 
@@ -2975,7 +2974,7 @@ describe('MDC-based MatSelect', () => {
 
     it('should set an asterisk after the label if the FormControl is required', fakeAsync(() => {
       const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label');
-      expect(label.classList).toContain('mdc-floating-label--required');
+      expect(label.querySelector('.mat-mdc-form-field-required-marker')).toBeTruthy();
     }));
   });