Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Language attribute of <html> should not be set to English by default

See original GitHub issue

Version

4.5.7

Reproduction link

https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/generator/template/public/index.html#L2

Environment info

Does not matter, but anyway…

  System:
    OS: macOS 10.15.7
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
  Binaries:
    Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
    Yarn: Not Found
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Edge: 86.0.622.38
    Firefox: 81.0.1
    Safari: 14.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2
    @vue/babel-plugin-jsx:  1.0.0-rc.3
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.5.6
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.5.6
    @vue/cli-plugin-babel: ^4.5.6 => 4.5.6
    @vue/cli-plugin-router:  4.5.6
    @vue/cli-plugin-typescript: ^4.5.6 => 4.5.6
    @vue/cli-plugin-vuex:  4.5.6
    @vue/cli-service: ^4.5.6 => 4.5.6
    @vue/cli-shared-utils:  4.5.6
    @vue/component-compiler-utils:  3.2.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/web-component-wrapper:  1.2.0
    typescript: ~3.9.3 => 3.9.7
    vue: ^2.6.12 => 2.6.12
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.3 (16.0.0-beta.8)
    vue-router: ^3.4.5 => 3.4.5
    vue-simple-suggest: ^1.10.2 => 1.10.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.12 => 2.6.12
    vue-template-es2015-compiler:  1.9.1
    vuex: ^3.5.1 => 3.5.1
  npmGlobalPackages:
    @vue/cli: 4.5.7

Steps to reproduce

Look at the template, language attribute is hard set to English.

Look at Vue-bases websites in German and a lot will have this misleading <html lang="en">. I fixed it for our sites, but there will be tons of others.

What is expected?

The language attribute on the <html> element of the template should be absent. This will let the user agent decide (e.g. autodetect) the language of the page.

What is actually happening?

Language ist set to “en” (English) by default. If a developer has no knowledge of the effect of the language attribute or overlooks it, this might trigger weird translations and screen reader output in the wrong language.

We had this bug multiple times because we simply overlooked the attribute. User then complained that country and district names were displayed weird. Example: Vienna’s district “Liesing” has beed translated to “Lügen”, because Google Auto-Translate jumped in and thought the Vue-based site is in English, so it translated a page in German as English back into German.

I think don’t providing a default language is the best way, since than the user agent has to decide on its own. Most of the time this will be perfect. If developers really want to switch the language, they should know the lang-attribute an do this on their own.

It even got attention on Reddit … https://old.reddit.com/r/Austria/comments/j9e2gx/wer_war_schon_mal_im_23_bezirk/

5w3t5hqmbjs51_jpg__JPEG-Grafik__1080 × 1521_Pixel__-_Skaliert__62__

Issue Analytics

State:
Created 3 years ago
Reactions:7
Comments:6 (1 by maintainers)

Top GitHub Comments

3reactions

boticcommented, Oct 23, 2020

Maybe I’m too conservative, but I don’t think active warnings should be enforced in a default configuration via a generator. Something like Manuel suggests should be part of a CI workflow or your local testing.

1reaction

fangbinweicommented, Oct 22, 2020

I believe that using the lang="" in <html> is better according to https://github.com/h5bp/html5-boilerplate/issues/1542