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

* 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

* 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

* refactor(material/timepicker): fix lint error

Updates previous fix to fix lint error.

* build(material/timepicker): updates api goldens

Ran command to update api goldens.

* refactor(material/timepicker): adds check for aria-labelledby for override

Updates previous fix which implements a default aria-label if no custom
aria-label is provided to where it checks if an aria-lablledby value is
provided and uses the aria-labelledby value if available. If not it will
check for a custom aria-label and if that is not provided it will default
to the generic aria-label value.

Author: essjay05

src/material/timepicker/timepicker-toggle.html

@@ -2,7 +2,8 @@
   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()"
   [disabled]="_isDisabled()"

src/material/timepicker/timepicker-toggle.ts

@@ -62,6 +62,14 @@ export class MatTimepickerToggle<D> {
     alias: 'aria-label',
   });
 
+  /** Screen-reader labelled by id for the button. */
+  readonly ariaLabelledby = input<string | undefined>(undefined, {
+    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,
@@ -84,4 +92,12 @@ export class MatTimepickerToggle<D> {
       event.stopPropagation();
     }
   }
+
+  /**
+   * Checks for ariaLabelledby and if empty uses custom
+   * aria-label or defaultAriaLabel if neither is provided.
+   */
+  getAriaLabel(): string | null {
+    return this.ariaLabelledby() ? null : this.ariaLabel() || this._defaultAriaLabel;
+  }
 }

tools/public_api_guard/material/timepicker.md

@@ -124,15 +124,17 @@ export interface MatTimepickerSelected<D> {
 // @public
 export class MatTimepickerToggle<D> {
     readonly ariaLabel: InputSignal<string | undefined>;
+    readonly ariaLabelledby: InputSignal<string | undefined>;
     readonly disabled: InputSignalWithTransform<boolean, unknown>;
     readonly disableRipple: InputSignalWithTransform<boolean, unknown>;
+    getAriaLabel(): string | null;
     // (undocumented)
     protected _isDisabled: Signal<boolean>;
     protected _open(event: Event): void;
     readonly tabIndex: InputSignal<number | null>;
     readonly timepicker: InputSignal<MatTimepicker<D>>;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTimepickerToggle<any>, "mat-timepicker-toggle", ["matTimepickerToggle"], { "timepicker": { "alias": "for"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; }, {}, never, ["[matTimepickerToggleIcon]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTimepickerToggle<any>, "mat-timepicker-toggle", ["matTimepickerToggle"], { "timepicker": { "alias": "for"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; }, {}, never, ["[matTimepickerToggleIcon]"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTimepickerToggle<any>, never>;
 }