kazupon / vue-i18n

:globe_with_meridians: Internationalization plugin for Vue.js
https://kazupon.github.io/vue-i18n/
MIT License
7.27k stars 860 forks source link

[feature request] set lang property of parent element when using fallback locale #1407

Open tjeb opened 2 years ago

tjeb commented 2 years ago

Hi,

to comply with a11y requirements, I need to set the lang property of text elements that are not in the language of the current locale. Since there are many terms in this field that have no direct translation, and convention is to use the english terminology a lot, I'd like to use a general approach for that.

There may be several ways to do that, but the easiest seems to simply not provide a translation, and let vue-18n fall back to English. Would it be possible to add an option where it will then automatically set the lang= attribute to the fallback locale that is chosen? Right now I'm sort of hard-coding this using $te(), but that's not really a scalable solution.

Of course, any other way to generalize setting lang properties for elements that are in a different language than the rest of the page would be welcome as well.

kazupon commented 2 years ago

Thank you for your feedback!

As for the lang attribute, the stance of vue-i18n is user-land. Currently, I think it can be supported by using a third vendor library such as vue-meta.

In the framework, I believe that nuxt + @nuxtjs/i18n can make it meet a11y requirements.

I’m currently helping @nuxtjs/i18n for nuxt3, but I have a future idea to use it as a starting point to provide framework-agnostic utility stuff.

tjeb commented 2 years ago

Perhaps I misunderstand both vue-meta and nuxt, but those seem to apply to document-level things, not to individual elements where the language is different than the one for the document. For now I've hard-coded the places where this occurs, but that's not really a flexible or scalable option in the long term :)