Datepicker mat-icon-button: Ability to provide unique accessible names for calendar icons

[ramjiseetharaman]

Reproduction:

You can find this issue in the Angular Material documentation in the following link. For some of the examples such as "Comparison Ranges", " Setting the selected date", " Changing the datepicker colors" etc, there are multiple datepickers used. The programmatic label for calendar icon is not unique to Screen readers, since the aria-label is the same for all.

https://material.angular.io/components/datepicker/

Steps to reproduce:

1. Navigate to the Date picker documentation: https://material.angular.io/components/datepicker/
2. Navigate to one of the sections that has multiple date picker fields mentioned above.
3. Run JAWS/VoiceOver/NVDA (any screen reader can be used)
4. Verify whether the calendar icon communicates unique accessible names or provide a way to update it (Issue)

Expected Behavior

There needs to be a way to provide unique labels for the calendar icons, if there are more than one date picker fields used in the page. The aria-label for the calendar icon has a value of "Open calendar". There needs to be an alternate way for Screen readers users to differentiate the calendar icon associations to the input field. Using the component as is in the application, there is no means to update the aria-label for the calendar icons.

Actual Behavior

If there are multiple date picker fields, Screen readers will render the same redundant labels making it difficult for Screen readers to differentiate. This is because the aria-label for all the calendar icons are the same.

Environment

• Angular: 10.2.1
• CDK/Material: 10.2.1
• Browser(s): Chrome
• Operating System: Windows/Mac

[jelbourn]

As a workaround, you should be able to create a directive that provides a new MatDatepickerIntl with the custom label for each instance, something very roughly like

@Directive({
  selector: '[calendarToggleLabel]',
  providers: [{provide: MatDatepickerIntl, useFactory: (intl: MatDatepickerIntl) => {
    // return a new intl object that delegates to Intl for everything but the label
  }}],
})
export class CalendarToggleLabel {
  @Input('calendarToggleLabel') label: string;
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}