3534 Password Toggle Text Variation #3827
Conversation
Need to use global search next time when renaming things.
…d-toggle` elements
…ton applies to if there are multiple fields
…nstallation page
… to 0 in `.wp-core-ui .button`.
…an words in the input descriptions.
Conflicts: src/wp-admin/install.php src/wp-admin/user-new.php
…ion of width/padding
|
Hello, there is a small conflict in steup-config.php since I committed [55110] |
Conflicts: src/wp-admin/setup-config.php
|
Thanks @audrasjb. I just merged trunk to address the conflict. |
…php` toggle from aligning properly.
This keep toggle buttons in-line, which was removed with the removal of `display: flex`.
Conflicts: src/wp-admin/install.php
There was a problem hiding this comment.
Thanks for adding text to the button. I marked some specific lines in the files.
This PR still adds an icon-only button to the setup-config page on smaller screens, which would need the 2.5rem side padding behind the button (both on the right, even in RTL).
English:
Arabic:
|
|
||
| .wp-pwd button { | ||
| height: min-content; | ||
| width: 4.875rem; |
There was a problem hiding this comment.
Fixed width buttons can be trouble in other languages.
Spanish overflows a little:
Malayalam overflows a lot:
|
|
||
| .wp-pwd button.pwd-toggle .dashicons { | ||
| position: relative; | ||
| top: 0.25rem |
| @@ -593,6 +604,10 @@ fieldset label, | |||
| opacity: 1; | |||
| } | |||
|
|
|||
| .password-input-wrapper { | |||
| display: inline-block; | |||
There was a problem hiding this comment.
This should not be inline-block at smaller sizes. It seems fine on setup-config.php, but it changes both the Installation and Profile screens.
Installation:
Profile:
| @@ -140,12 +140,14 @@ function display_setup_form( $error = null ) { | |||
| <td> | |||
| <div class="wp-pwd"> | |||
| <?php $initial_password = isset( $_POST['admin_password'] ) ? stripslashes( $_POST['admin_password'] ) : wp_generate_password( 18 ); ?> | |||
| <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" /> | |||
| <span class="password-input-wrapper"> | |||
There was a problem hiding this comment.
A div could be set to inline-block, if appropriate, to avoid putting the password-strength div inside a span.
|
Closed in r56008 |
https://core.trac.wordpress.org/ticket/3534
This a text variation of #3725 to address accessibility concerns and add support for various password manager implementations. The button is separated from the input while still keeping it inline — allowing for password managers which add icons directly to the input, in contrast to those that insert another element to add their respective icon. I did not include the icon, which is inconsistent with the other toggle buttons, so as to provide maximum input space on the setup-config.php form. But the icon can easily be added back to remain consistent.
Figure 1: Separated text password toggle w/ LastPass extension - inactive
Figure 2: Separated text password toggle w/ LastPass extension - active
As a consequence of adding
display: flexto.wp-pwd, the layout for install.php and user-new.php was also affected. I've also added changes to address this. For user-edit.php, user-profile.js#L232 appliesdisplay: blockdirectly to.wp-pwdand was not affected.Figure 3: install.php before.
Figure 4: install.php after change.
Figure 5: install.php after fix.
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.