Accessibility: Improve the password form buttons accessibility.
- makes the "Cancel" button always visible: this allows to generate a new password also on small screens - moves focus back to the Generate Password button when closing the form - changes the password reset show/hide button from a clickable `<span>` element to a real `<button>` element - improves the CSS Props janak007, afercia. Fixes #42853. Built from https://develop.svn.wordpress.org/trunk@44895 git-svn-id: http://core.svn.wordpress.org/trunk@44726 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
parent
03240dd3f4
commit
ca53eac85e
|
|
@ -427,11 +427,16 @@ input[type="number"].tiny-text {
|
|||
margin-right: 1em;
|
||||
}
|
||||
|
||||
button.wp-hide-pw > .dashicons {
|
||||
.wp-hide-pw > .dashicons,
|
||||
.wp-cancel-pw > .dashicons {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.wp-cancel-pw .dashicons-no {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label,
|
||||
#your-profile label + a {
|
||||
vertical-align: middle;
|
||||
|
|
@ -459,7 +464,7 @@ fieldset label,
|
|||
background-color: #eee;
|
||||
border: 1px solid #ddd;
|
||||
color: #23282d;
|
||||
margin: -2px 1px 5px 5px;
|
||||
margin: -1px 0 5px;
|
||||
padding: 3px 5px;
|
||||
text-align: center;
|
||||
width: 25em;
|
||||
|
|
@ -515,13 +520,25 @@ fieldset label,
|
|||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.wp-pwd [type="text"],
|
||||
.wp-pwd [type="password"] {
|
||||
margin: 0;
|
||||
/* Same height as the buttons */
|
||||
line-height: 20px;
|
||||
min-height: 28px;
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
#pass1-text,
|
||||
.show-password #pass1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-password #pass1-text
|
||||
{
|
||||
#pass1-text::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-password #pass1-text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -1462,31 +1479,44 @@ table.form-table td .updated p {
|
|||
|
||||
.wp-pwd [type="text"],
|
||||
.wp-pwd [type="password"] {
|
||||
padding-left: 40px;
|
||||
padding-left: 88px;
|
||||
}
|
||||
|
||||
.wp-pwd button.button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
line-height: 2;
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
padding: 5px 9px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wp-pwd button.wp-hide-pw {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.wp-pwd button.button:hover,
|
||||
.wp-pwd button.button:focus,
|
||||
.wp-pwd button.button:focus {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wp-pwd button.button:active {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.wp-pwd .button .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wp-cancel-pw .dashicons-no {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.options-general-php input[type="text"].small-text {
|
||||
max-width: 6.25em;
|
||||
margin: 0;
|
||||
|
|
@ -1533,12 +1563,6 @@ table.form-table td .updated p {
|
|||
.form-wrap .form-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* users */
|
||||
#profile-page .form-table textarea {
|
||||
max-width: 400px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 480px), screen and (max-width: 450px) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -427,11 +427,16 @@ input[type="number"].tiny-text {
|
|||
margin-left: 1em;
|
||||
}
|
||||
|
||||
button.wp-hide-pw > .dashicons {
|
||||
.wp-hide-pw > .dashicons,
|
||||
.wp-cancel-pw > .dashicons {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.wp-cancel-pw .dashicons-no {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label,
|
||||
#your-profile label + a {
|
||||
vertical-align: middle;
|
||||
|
|
@ -459,7 +464,7 @@ fieldset label,
|
|||
background-color: #eee;
|
||||
border: 1px solid #ddd;
|
||||
color: #23282d;
|
||||
margin: -2px 5px 5px 1px;
|
||||
margin: -1px 0 5px;
|
||||
padding: 3px 5px;
|
||||
text-align: center;
|
||||
width: 25em;
|
||||
|
|
@ -515,13 +520,25 @@ fieldset label,
|
|||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.wp-pwd [type="text"],
|
||||
.wp-pwd [type="password"] {
|
||||
margin: 0;
|
||||
/* Same height as the buttons */
|
||||
line-height: 20px;
|
||||
min-height: 28px;
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
#pass1-text,
|
||||
.show-password #pass1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-password #pass1-text
|
||||
{
|
||||
#pass1-text::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-password #pass1-text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -1462,31 +1479,44 @@ table.form-table td .updated p {
|
|||
|
||||
.wp-pwd [type="text"],
|
||||
.wp-pwd [type="password"] {
|
||||
padding-right: 40px;
|
||||
padding-right: 88px;
|
||||
}
|
||||
|
||||
.wp-pwd button.button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
line-height: 2;
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
padding: 5px 9px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wp-pwd button.wp-hide-pw {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.wp-pwd button.button:hover,
|
||||
.wp-pwd button.button:focus,
|
||||
.wp-pwd button.button:focus {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wp-pwd button.button:active {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.wp-pwd .button .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wp-cancel-pw .dashicons-no {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.options-general-php input[type="text"].small-text {
|
||||
max-width: 6.25em;
|
||||
margin: 0;
|
||||
|
|
@ -1533,12 +1563,6 @@ table.form-table td .updated p {
|
|||
.form-wrap .form-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* users */
|
||||
#profile-page .form-table textarea {
|
||||
max-width: 400px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 480px), screen and (max-width: 450px) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -79,22 +79,49 @@ p {
|
|||
}
|
||||
|
||||
.login .password-input-wrapper {
|
||||
display: table;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login .input.password-input {
|
||||
display: table-cell;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login .input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login .pw-weak {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.login .button.button-secondary {
|
||||
display: table-cell;
|
||||
border-radius: 0;
|
||||
vertical-align: middle;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 5px 9px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.login .button.button-secondary:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.login .button.button-secondary:focus {
|
||||
background: transparent;
|
||||
border-color: #5b9dd9;
|
||||
box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
|
||||
}
|
||||
|
||||
.login .button.button-secondary:active {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.login form {
|
||||
|
|
@ -127,7 +154,6 @@ p {
|
|||
}
|
||||
|
||||
.login label {
|
||||
color: #72777c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -209,7 +235,7 @@ p {
|
|||
.login input[type="text"] {
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
padding: 5px 5px 5px 45px;
|
||||
margin: 2px 0 16px 6px;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -79,22 +79,49 @@ p {
|
|||
}
|
||||
|
||||
.login .password-input-wrapper {
|
||||
display: table;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login .input.password-input {
|
||||
display: table-cell;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login .input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login .pw-weak {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.login .button.button-secondary {
|
||||
display: table-cell;
|
||||
border-radius: 0;
|
||||
vertical-align: middle;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 5px 9px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.login .button.button-secondary:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.login .button.button-secondary:focus {
|
||||
background: transparent;
|
||||
border-color: #5b9dd9;
|
||||
box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
|
||||
}
|
||||
|
||||
.login .button.button-secondary:active {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.login form {
|
||||
|
|
@ -127,7 +154,6 @@ p {
|
|||
}
|
||||
|
||||
.login label {
|
||||
color: #72777c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -209,7 +235,7 @@ p {
|
|||
.login input[type="text"] {
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
padding: 5px 45px 5px 5px;
|
||||
margin: 2px 6px 16px 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -238,7 +238,7 @@
|
|||
$pass1.data( 'pw', data );
|
||||
} );
|
||||
|
||||
$generateButton.show();
|
||||
$generateButton.show().focus();
|
||||
$passwordWrapper.hide();
|
||||
|
||||
$weakRow.hide( 0, function () {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -618,10 +618,11 @@ endif; //!IS_PROFILE_PAGE
|
|||
<input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" aria-describedby="pass-strength-result" />
|
||||
</span>
|
||||
<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
|
||||
<span class="dashicons dashicons-hidden"></span>
|
||||
<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
|
||||
<span class="text"><?php _e( 'Hide' ); ?></span>
|
||||
</button>
|
||||
<button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
|
||||
<span class="dashicons dashicons-no" aria-hidden="true"></span>
|
||||
<span class="text"><?php _e( 'Cancel' ); ?></span>
|
||||
</button>
|
||||
<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
|
||||
|
|
|
|||
|
|
@ -498,10 +498,11 @@ if ( current_user_can( 'create_users' ) ) {
|
|||
<input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
|
||||
</span>
|
||||
<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
|
||||
<span class="dashicons dashicons-hidden"></span>
|
||||
<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
|
||||
<span class="text"><?php _e( 'Hide' ); ?></span>
|
||||
</button>
|
||||
<button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
|
||||
<span class="dashicons dashicons-no" aria-hidden="true"></span>
|
||||
<span class="text"><?php _e( 'Cancel' ); ?></span>
|
||||
</button>
|
||||
<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.2-alpha-44894';
|
||||
$wp_version = '5.2-alpha-44895';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
|
|
@ -712,9 +712,9 @@ switch ( $action ) {
|
|||
<div class="wp-pwd">
|
||||
<div class="password-input-wrapper">
|
||||
<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="off" aria-describedby="pass-strength-result" />
|
||||
<span class="button button-secondary wp-hide-pw hide-if-no-js">
|
||||
<span class="dashicons dashicons-hidden"></span>
|
||||
</span>
|
||||
<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js">
|
||||
<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue