bug(Datepicker): Hidden calendar button not in the selected language

[JaDub3]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Description

When the locale changes for the datepicker, the calendar switch to the appropriate language. But the hidden 'Close calendar' button stay in english. This is an issue for accessibility, especially for reader application.

Reproduction

Steps to reproduce:

1. Change locale to French
2. Open the Datepicker
3. Press 'TAB' until the hidden button appear

Expected Behavior

The label and content of the button should be in the language specified by the locale.

Actual Behavior

The hidden button stay in english

Environment

• Angular: 11+
• CDK/Material: Datepicker
• Browser(s): Chrome, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[zarend]

Since the Close calendar string comes from the MatDatepickerIntl and is not hard-coded, this seems to be an issue with the demo, rather than the date picker itself.

[JaDub3]

How can we change it then? I showed a screenshot of the demo in the ticket, but I have the same issue in my code.

…

Le 10 juin 2022 à 12:52, Zach Arend ***@***.***> a écrit :  Since the Close calendar string comes from the MatDatepickerIntl and is not hard-coded, this seems to be an issue with the demo, rather than the date picker itself. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[zarend]

This demo needs to implement proving a different value for MatDatepickerIntl because that is where the "Close calendar" string comes from. Here are roughly the steps that need to happen to implement this in the demo.

1. extend MatDatepickerIntl with French strings

class MatDatepickerIntlFr extends MatDatepickerIntl {
   closeCalendar: "
Fermer le calendrier"
  // ...
}

2. Inject MatDatepickerIntl into the example.
3. When clicking "Dynamically switch to French", inject MatDatepickerIntlFr instead

Community contributions are welcome :).

If your code only needs french and doesn't need English, you can provide MatDatepickerIntlFr in your code. there would be no need to change it dynmically. The code would look something like:

provide: MatDatepickerIntl, useClass: MatDatepickerIntlFr

[JaDub3]

Thank you for your answer. I’m not to sure how you can change the injected value on the click event, but I got the general. For now, I solved my issue by providing a factory for the overided class who subscribe on a language change event to switch label. But I must admit, I’m curious about the ‘When clicking "Dynamically switch to French", inject MatDatepickerIntlFrinstead’? How do you change the injector dynamically? I did not see any function to do so within the DateAdapter?

…

Le 17 juin 2022 à 13:21, Zach Arend ***@***.***> a écrit :  This demo needs to implement proving a different value for MatDatepickerIntl because that is where the "Close calendar" string comes from. Here are roughly the steps that need to happen to implement this in the demo. extend MatDatepickerIntl with French strings class MatDatepickerIntlFr extends MatDatepickerIntl { closeCalendar: " Fermer le calendrier" // ... } Inject MatDatepickerIntl into the example. When clicking "Dynamically switch to French", inject MatDatepickerIntlFr instead Community contributions are welcome :). If your code only needs french and doesn't need English, you can provide MatDatepickerIntlFr in your code. there would be no need to change it dynmically. The code would look something like: provide: MatDatepickerIntl, useClass: MatDatepickerIntlFr — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[zarend]

I believe this should be doable with a factory provider. Provide the locale as a dependency to the factory provider. The factory returns an instance of either MatDatepickerIntl or MatDatepickerIntlFr depending on what the locale is.

[maykonpacheco]

I will try solve.

[GKosheev]

Hey @maykonpacheco, are you still working on that issue?

[maykonpacheco]

@GKosheev yes, do you have any suggestion?

[AncelHernandez]

Talked though this with @amysorto , will be improving the example.

[AncelHernandez]

Just an update on this, seems like there needs to be changes done on the to the datepicker-base.ts file. When locale updates happen, the class does not re-evaluate the value of the close calendar button. I think moving the initialization of the _closeButtonText value from the constructor to ngOnInit would solve this issue since it would reevaluate every time the calendar content is rendered. But maybe we could listen in to the intl.changes observable and evaluate those values when that emits.

[amysorto]

You can do intl.changes.next() after changing the value of the close button text so that the service knows something needs to be updated (MatDatepickerIntl docs).

[Gua00va]

Is this issue still open? I would like to work on this.

[zarend]

Hello @Gua00va ,

I believe this issue is still open, and you are welcome to work on it.

-Zach

[Aadi1605]

I believe this issue is still open, and you are welcome to work on it.

[piyushsrvastava]

i want to work on this issues please assign me issue

[piyushsrvastava]

function setCloseButtonLocale(locale) {
const closeButton = document.querySelector('.close-button');

switch (locale) {
case 'en-US':
closeButton.innerText = 'Close calendar';
break;
case 'fr-FR':
closeButton.innerText = 'Fermer le calendrier';
break;
// add additional cases for other supported locales
default:
closeButton.innerText = 'Close calendar';
}
}
you are using this code

[hamzajazyri]

@piyushsrvastava, I wanted to bring to your attention that a pull request has already been submitted. #26738

[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.}