fix(material/timepicker): adds aria-labelledby to timepicker toggle

Updates Angular Component Timepicker so the timepicker toggle uses
the aria-labelledby value for the timepicker toggle button to make
it more accessible.

Fixes b/380308482

Author: essjay05

src/dev-app/timepicker/timepicker-demo.html

@@ -11,7 +11,7 @@ <h2>Basic timepicker</h2>
           [matTimepickerMax]="maxControl.value"
           [formControl]="control">
         <mat-timepicker [interval]="intervalControl.value" #basicPicker/>
-        <mat-timepicker-toggle [for]="basicPicker" matSuffix/>
+        <mat-timepicker-toggle [for]="basicPicker" aria-labelledby="mat-mdc-form-field-label-0" matSuffix/>
       </mat-form-field>
 
       <p>Value: {{control.value}}</p>

src/material/timepicker/timepicker-toggle.html

@@ -3,6 +3,7 @@
   type="button"
   aria-haspopup="listbox"
   [attr.aria-label]="ariaLabel()"
+  [attr.aria-labelledby]="ariaLabelledby()"
   [attr.aria-expanded]="timepicker().isOpen()"
   [attr.tabindex]="_isDisabled() ? -1 : tabIndex()"
   [disabled]="_isDisabled()"

src/material/timepicker/timepicker-toggle.ts

@@ -62,6 +62,11 @@ export class MatTimepickerToggle<D> {
     alias: 'aria-label',
   });
 
+  /** Screen-reader labelled by id for the button. */
+  readonly ariaLabelledby = input<string | undefined>(undefined, {
+    alias: 'aria-labelledby',
+  });
+
   /** Whether the toggle button is disabled. */
   readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, {
     transform: booleanAttribute,