Add support for the 'lang' attribute in admin bar menu items.

[Chouby]

The attributes for admin bar menu items allowed in Meta data are white listed:
'html', 'class', 'rel', onclick', 'target', 'title', 'tabindex'

I'd like to add the 'lang' attribute which is useful for accessibility in multilingual context.

[morganestes]

I think if we're adding lang to the list, we should also add dir along with it, since it complements lang from an internationalization standpoint, if not specifically an accessibility one.

[rianrietveld]

@Chouby
In this case the lang attribute is added to a link.
If you want to tell a screen reader what language to expect after selecting a link, you should use the attribute hreflang.
So in this case use hreflang.
W3C specs: ​http://www.w3.org/TR/html5/links.html#links-created-by-a-and-area-elements
But it's purely advisory, not a requirement.

The attribute lang is used to identify a language within an element, for example if you use a quote in another language, you will use:

<blockquote lang="nl">
Dikkertje Dap. Dikkertje Dap klom op de trap. 's Morgens vroeg om kwart over zeven. Om de giraf een klontje te geven.
<blockquote>

Then a screen reader can switch language/voice.
This is only used for more than 2 words, because the switching of a voice will take some time and that's irritating for small pieces of text.

@morganestes
Can you give an example where this is useful? dir is not an attribute of a I believe.

[Chouby]

As far as I understood, the lang and dir attributes are global and can be applied to a. That's not for the linked document but for the label of the link.

I wrote a ​multilingual plugin and would like to improve its accessibility. I am just starting in that domain so I have a lot to learn! In this plugin, I add the list of all languages in the admin bar and I use the native name. I understood that I should add the lang attribute for the language name beeing correctly pronounced.

Here is a piece of html code that I found easily on internet:

<a lang="ar" hreflang="ar" title="arabe" href="//ar.wikipedia.org/wiki/">العربية</a>

For my own usage, I don't need the hreflang attribute because the menu does not switch the admin language but activates a language filter (for the list of posts for example). But it could make sense to add more attributes such as hreflang or dir to the white list for other usages.

This is only used for more than 2 words, because the switching of a voice will take some time and that's irritating for small pieces of text.

I didn't know this rule, so in my case, that may be not useful. What do you think of the long list of available languages on all Wikipedia pages?

[morganestes]

Replying to rianrietveld:

@morganestes
Can you give an example where this is useful? dir is not an attribute of a I believe.

dir is a global attribute, so it can be applied to a to indicate the direction of the language. If we're going to specify a language, it's a good idea to also allow the direction to be indicated.

[afercia]

Discussed a bit this ticket in the last a11y team Slack meeting, we agreed white listing lang and dir attributes doesn't harm and it's an improvement. Maybe some years ago switching language for just 1 or 2 words was discouraged because screen readers were very slow when doing the switch. Some screen readers didn't even support switching language. But maybe today screen readers are far better in that :)

[morganestes]

Replying to afercia:

Discussed a bit this ticket in the last a11y team Slack meeting, we agreed white listing lang and dir attributes doesn't harm and it's an improvement. Maybe some years ago switching language for just 1 or 2 words was discouraged because screen readers were very slow when doing the switch. Some screen readers didn't even support switching language. But maybe today screen readers are far better in that :)

Thanks for the update, I appreciate the a11y team taking a look.

The first patch was just for lang; @Chouby: can you update it to add dir to it?

[leemon]

Added 'lang' and 'dir' attributes

[Chouby]

Too late. It's done yet :)

[morganestes]

The .2 patch doesn't apply cleanly for me with grunt patch.

[leemon]

Second try at patch

[morganestes]

Patch applies cleanly and works to add the attributes via the meta array.

I discussed this with the Polyglots team at the 2015 Community Summit; they had some reservations about including it in core as opposed to introducing it via Babel. The concern is that it may conflict with work done by the Multilingual team, since it can be used to introduce multiple language menu items. After a quick check with @simonwheatley, that doesn't seem to be a blocking concern for this addition.

[swissspidy]

In 35795:

Toolbar: Allow adding lang and dir attributes to toolbar items.

This is useful from a multilingual and accessibility perspective.

Props Chouby, leemon.
Fixes #33513.