Add a language icon next to language selectors

[johnbillion]

The Site Language option on the General Settings screen can be hard to identify if the site is using a language that the user cannot understand. The Language option on the user's profile screen has a similar problem, although less so.

The problem is especially noticeable for users who are not familiar with the WordPress interface.

An icon should be placed next to the field name so that it's more easily identifiable as a language switcher for users who cannot understand the current language.

There is a ​translation icon in Dashicons that can be used. There's also the ​Language Icon that could be an option if an icon specific to language selection is needed.

[johnbillion]

Site Language field

[johnbillion]

Site Language field with icon

[janak007]

I have added a patch with dashicon for now.

[atlasmahesh]

Add dashicons icon to language option

[afercia]

Adding an element, for example a <span>, with an aria-hidden="true" attribute and target that for the dashicon would be preferable See #40428
In a few words: some screen readers already read out CSS generated content and more will do in the next future.

[birgire]

Adding this icon looks like a good visual aid.

With the aria-hidden="true" added to the span tag, I'm wondering about this approach:

<label for="WPLANG"><?php _e( 'Site Language' ); ?> <span aria-hidden="true" class="dashicons dashicons-translation"></span></label>

where we add a space between the Site Language text and the span tag, similar to [40643].

If we don't want the space, then it could be added via CSS as in 43144.patch​.

[JoshuaWold]

We just reviewed this issue in our #design triage in Slack.

1. Adding the icon definitely makes sense.
2. The icon chosen works
3. Without a space is probably ok in this instance

Thank you!

[johnbillion]

43144.diff​ takes into account the feedback from @afercia and adds the icon to the Language option on the user profile screen too.

[johnbillion]

In 45402:

I18N: Add a language icon next to language selectors.

This change means that users who can't read the site's current language can more easily identify controls that allow them to change either the site language or their own admin area language.

Props janak007, atlasmahesh, afercia, birgire, JoshuaWold

Fixes #43144