WordPress.org

Make WordPress Core

Opened 20 months ago

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

Download all attachments as: .zip

Change History (16)

@johnbillion
20 months ago

Site Language field

@johnbillion
20 months ago

Site Language field with icon

#1 @johnbillion
20 months ago

  • Keywords has-screenshots added

#2 @johnbillion
20 months ago

  • Version set to 4.0

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


20 months ago

@janak007
20 months ago

I have added a patch with dashicon for now.

#4 @janak007
20 months ago

  • Keywords has-patch added; needs-patch removed

@atlasmahesh
20 months ago

Add dashicons icon to language option

#5 @afercia
20 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 4 months ago by SergeyBiryukov (previous) (diff)

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


8 months ago

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

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

@johnbillion
4 months ago

#10 @johnbillion
4 months 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
4 months 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.