WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 3 weeks ago

#43700 reviewing enhancement

Language switcher on the login screen

Reported by: johnbillion Owned by: johnbillion
Milestone: Future Release Priority: normal
Severity: normal Version: 4.7
Component: I18N Keywords: has-patch needs-testing needs-refresh
Focuses: accessibility Cc:

Description (last modified by johnbillion)

Since [41692] it's possible to control the language of the login screen using the wp_lang query variable (eg. wp-login.php?wp_lang=it_IT). This is a hidden feature that's only used by the interim login modal.

A language switcher should be introduced on the login screen that makes use of this so users can use the login screen, the password reset screens, and the registration screen in their own language. The behaviour would be the same as the language choosers that are used elsewhere in core, for example on the General Settings screen and on the Multisite registration screens.

One thing that needs to be considered is how the language persists between screens, how to persist POSTed values such as redirect_to, and whether it should persist in user meta once the user successfully logs in. Suggestions welcome.

Attachments (9)

43700.1.diff (3.1 KB) - added by Nikschavan 3 years ago.
43700.diff (6.2 KB) - added by johnbillion 19 months ago.
43700.2.diff (7.1 KB) - added by Nikschavan 16 months ago.
43700.png (16.4 KB) - added by afercia 5 months ago.
Focus style cut-off
43700.3.diff (6.5 KB) - added by sabernhardt 8 weeks ago.
using "Change" submit button
wp-login-language-switcher-change.jpg (28.6 KB) - added by sabernhardt 8 weeks ago.
switcher with submit button
wp-login-submit-button-focus.jpg (9.5 KB) - added by sabernhardt 8 weeks ago.
submit button with focus outline
Screen Shot 2020-10-21 at 5.26.00 PM.png (74.3 KB) - added by garrett-eclipse 6 weeks ago.
Concept: Language Selector at bottom, register/lostpassword links inside form white, and no need for back as logo does that.
Screen Shot 2020-10-21 at 5.29.03 PM.png (79.0 KB) - added by garrett-eclipse 6 weeks ago.
Same concept but with a back link

Download all attachments as: .zip

Change History (39)

#1 @johnbillion
3 years ago

  • Description modified (diff)

#2 follow-up: @swissspidy
3 years ago

How has this been implemented on WordPress.org?

#3 in reply to: ↑ 2 @netweb
3 years ago

Replying to swissspidy:

How has this been implemented on WordPress.org?

I've not looked at it personally but the code is here: https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login

#4 @Nikschavan
3 years ago

Seems this was the main commit for adding this to WordPress.org - https://meta.trac.wordpress.org/changeset/6677

@Nikschavan
3 years ago

#5 @Nikschavan
3 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

Patch 43700.1.diff is the first pass at adding the language switcher to the login window.

One thing that needs to be considered is how the language persists between screens, how to persist POSTed values such as redirect_to, and whether it should persist in user meta once the user successfully logs in. Suggestions welcome.

This attached patch adds the $_GET parameters to hidden variables so that they are retained after the page is reloaded.
Currently three $_GET parameters are handled interim-login, redirect_to, action.

@johnbillion
19 months ago

#6 follow-up: @johnbillion
19 months ago

43700.diff is a work in progress patch that continues the work of @Nikschavan. Changes:

  • Ensure the language switcher only appears when there are language choices available
  • Store the selected language in a cookie so it persists between all of the possible login screens and actions
  • Take the cookie into account when determining the user's locale
  • Allow the user to switch to en_US when it's not the site's default language

#7 @swissspidy
18 months ago

  • Milestone changed from Awaiting Review to Future Release

@Nikschavan
16 months ago

#8 in reply to: ↑ 6 @Nikschavan
16 months ago

43700.2.diff Refreshes @johnbillion's patch with latest trunk and fixes 2 PHP notices.

  • Set default value of explicit_option_en_us as false in wp_dropdown_languages() to avoid PHP notice for undefined index on Line 1511 in src/wp-includes/l10n.php
  • Use esc_url_raw() instead of sanitize_url() to remove depracation warning in wp-login.php

@johnbillion, @swissspidy - Can this ticket be considered for the 5.3 release cycle?

#9 @Nikschavan
16 months ago

Another question would be - should the value of wp_lang be set to user locale after successful login, If user locale is currently empty?

#10 @johnbillion
9 months ago

  • Milestone changed from Future Release to 5.5
  • Owner set to johnbillion
  • Status changed from new to reviewing

This ticket was mentioned in PR #248 on WordPress/wordpress-develop by johnbillion.


7 months ago

Trac ticket: https://core.trac.wordpress.org/ticket/43700

This continues the work on the patches already uploaded to 43700. It introduces a language switcher to the login screen, which also affects its derivatives such as the password reset screens and user registration.

The following closely related functionality has also been implemented:

  • Add the language parameter to the login and password reset URLs in the email sent to a user when they are added to a site.
  • Ensure the password reset email is always sent to the user in their chosen language.
  • Add the language parameter to the URL in the password reset email.

