React-dates: Improving UI translations

[KittyGiraudel]

Hello there! 👋

We have started using react-dates at N26 and are very happy with it so far. Since we support 5 languages (English, German, French, Italian and Spanish), we had to work out how to properly translate the user interface (i.e. not just switching the moment locale).

In that process, we have 3 suggestions to make:

1. The README.md states clearly that localisation is one moment.locale call away. Which is true, if we’re talking exclusively about the visual layer since it’s powered almost entirely by moment. However, all labels and visually hidden texts serving accessibility remain in English. At the very least, we recommend adding a clear comment about this, and maybe linking to the documentation of the phrases prop and their default values: https://github.com/airbnb/react-dates/blob/master/src/defaultPhrases.js.

2. ~We understand react-dates is maintained by AirBnB (and most likely for AirBnB), however there are three strings which literally mention “trip”, “check-in” and “check-out”. This is making quite an assumption on why the library is being used. In our case for instance, we use it to define a date range for which to generate a PDF of transactions. Don’t get me wrong, we’re super fine about changing the copy; that’s why there is the phrases prop. However we think the default copy should not make such assumptions.~ (#1171)

https://github.com/airbnb/react-dates/blob/c1eed41383b40ef718ef4e6c9910cd1b98b3751b/src/defaultPhrases.js#L3

https://github.com/airbnb/react-dates/blob/c1eed41383b40ef718ef4e6c9910cd1b98b3751b/src/defaultPhrases.js#L28-L29

1. The use of capitalisation and full-stops in the existing strings seems rather inconsistent and could be consolidated. ~On a similar note, dumb quotes are used instead of proper smart ones.~ (#1168) Admittedly, all of this is a rather minor concern.

If we can help fixing these things, please let us know.

[ljharb]

Indeed, moment handles all localization; translation is internationalization - the two together are needed.

Airbnb supports many languages - if there’s phrases in this repo that aren’t overrideable by props, you can absolutely help by filing a PR to make them so!

As for smart quotes - dumb quotes are never correct in prose, so please do correct those as well :-)

[KittyGiraudel]

Would you accept:

• A pull request to replace existing mentions of “check-in”, “check-out” and “trip” with more encompassing terms?
• A pull request to add a note in the README.md about the need to translate these strings through the phrases prop?

[ljharb]

The latter, certainly. I'm not sure about the former. @majapw?

[gidztech]

I believe the former is really important. We've been using this for a while and we only just noticed that our aria labels included "check-in" and "check-out" for our file search feature. Having something so specific by default is strange. I can understand this being the case originally when the project wasn't open-sourced but at this point, I'd expect suitable defaults.

By changing the defaults now, AirBnb's own website would need to be updated to provide it's specific phrases. But of course, they'd be continuously updating their dependencies anyway.

On top of this, in order to override certain phrases, we have to merge the original from defaultPhrases object with overrides rather than the component dealing with the merge internally.