Accessibility: translate internal component labels

[RasmusKjeldgaard]

Which issue does this PR close?

This PR closes #3694 closes #942

What is the new behavior?

Component labels are translated with newly added TranslationService. Translations are simple key-value pairs for ease of use, and because we intentionally want to bake in translations instead of handing over the burden to projects and i18n tooling.

Scoping

• Setting translation from locale only happens on initialization right now.
• Currently no way to register own translation or overwrite existing translation

Does this PR introduce a breaking change?

• Yes
• No

Are there any additional context?

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Reminders

• Make sure you have implemented tests following the guidelines in: "The good: Test".
• Make sure you have updated the cookbook with examples and showcases (for bug fixes, enhancements & new components).

Review

• Determine if your changes are a fix, feature or breaking-change, and add the matching label to your PR. If it is tooling, dependency updates or similar, add ignore-for-release.
• Do a self-review.
• Request that the changes are code-reviewed
• Request that the changes are UX reviewed (only necessary if your PR introduces visual changes)

When the pull request has been approved it will be merged to develop by Team Kirby.

[Fuzzy3]

Really good reflections in your draft notes ! I don't think there would be a more clean way of handling translations than this, for such a small set of translations. let's not bring out the big hammer and do reactiveness before it is actually an identified need. good PR, great scope ! ❤️

[jakobe]

Great work, Raz 👌🏻

I like the scoping you've done, we can always later add support for changes to the locale 👍🏻

Maybe we can shorten the syntax a bit? I.e.
Consuming component:

constructor(
    ...,
    public translations: TranslationService
  ) {

Template binding:
[attr.aria-label]="translations.get('previousMonth')"

and then in TranslationService:

get(key: keyof Translation): string {
  return this.currentTranslation[key];
}

[jakobe]

Really nice work 👌🏻
Great docs!

[MortenGregersen]

Great to finally get the issue closed 🎉

[RasmusKjeldgaard]

Great to finally get the issue closed 🎉

Hi @MortenGregersen 👋 Nice to see you around here again 😄

Before it was closed, #942 was the second-oldest open issue on our backlog. Only outlived by #803.