Make WordPress Core

Opened 4 years ago

Closed 2 years ago

#43144 closed enhancement (fixed)

Add a language icon next to language selectors

Reported by: johnbillion Owned by: johnbillion
Milestone: 5.3 Priority: normal
Severity: normal Version: 4.0
Component: I18N Keywords: has-screenshots has-patch
Focuses: administration Cc:


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.

Attachments (5)

Screen Shot 2018-01-22 at 11.02.39.png (44.6 KB) - added by johnbillion 4 years ago.
Site Language field
Screen Shot 2018-01-22 at 12.06.32.png (45.0 KB) - added by johnbillion 4 years ago.
Site Language field with icon
43144.patch (1.1 KB) - added by janak007 4 years ago.
I have added a patch with dashicon for now.
43144.2.patch (656 bytes) - added by atlasmahesh 4 years ago.
Add dashicons icon to language option
43144.diff (1.7 KB) - added by johnbillion 2 years ago.

Download all attachments as: .zip

Change History (16)

4 years ago

Site Language field

4 years ago

Site Language field with icon

#1 @johnbillion
4 years ago

  • Keywords has-screenshots added

#2 @johnbillion
4 years ago

  • Version set to 4.0

This ticket was mentioned in Slack in #core by atlasmahesh. View the logs.

4 years ago

4 years ago

I have added a patch with dashicon for now.

#4 @janak007
4 years ago

  • Keywords has-patch added; needs-patch removed

4 years ago

Add dashicons icon to language option

#5 @afercia
4 years ago

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

Version 0, edited 4 years ago by afercia (next)

#6 @birgire
4 years ago

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.

This ticket was mentioned in Slack in #design by joshuawold. View the logs.

3 years ago

#8 @JoshuaWold
3 years ago

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!

#9 @johnbillion
2 years ago

  • Keywords ui-feedback removed
  • Milestone changed from Awaiting Review to 5.3
  • Owner set to johnbillion
  • Status changed from new to reviewing

2 years ago

#10 @johnbillion
2 years ago

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

#11 @johnbillion
2 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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

Note: See TracTickets for help on using tickets.