Still to do:

  • Decide whether, upon login, the user's locale should be updated to the one they chose on the login screen. Probably yes.

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


5 months ago

#13 @davidbaumwald
5 months ago

@johnbillion IS this one still on your list to tackle before 5.5 Beta 1 in a few days time? Anything else needed here besides testing?

#14 @afercia
5 months ago

  • Focuses accessibility added
  • Keywords needs-patch added; has-patch removed

Testing 43700.2.diff there are a couple accessibility issues that need to be fixed:

  1. Using the change event on a select is a usability and accessibility issue and needs to be avoided. Users should be in control of triggering the language switch, thus there's the need of a button to submit the language form. See also #40925 and #25103.
  2. Minor CSS issue: the language form uses overflow: hidden thus the select focus style is slightly cut-off on the top and bottom edges. See attached screenshot.

@afercia
5 months ago

Focus style cut-off

#15 follow-up: @johnbillion
5 months ago

  • Keywords needs-testing removed

This needs some more work, including further functional work that I haven't finalised yet, plus design work to improve the layout now that we have several links of different styles at the bottom of this screen, plus the a11y issues mentioned above. Punting to 5.6.

#16 in reply to: ↑ 15 @afercia
5 months ago

  • Milestone changed from 5.5 to 5.6

Replying to johnbillion:

Punting to 5.6.

Forgot to punt? :)

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


3 months ago

#18 @johnbillion
3 months ago

  • Milestone changed from 5.6 to Future Release

This needs some design discussion, design work, and accessibility work. Punting for now.

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


3 months ago

@sabernhardt
8 weeks ago

using "Change" submit button

#20 @sabernhardt
8 weeks ago

  • Keywords has-patch needs-testing needs-design-feedback added; needs-patch removed

Patch is updated for accessibility concerns and a few other changes. (The since note is still the placeholder because this may not be ready for 5.6.)

  • Reduces padding above logo
  • Removes border around language switcher
  • Shows overflow (focus outline)
  • Adds "Change" submit button (reusing text string from wp-admin/includes/class-wp-users-list-table.php)
  • Centers language switcher instead of aligning under the links
  • Centers submit button below the select and label at screen widths up to 400px
  • Code consistency:
  1. replacing spaces with tabs
  2. method="get" lowercase
  3. adding zero for "0.5em"
  4. moving aria-hidden attribute after classes to match the show password button's order

#21 @johnbillion
8 weeks ago

Thanks @sabernhardt could you add a screenshot please?

@sabernhardt
8 weeks ago

switcher with submit button

@sabernhardt
8 weeks ago

submit button with focus outline

#22 @sabernhardt
8 weeks ago

I also considered moving the language switcher above the username/password form, but that probably would mean changing the focused element on page load.

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


6 weeks ago

#24 @garrett-eclipse
6 weeks ago

  • Keywords needs-refresh added; needs-design-feedback removed

Thanks for the patch and screens @sabernhardt discussing in a design triage it's looking great.

We would suggest leaving it after the form as the primary focus of the page is the login. And this is a secondary action which once used isn't going to be re-used as often as login would.

Also the icon seems like it's baseline it would be good to have that vertically centred.

#25 @johnbillion
6 weeks ago

I think this needs some more in-depth design discussion. The bottom of the login screen can contain quite a few elements now and it's getting messy as the four existing items have three different appearances between them.

  • Register
  • Lost your password?
  • ← Back to [site]
  • Privacy Policy
  • Language switcher

#26 @karmatosed
6 weeks ago

  • Keywords needs-design-feedback added

I sort of think putting it before the lost password could be better, sorry to pop in with a counter point. How about we pop back the label as I do agree with you @johnbillion here that section can get quite large if those things are added. Maybe some mocks even if quickly produced?

#27 @johnbillion
6 weeks ago

Some visual mockups would be great

@garrett-eclipse
6 weeks ago

Concept: Language Selector at bottom, register/lostpassword links inside form white, and no need for back as logo does that.

@garrett-eclipse
6 weeks ago

Same concept but with a back link

#28 @garrett-eclipse
6 weeks ago

I put together two quick concepts using login.wordpress.org as the basis (so yes there's no button for submit in my concept but should be one for accessibility). I moved the Register and Lost your password links into the form area as they're tied to the login. And for the Back I didn't really feel it needed as there's the logo for that, but did provide a mock including it above the form as I assume it's beneficial for accessibility.

We can also try a mock with the selector above the form, just note the logo is up there and currently is fairly clean.

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


3 weeks ago

#30 @paaljoachim
3 weeks ago

  • Keywords needs-design-feedback removed

I am removing the Needs design feedback keyword from this ticket. If it is a mistake then please add it back in again.

Last edited 3 weeks ago by paaljoachim (previous) (diff)
Note: See TracTickets for help on using tickets.