WordPress.org

Make WordPress Core

Opened 18 months ago

Closed 8 weeks 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:

Description

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 18 months ago.
Site Language field
Screen Shot 2018-01-22 at 12.06.32.png (45.0 KB) - added by johnbillion 18 months ago.
Site Language field with icon
43144.patch (1.1 KB) - added by janak007 18 months ago.
I have added a patch with dashicon for now.
43144.2.patch (656 bytes) - added by atlasmahesh 18 months ago.
Add dashicons icon to language option
43144.diff (1.7 KB) - added by johnbillion 8 weeks ago.

Download all attachments as: .zip

Change History (16)

@johnbillion
18 months ago

Site Language field

@johnbillion
18 months ago

Site Language field with icon

#1 @johnbillion
18 months ago

  • Keywords has-screenshots added

#2 @johnbillion
18 months ago

  • Version set to 4.0

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


18 months ago

@janak007
18 months ago

I have added a patch with dashicon for now.

#4 @janak007
18 months ago

  • Keywords has-patch added; needs-patch removed

@atlasmahesh
18 months ago

Add dashicons icon to language option

#5 @afercia
18 months ago

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.

Last edited 8 weeks ago by SergeyBiryukov (previous) (diff)

#6 @birgire
17 months 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.


6 months ago

#8 @JoshuaWold
6 months 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
8 weeks ago

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

@johnbillion
8 weeks ago

#10 @johnbillion
8 weeks 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
8 weeks 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.