fix(material/timepicker): adds default timepicker toggle aria-label

Updates Angular Components Timepicker component by creating a
default aria-label to the timepicker toggle if one is not supplied.
This makes the button more accessible and descriptive for screen
readers.

Fix 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" aria-labelledby="mat-mdc-form-field-label-0" matSuffix/>
+        <mat-timepicker-toggle [for]="basicPicker" matSuffix/>
       </mat-form-field>
 
       <p>Value: {{control.value}}</p>

src/material/timepicker/timepicker-toggle.html

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

src/material/timepicker/timepicker-toggle.ts

@@ -67,6 +67,9 @@ export class MatTimepickerToggle<D> {
     alias: 'aria-labelledby',
   });
 
+  /** Default aria-label for the toggle if none is provided. */
+  private readonly defaultAriaLabel = 'Open timepicker options';
+
   /** Whether the toggle button is disabled. */
   readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, {
     transform: booleanAttribute,
@@ -89,4 +92,13 @@ export class MatTimepickerToggle<D> {
       event.stopPropagation();
     }
   }
+
+  /**
+   * Gets the aria-label to use for the toggle button.
+   * Returns the user-provided aria-label if one exists,
+   * otherwise returns the default aria-label using the timepicker's panelId.
+   */
+  getAriaLabel(): string {
+    return this.ariaLabel() || this.defaultAriaLabel;
+  }
 }