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.

Improve screen reader support

See original GitHub issue

The Lighthouse report often shows the following warning:

<html> element does not have a [lang] attribute.

If an Ember app only has a single language then we can set that language in the index.html, but when supporting multiple languages it gets a little more tricky. I would like to propose doing something like this:

setLocale(locale) {
  // ...
  document.documentElement.lang = locale;
}

This should result in something like <html lang="de"> and will hopefully improve the Lighthouse score and screen reader support.

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:15 (5 by maintainers)

Top GitHub Comments

1reaction

ef4commented, May 29, 2018

Most of the time I favor doing anything with DOM in components, even if that means an addon needs to tell people to put a singleton component in their templates. Trying to manipulate DOM from a service or route tends to make things fragile, especially in tests.

This particular case is simple enough that if you do it carefully it’s probably ok.

Bigger picture, there’s not really a strong reason we couldn’t make the <html> and <body> tags be inside an app’s templates, instead of being special outside them. The obvious way to implement this feature is to give people a helper and let them say <html lang={{locale-name}}>

1reaction

Turbo87commented, May 28, 2018

// components/set-doc-lang.js

import Component from '@ember/component';
import { getOwner } from '@ember/application';

export default Component.extend({
  tagName: '',

  didReceiveAttrs() {
    this._super(...arguments);

    let dom = getDOM(this);
    if (dom) {
      let html = dom.documentElement;
      html.setAttribute('lang', this.lang);
    }
  },
});

// from https://github.com/yapplabs/ember-wormhole/blob/0.5.4/addon/utils/dom.js#L45-L63
//
// Private Ember API usage. Get the dom implementation used by the current
// renderer, be it native browser DOM or Fastboot SimpleDOM
export function getDOM(context) {
  let { renderer } = context;
  if (!renderer._dom) {
    // pre glimmer2
    let container = getOwner ? getOwner(context) : context.container;
    let documentService = container.lookup('service:-document');

    if (documentService) {
      return documentService;
    }

    renderer = container.lookup('renderer:-dom');
  }

  if (renderer._dom && renderer._dom.document) {
    // pre Ember 2.6
    return renderer._dom.document;
  }

  return null;
}

this seems to work quite well, but it has the disadvantage of needing a component 🤔