Commit 04c598a

committed

fix(material/datepicker): add visible labels to calendar buttons (#31777)

Adds tooltips to the calendar next/previous buttons so that they have visible labels. Fixes #31536. (cherry picked from commit 8010c7c)

1 parent 839f3c1 commit 04c598aCopy full SHA for 04c598a

File tree

-3

lines changed

-3

lines changed

Lines changed: 1 addition & 0 deletions

Lines changed: 2 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -20,15 +20,15 @@`
`20`	`20`
`21`	`21`	`<button matIconButton type="button" class="mat-calendar-previous-button"`
`22`	`22`	`[disabled]="!previousEnabled()" (click)="previousClicked()"`
`23`		`- [attr.aria-label]="prevButtonLabel" disabledInteractive>`
	`23`	`+ [matTooltip]="prevButtonLabel" [attr.aria-label]="prevButtonLabel" disabledInteractive>`
`24`	`24`	`<svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">`
`25`	`25`	`<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>`
`26`	`26`	`</svg>`
`27`	`27`	`</button>`
`28`	`28`
`29`	`29`	`<button matIconButton type="button" class="mat-calendar-next-button"`
`30`	`30`	`[disabled]="!nextEnabled()" (click)="nextClicked()"`
`31`		`- [attr.aria-label]="nextButtonLabel" disabledInteractive>`
	`31`	`+ [matTooltip]="nextButtonLabel" [attr.aria-label]="nextButtonLabel" disabledInteractive>`
`32`	`32`	`<svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">`
`33`	`33`	`<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>`
`34`	`34`	`</svg>`

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,7 @@ import {MatIconButton, MatButton} from '../button';`
`43`	`43`	`import {_IdGenerator, CdkMonitorFocus} from '@angular/cdk/a11y';`
`44`	`44`	`import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';`
`45`	`45`	`import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';`
	`46`	`+import {MatTooltip} from '../tooltip';`
`46`	`47`
`47`	`48`	`/**`
`48`	`49`	`* Possible views for the calendar.`
`@@ -57,7 +58,7 @@ export type MatCalendarView = 'month' \| 'year' \| 'multi-year';`
`57`	`58`	`exportAs: 'matCalendarHeader',`
`58`	`59`	`encapsulation: ViewEncapsulation.None,`
`59`	`60`	`changeDetection: ChangeDetectionStrategy.OnPush,`
`60`		`- imports: [MatButton, MatIconButton],`
	`61`	`+ imports: [MatButton, MatIconButton,MatTooltip],`
`61`	`62`	`})`
`62`	`63`	`export class MatCalendarHeader<D> {`
`63`	`64`	`private _intl = inject(MatDatepickerIntl);`

Comments

(0)