0
<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker1" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

With this markup ... the aria-label for the toggle button will default to "Open Calendar" ... I have tried setting [attr.aria-label]="'Selected date is ' + dynamicText" on mat-datepicker-toggle and that does not pass to the button child element, but it does pass to the mat-datepicker-toggle element itself.

ma77c
  • 1,052
  • 14
  • 31
  • I could be wrong as not used Angular in years but is it not `[attr.aria-label]` to add aria labels? It isn't clear whether the label is generated in the outputted HTML from the way you phrased it. Is the problem that the `aria-label` is generated but ignored or is it that it is not generated at all? – GrahamTheDev Jul 22 '20 at 17:25
  • @GrahamRitchie actually you are correct and that does pass the aria-label to the mat-datepicker-toggle element itself, but does not pass to the button child element. I have updated the question to reflect this. – ma77c Jul 22 '20 at 18:22
  • So does the outputted HTML have the aria on the container and then angular material inserts a button within it via code? If that is the case I would guess you need to write some custom function to extend it as I wouldn't imagine you have access to that via exposed parameters. Could be wrong, as i said years since used Angular. Possibly could be added post render as another solution? – GrahamTheDev Jul 22 '20 at 18:41
  • Just eye-balling here. Can you try ````[attr.aria-label]="'Selected date is ' + dynamicText"```` on the ```````` ?? – Srikar Phani Kumar M May 12 '21 at 15:01

1 Answers1

0

To apply dynamic aria-label you can either use [aria-label] or [attr.aria-label]. Both of these vary for different mat-input types. You can read more about it here.

If you add [attr.aria-label] to mat-datepicker-toggler it will apply dynamic aria-label to only this tag. To add dynamic aria-label to the child button element inside it you'll have to use typescript.

You can do that by writing this code in the .ts file of your component within ngAfterViewInit as follows:

datepicker-component.html

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker1" [formControl]="date" />
  <mat-datepicker-toggle
    matSuffix
    [for]="picker1"
    attr.aria-label="{{ 'Selected date is ' + date.value }}"
  ></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

datepicker-component.ts

date = new FormControl(moment([2017, 0, 1]));

ngAfterViewInit(): void {
    const matTogglerChild = document.querySelector(
      'mat-datepicker-toggle'
    )?.firstElementChild;
    const ariaLabelText = 'Selected Date is ' + moment(this.date.value).format('MM/DD/YYYY');
    matTogglerChild?.setAttribute('aria-label', ariaLabelText);
}

So, in this above code, I get the immediate child of mat-datepicker-toggler and then assign it a new aria-label. You can do the same for the other elements inside the mat-datepicker. I've implemented this inside ngAfterViewInit because the view doesn't get rendered in ngOnInit, so it'll return undefined.

I hope this helps you. Let me know if you need any more clarifications.

Yogesh
  • 366
  • 2
  • 16